使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果

时间:2023-03-08 20:01:31
<ToggleButton  Height=""  Width="" HorizontalAlignment="Left" Margin="138,122,0,0" Name="button1" VerticalAlignment="Top" Click="button1_Click">
<ToggleButton.Content>
<StackPanel Name="s1" Width="" Height="" Orientation="Horizontal" HorizontalAlignment="Left">
<Border Name="cd1" CornerRadius="" BorderThickness="" Width="" BorderBrush="#FF001900">
<Border.Background>
<ImageBrush ImageSource="/MoveButton;component/Images/12.png" />
</Border.Background>
</Border>
<Border Name="cd2" CornerRadius="" BorderThickness="" Width="" BorderBrush="#FF001900">
<Border.Background>
<ImageBrush ImageSource="/MoveButton;component/Images/13.png" />
</Border.Background>
</Border>
</StackPanel>
</ToggleButton.Content>
</ToggleButton>
        private void button1_Click(object sender, RoutedEventArgs e)
{
if (button1.IsChecked == true)
{
DoubleAnimation d1 = new DoubleAnimation();
d1.From = ;
d1.To = ;
d1.Duration = new Duration(TimeSpan.Parse("0:0:0.2"));
cd2.BeginAnimation(StackPanel.WidthProperty, d1); DoubleAnimation d2 = new DoubleAnimation();
d2.From = ;
d2.To = ;
d2.Duration = new Duration(TimeSpan.Parse("0:0:0.2"));
cd1.BeginAnimation(StackPanel.WidthProperty, d2);
} if (button1.IsChecked == false)
{
DoubleAnimation d1 = new DoubleAnimation();
d1.From = ;
d1.To = ;
d1.Duration = new Duration(TimeSpan.Parse("0:0:0.2"));
cd2.BeginAnimation(StackPanel.WidthProperty, d1); DoubleAnimation d2 = new DoubleAnimation();
d2.From = ;
d2.To = ;
d2.Duration = new Duration(TimeSpan.Parse("0:0:0.2"));
cd1.BeginAnimation(StackPanel.WidthProperty, d2);
}
}

代码没精简,无图无真相,看看OFF和ON

使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果