WPF Checkbox style change

Question

I have just started with WPF and need specific feature for a checkbox:

1. I want to change the shape from a box to a ellipse.
2. Futher more there should be a color change (green = true, red = false) instead of cross.

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

Answer 1

using the above examples, I managed to make a very close clone of a checkbox from a very popular program :)

it turned out that in fact you can use an infinite number of drawing elements like "geometric shapes", etc., and applying all sorts of gradients (even linear and radial ones are enough)

checkbox example

<Style TargetType="CheckBox" x:Key="CircleCheckboxFL">
    <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="E_Filling" Margin="1.5" StrokeThickness="1.5" Stroke="#0A0C0D">
                        <Ellipse.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="#FF474E51"/>
                                <GradientStop Offset="0.2" Color="#FF474E51"/>
                                <GradientStop Offset="1" Color="#FF737A7D"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse x:Name="E_Outline" Stroke="#6A6E71" StrokeThickness="1.5"/>
                    <Ellipse x:Name="E_Bloom" Margin="2.5" Opacity="1" StrokeThickness="1" Stroke="#FF3700" Visibility="Hidden">
                        <Ellipse.Effect>
                            <BlurEffect Radius="3"></BlurEffect>
                        </Ellipse.Effect>
                    </Ellipse>
                    <Ellipse x:Name="E_Flare" Margin="3.5" StrokeThickness="0.7">
                        <Ellipse.OpacityMask>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#00000000" Offset="0.402"/>
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="#A9A9A9A9" Offset="0.076"/>
                                <GradientStop Color="#35353535" Offset="0.275"/>
                            </LinearGradientBrush>
                        </Ellipse.OpacityMask>
                        <Ellipse.Stroke>
                            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                                <GradientStop Color="#EE858C8F" Offset="0"/>
                                <GradientStop Color="#EE858C8F" Offset="0.4"/>
                                <GradientStop Color="#858C8F" Offset="0.5"/>
                                <GradientStop Color="#EE858C8F" Offset="0.6"/>
                                <GradientStop Color="#EE858C8F" Offset="1"/>
                            </LinearGradientBrush>
                        </Ellipse.Stroke>
                    </Ellipse>
                    <Ellipse Margin="9" x:Name="E_MinMargin" />
                    <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="E_Filling" Property="Fill">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0" Color="#FFEA6038"/>
                                    <GradientStop Offset="0.2" Color="#FFEA6038"/>
                                    <GradientStop Offset="1" Color="#FFFDEACA"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="E_Flare" Property="Stroke">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                                    <GradientStop Color="#EEF0906A" Offset="0"/>
                                    <GradientStop Color="#EEFEFCDD" Offset="0.4"/>
                                    <GradientStop Color="#FEFCDD" Offset="0.5"/>
                                    <GradientStop Color="#EEFEFCDD" Offset="0.6"/>
                                    <GradientStop Color="#EEF0906A" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="E_Bloom" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

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>

Answer 3

You're going to need to customize the Checkbox and create a 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