- AdamJonsson
- Posts: 10
- Joined:
"The tick won't stick to my checkbox" - Adding icon to custom checkbox
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!
-
sfernandez
Site Admin
- Posts: 2991
- Joined:
Re: "The tick won't stick to my checkbox" - Adding icon to custom checkbox
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):
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:
I added the trigger required to toggle the visibility of the check mark accordingly to the CheckBox.IsChecked property value.
Code: Select all
<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>
Code: Select all
<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>
- AdamJonsson
- Posts: 10
- Joined:
Re: "The tick won't stick to my checkbox" - Adding icon to custom checkbox
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!
And thanks for enlightening me about the option to define geometry as resources, as well as the importance of specifying the Stretch property!
Who is online
Users browsing this forum: No registered users and 7 guests