WPF 复选框样式更改答案

【问题标题】：WPF Checkbox style changeWPF 复选框样式更改
【发布时间】：2012-11-20 23:36:58
【问题描述】：

我刚开始使用 WPF，需要一个复选框的特定功能：

我想将形状从长方体更改为椭圆形。
此外应该有颜色变化（绿色=真，红色=假）而不是交叉。

背景：我有不同的传感器，想通过这些复选框启用/禁用它们。我也想过用按钮代替复选框，但我认为功能更多的是由复选框给出的。

我希望我的描述是可以理解的。是否可以定义这样的样式模板？

亲切的问候

亚历克斯

【问题讨论】：

是的，这是可能的，这个问题之前已经在这里提出过（尽管我很难找到链接）。术语是“自定义模板”，您可以使用 Expression Blend 来创建它。
表达混合...我以前从未听说过这个。非常感谢，我去看看！

标签： c# wpf checkbox wpf-controls

【解决方案1】：

好吧，我终于做到了！在附件中，您可以看到我的解决方案，我对结果感到满意。如果有人有任何意见，请不要犹豫写评论。非常感谢您的帮助

<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>

【讨论】：

感谢您的解决方案，它工作正常，但我不想更改复选框的形状，我该怎么做？你能给我一些指导吗

【解决方案2】：

您将需要自定义复选框并创建一个自定义模板。
为此，您需要更改 default Checkbox Template。

您想要做的是稍微玩一下触发器和背景，以根据需要设置样式。注意CheckMark 属性，您可能希望保留它Hidden

【讨论】：

好的，非常感谢。我将 CheckMark 属性隐藏起来，并在其中放置了一些椭圆。通过触发器我可以设置绿色/红色。这行得通吗？
是的，将默认背景颜色设置为红色，并修改 IsChecked 触发器，所以当它为 true 时将背景更改为绿色