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