"The tick won't stick to my checkbox" - Adding icon to custom checkbox
Posted: 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:
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:
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:
Thanks for your support!
PS. If you have any other advice how to go about styling checkboxes feel free to share it!
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:
Code: Select all
<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:
Code: Select all
<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>
The icon that I'm trying to put there is defined like this:
Code: Select all
<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>
PS. If you have any other advice how to go about styling checkboxes feel free to share it!