[英]WPF Checkbox style change
I have just started with WPF and need specific feature for a checkbox: 我刚开始使用WPF,并且需要复选框的特定功能:
The background: I have different sensors and want to enable/disable them via these checkboxes. 背景:我有不同的传感器,并希望通过这些复选框启用/禁用它们。 I also thought about to use buttons instead of checkboxes, but I think the function is more given by the checkboxes. 我还考虑过使用按钮而不是复选框,但是我认为该功能更多地由复选框提供。
I hope my description is understandable. 我希望我的描述是可以理解的。 Is it possible to define such a style- template? 可以定义这样的样式模板吗?
Kind regards 亲切的问候
Alex 亚历克斯
Ok finally I did it! 好吧,终于做到了! In attach you can see my solution and I am confortable with the result. 附上您可以看到我的解决方案,我对结果感到满意。 If someone have any remarks, please don't hesitate to write a comment. 如有任何评论,请随时发表评论。 Thank you very much for your help 非常感谢您的帮助
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="CheckBox" x:Key="CircleCheckbox">
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Content" Value=""></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid>
<Ellipse x:Name="outerEllipse">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="0.88" Color="LightCoral"/>
<GradientStop Offset="1" Color="DarkRed"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="10" x:Name="highlightCircle" >
<Ellipse.Fill >
<LinearGradientBrush >
<GradientStop Offset="0" Color="Green"/>
<GradientStop Offset="0.5" Color="LightGreen"/>
<GradientStop Offset="1" Color="DarkGreen"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="highlightCircle" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1">
<GradientStop Offset="0" Color="Green"/>
<GradientStop Offset="0.5" Color="LightGreen"/>
<GradientStop Offset="1" Color="DarkGreen"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="outerEllipse" Property="Fill">
<Setter.Value>
<RadialGradientBrush>
<GradientStop Offset="0" Color="Green"/>
<GradientStop Offset="0.88" Color="LightGreen"/>
<GradientStop Offset="1" Color="DarkGreen"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="highlightCircle" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1">
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="0.5" Color="LightCoral"/>
<GradientStop Offset="1" Color="DarkRed"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
You're going to need to customize the Checkbox and create a Custom Template . 您将需要自定义Checkbox并创建一个Custom Template 。
For that you need to change the default Checkbox Template . 为此,您需要更改默认的复选框模板 。
What you want to do is play a little bit with the triggers and background to style it like you want. 您想要做的就是在触发器和背景上玩一些,以使其具有所需的样式。 Notice the CheckMark
property, you'll probably want to keep it Hidden
注意CheckMark
属性,您可能想要使其保持Hidden
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.