RadioButton 自定义样式(带动画)

时间:2023-03-10 04:38:02
RadioButton 自定义样式(带动画)
  <Style x:Key="Radbtn" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontSize" Value="18"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="FocusVisualStyle" Value="{x:Null}"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="10,0"></Setter>
<Setter Property="Tag" Value="{Binding MinWidth ,
RelativeSource={RelativeSource Mode=Self},
Converter={StaticResource ResourceKey=To}}"></Setter>
<Setter Property="MinWidth" Value="80"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<ControlTemplate.Resources>
<local:IVWindow x:Key="ToConHeight"/>
</ControlTemplate.Resources>
<Grid Height="30" >
<Border x:Name="Border" Width="{Binding Tag,RelativeSource={RelativeSource Mode=Self}, Converter={ StaticResource ToConHeight }}">
<Border.Tag>
<Binding Path="Tag" RelativeSource="{RelativeSource Mode=TemplatedParent}" Converter="{StaticResource ToConHeight }"/>
</Border.Tag>
</Border>
<Border x:Name="Border1" Width="{Binding Tag,RelativeSource={RelativeSource Mode=Self}, Converter={ StaticResource ToConHeight }}" CornerRadius="0,0,5,5" BorderThickness="0" Opacity="0.2">
<Border.Tag>
<Binding Path="Tag" RelativeSource="{RelativeSource Mode=TemplatedParent}" Converter="{StaticResource ToConHeight }"/>
</Border.Tag>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Green" TargetName="Border"></Setter>
<Setter Property="Foreground" Value="Green" ></Setter>
<Setter Property="BorderThickness" Value="0,0,0,4" TargetName="Border"></Setter>
<Setter Property="Background" Value="White" TargetName="Border1"></Setter>
<Setter Property="Background" Value="Red"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Tag" From="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="BorderBrush" Value="White" TargetName="Border"></Setter>
<Setter Property="BorderThickness" Value="0" TargetName="Border"></Setter> </Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

效果如下

RadioButton 自定义样式(带动画)