继续聊WPF——自定义CheckBox控件外观
程序员文章站
2022-06-07 14:07:21
...
上一篇文章中谈到了BulletDecorator控件,就是为自定义CheckBox控件的模板做准备,因为CheckBox需要比较严格的布局,正好,BulletDecorator控件就合适了,该控件的布局是有项目列表,排列起来好办很多了。
第一步,先建立一项资源,就是控件的聚焦样式,即当你在窗体中不断按Tab键使控件获取焦点时的样式,后面要用到。
<!--当控件获得键盘焦点时的样式-->
<Style x:Key="FocusStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Red" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
第二步,写好CheckBox的样式。
<!--
CheckBox的样式
-->
<Style TargetType="{x:Type CheckBox}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
<BulletDecorator.Bullet>
<Border x:Name="bd"
BorderThickness="1"
BorderBrush="Red"
MinHeight="15"
MinWidth="15"
VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Color="LightGray" Offset="0.2"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Path x:Name="cp" Width="12" Height="12"
Stroke="Blue"
StrokeThickness="3"/>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="2,0"/>
</BulletDecorator>
<!--
控件触发器
-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<!-- 画上一个勾 -->
<Setter TargetName="cp" Property="Data"
Value="M 0,6 L 6,12 12,0"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Orange" Offset="0.12"/>
<GradientStop Color="Yellow" Offset="0.92"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
第三步,把窗体默认的Grid控件去掉,为了更好地布局,应使用StatcPanel控件。
<StackPanel Orientation="Vertical" Margin="20,20,20,20">
<CheckBox Content="苹果"/>
<CheckBox Content="鸡蛋"/>
<CheckBox Content="白菜"/>
<CheckBox Content="萝卜"/>
<CheckBox Content="豆浆"/>
<CheckBox Content="咸菜"/>
<CheckBox Content="炒饭"/>
<CheckBox Content="烧鸭饭"/>
<CheckBox Content="叉烧饭"/>
</StackPanel>
好,完事,现在来看看效果吧。
当项目被选中后,字体自动变为绿色,请参照上面的XAML代码。
怎么样,漂亮不?
上一篇: wpf自定义colorpicker
下一篇: WPF 自定义ScrollViwer