WPF 基础控件之 RadioButton 样式

其他基础控件

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.ProgressBar

RadioButton 实现下面的效果

1）RadioButton来实现动画；

Border嵌套 Ellipse并设置ScaleTransform ScaleX= 0 ScaleY =0 ，当选中Checked 将ScaleX= 0.4 ScaleY =0.4

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:wpfs="clr-namespace:WPFDevelopers.Minimal.Helpers"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/><ResourceDictionary Source="../Themes/Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Background" Value="{DynamicResource WhiteSolidColorBrush}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RadioButton}"><Grid SnapsToDevicePixels="True"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Border CornerRadius="{Binding ElementName=PART_Border,Path=CornerRadius}"Background="{Binding ElementName=PART_Border,Path=Background}"Margin="1,1,2,1"><Border x:Name="PART_Border" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><Border.BorderBrush><SolidColorBrush Color="{DynamicResource BaseColor}"/></Border.BorderBrush><Grid Width="16" Height="16"><Ellipse x:Name="PART_Ellipse" Fill="{DynamicResource WhiteSolidColorBrush}" MinWidth="6" MinHeight="6"RenderTransformOrigin=".5,.5"><Ellipse.RenderTransform><ScaleTransform ScaleX="0" ScaleY="0"/></Ellipse.RenderTransform></Ellipse></Grid></Border></Border><ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"TextElement.Foreground="{DynamicResource PrimaryTextSolidColorBrush}"/><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CheckStates"><VisualState x:Name="Unchecked"/><VisualState x:Name="Indeterminate"/><VisualState x:Name="Checked"><Storyboard><!--<ColorAnimation Storyboard.TargetName="PART_ContentPresenter"Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"To="{DynamicResource PrimaryPressedColor}"Duration="00:00:.1"/><ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Border"To="{DynamicResource PrimaryPressedColor}" Duration="00:00:.1"/><ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Border"To="{DynamicResource PrimaryPressedColor}" Duration="00:00:.1"/>--><!--<ThicknessAnimation Storyboard.TargetName="PART_Border"Storyboard.TargetProperty="BorderThickness" To="0,0,0,0" Duration="00:00:.1"/>--><DoubleAnimation Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(ScaleTransform.ScaleX)" To=".4" Duration="00:00:.3"EasingFunction="{StaticResource ExponentialEaseOut}"/><DoubleAnimation Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(ScaleTransform.ScaleY)" To=".4" Duration="00:00:.3"EasingFunction="{StaticResource ExponentialEaseOut}"/></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups></Grid><ControlTemplate.Triggers><!--<Trigger Property="IsEnabled" Value="False"><Setter Property="Opacity" Value="{StaticResource EnabledOpacity}" /></Trigger>--><Trigger Property="IsChecked" Value="True"><Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/><Setter Property="BorderBrush" TargetName="PART_Border" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/><Setter Property="TextElement.Foreground" TargetName="PART_ContentPresenter" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsChecked" Value="False" /><Condition Property="IsMouseOver" Value="True" /></MultiTrigger.Conditions><Setter Property="BorderBrush" TargetName="PART_Border" Value="{DynamicResource PrimaryMouseOverSolidColorBrush}"/><!--<MultiTrigger.EnterActions><BeginStoryboard x:Name="PART_BeginStoryboard"><Storyboard><ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Border"To="{StaticResource PrimaryPressedColor}" Duration="00:00:.1"/></Storyboard></BeginStoryboard></MultiTrigger.EnterActions><MultiTrigger.ExitActions><RemoveStoryboard BeginStoryboardName="PART_BeginStoryboard"></RemoveStoryboard></MultiTrigger.ExitActions>--></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
</ResourceDictionary>

2）Styles.RadioButton.xaml 代码如下；

<WrapPanel Margin="0,10"><RadioButton Content="Option A"/><RadioButton Content="Option B" Margin="10,0" IsChecked="True"/><RadioButton Content="Option C" IsEnabled="False"/></WrapPanel>

Nuget Install-Package WPFDevelopers.Minimal