"The tick won't stick to my checkbox" - Adding icon to custom checkbox

09 Jul 2019, 20:25

Hello!
I'm creating my custom styled Checkbox. I thought it was a good idea to start with an empty template so that I wouldn't have to be confused by all the extra stuff that comes with the default checkbox. I just want a plain ol' checkbox that can flip between the two states.

I've gotten this far:

    <ControlTemplate x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Grid Width="Auto" Height="Auto">
            <StackPanel Orientation="Horizontal" Height="32">
                <Border BorderBrush="#FFCCCCCC" BorderThickness="2" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" CornerRadius="4" Background="#FFF4F4F4" Width="32">

                    <Viewbox>
                        <!--Here's where the Tick lives-->
                    </Viewbox>

                </Border>
                <ContentPresenter Margin="32,0,4,4" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
    </ControlTemplate>

So I was gonna place the Checkbox-icon, the tick, inside the viewbox. The icon is defined as a ControlTemplate in a ResourceDictionary.
Now I'm not sure how to get it there. I've googled like crazy but I can't seem to find the right way.

This is what I thought would be the right way:

    <ControlTemplate x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Grid Width="Auto" Height="Auto">
            <StackPanel Orientation="Horizontal" Height="32">
                <Border BorderBrush="#FFCCCCCC" BorderThickness="2" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" CornerRadius="4" Background="#FFF4F4F4" Width="32">

                    <Viewbox>
                        <ContentControl Content="{StaticResource check_ic}"/>
                    </Viewbox>

                </Border>
                <ContentPresenter Margin="32,0,4,4" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
    </ControlTemplate>

I get no error from this, but the icon is not displayed inside the border. Instead there's the text "System.Windows.ControlTemplate".

The icon that I'm trying to put there is defined like this:

    <ControlTemplate x:Key="check_ic" TargetType="{x:Type Control}">
        <Viewbox>
            <Canvas Width="90" Height="90">
                <Path Fill="{TemplateBinding Background}" Data="F1 M 90.000,90.000 L 0.000,90.000 L 0.000,0.000 L 90.000,0.000 L 90.000,90.000 Z"/>
                <Path Fill="{TemplateBinding Foreground}" Data="F1 M 39.488,74.414 L 15.124,48.040 L 26.876,37.183 L 38.334,49.586 L 65.444,14.140 L 78.153,23.860 L 39.488,74.414 Z"/>
            </Canvas>
        </Viewbox>
    </ControlTemplate>

Thanks for your support!

PS. If you have any other advice how to go about styling checkboxes feel free to share it!

09 Jul 2019, 21:25

Seeing that the check icon is just a single Path (because the other path corresponds to a background you don't probably need), I would define it directly inside the CheckBox template, or maybe make a resource only of the icon geometry (if you plan to use this geometry in other places):

<Geometry x:Key="check_geo">F1 M 39.488,74.414 L 15.124,48.040 L 26.876,37.183 L 38.334,49.586 L 65.444,14.140 L 78.153,23.860 L 39.488,74.414 Z</Geometry>

And the missing piece for correctly rendering the geometry in the specified Path bounds is to use the Stretch property, so the geometry is scaled to fit in the available space:

<ControlTemplate x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Grid Width="Auto" Height="Auto">
        <StackPanel Orientation="Horizontal">
            <Border BorderBrush="#FFCCCCCC" BorderThickness="2" Background="#FFF4F4F4" CornerRadius="4" Width="32" Height="32">
                <Path x:Name="check" Fill="Blue" Stretch="Uniform" Margin="2" Data="{StaticResource check_geo}" Visibility="Collapsed"/>
            </Border>
            <ContentPresenter Margin="12,4" VerticalAlignment="Center"/>
        </StackPanel>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Visibility" Value="Visible" TargetName="check"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I added the trigger required to toggle the visibility of the check mark accordingly to the CheckBox.IsChecked property value.

09 Jul 2019, 21:57

Thanks for the help!
And thanks for enlightening me about the option to define geometry as resources, as well as the importance of specifying the Stretch property!

"The tick won't stick to my checkbox" - Adding icon to custom checkbox Topic is solved

"The tick won't stick to my checkbox" - Adding icon to custom checkbox

Re: "The tick won't stick to my checkbox" - Adding icon to custom checkbox

Re: "The tick won't stick to my checkbox" - Adding icon to custom checkbox

Who is online