WPF 自定义CheckBox样式的代码

时间:2021-04-16

  自定义CheckBox样式,mark一下,方便以后参考复用。

  设计介绍:

  1、一般CheckBox模板太难看了,肯定要重写其中的模板。

  2、模板状态为未选中状态和选中状态,设置为默认未选中就好了。

  默认状态,设置边框、透明度等。

  选中的话,我们可以设置√和背景。

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Height" Value="25"/>
<Setter Property="IsChecked" Value="False"/>
<Setter Property="Margin" Value="0,20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
<Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
<Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
<Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
</Grid>
</Grid>
<TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
<Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

  当然如果需要点动画的话,可以添加个Strory,也是不错的。例如:

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Height" Value="25"/>
<Setter Property="IsChecked" Value="{Binding IsChecked}"/>
<Setter Property="Margin" Value="0,20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="aaaa">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
<Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
<Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
<Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
<Grid.RenderTransform>
<RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>
</Grid.RenderTransform>
</Grid>
</Grid>
<TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
<Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
</Trigger>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard HandoffBehavior="SnapshotAndReplace">
<Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">
<DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章