其他基礎控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView
11.Menu
12.PasswordBox
13.TextBox
14.RadioButton

ToggleButton ?實現下面的效果

1）ToggleButton來實現動畫；

• Border嵌套 Ellipse并設置TranslateTransform ，當選中Checked 將TranslateTransform.X值To = 20 將Ellipse從左側移動到右側。

• 動畫完成時將Border.Background背景色更改為深色PrimaryNormalSolidColorBrush

<ResourceDictionary.MergedDictionaries><ResourceDictionary?Source="../Themes/Basic/ControlBasic.xaml"/><ResourceDictionary?Source="../Themes/Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style?TargetType="{x:Type?ToggleButton}"?BasedOn="{StaticResource?ControlBasicStyle}"><Setter?Property="Focusable"?Value="False"?/><Setter?Property="Cursor"?Value="Hand"/><Setter?Property="Template"><Setter.Value><ControlTemplate?TargetType="{x:Type?ToggleButton}"><Border?x:Name="PART_Border"Width="40"Height="20"Background="{DynamicResource?BaseSolidColorBrush}"CornerRadius="10"><Ellipse?x:Name="PART_Ellipse"?Width="16"?Height="16"Margin="2,0"VerticalAlignment="Center"?HorizontalAlignment="Left"Fill="{DynamicResource?WindowForegroundColorBrush}"><Ellipse.RenderTransform><TranslateTransform/></Ellipse.RenderTransform></Ellipse><VisualStateManager.VisualStateGroups><VisualStateGroup?x:Name="CheckStates"><VisualState?x:Name="Checked"><Storyboard><DoubleAnimation?Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"?To="20"?Duration="00:00:.3"EasingFunction="{StaticResource?CubicEaseInOut}"/></Storyboard></VisualState><VisualState?x:Name="Unchecked"><Storyboard><DoubleAnimation?Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"?To="0"?Duration="00:00:.3"EasingFunction="{StaticResource?CubicEaseInOut}"/></Storyboard></VisualState><VisualState?x:Name="Indeterminate"?/></VisualStateGroup></VisualStateManager.VisualStateGroups></Border><ControlTemplate.Triggers><Trigger?Property="IsChecked"?Value="True"><Setter?Property="Background"?TargetName="PART_Border"?Value="{DynamicResource?PrimaryNormalSolidColorBrush}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

2）Styles.ToggleButton.xaml 代碼如下；

<WrapPanel?Margin="0,10"><ToggleButton/><ToggleButton?Margin="10,0"?IsEnabled="False"/><ToggleButton?IsChecked="True"/></WrapPanel>

Nuget Install-Package WPFDevelopers.Minimal

^[1][2]

技術群：添加小編微信并備注進群

小編微信：mm1552923 ??

公眾號：dotNet編程大全? ??

參考資料

[1]

GitHub: https://github.com/WPFDevelopersOrg

[2]

Gitee: https://gitee.com/WPFDevelopersOrg

總結

以上是生活随笔為你收集整理的WPF 基础控件之 ToggleButton 样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。