Changing the size of a checkbox and the check mark in it

Not perfect, but it works. You style the TextBlock (e.g. FontSize, Height ...) and the checkmark grows with the TextBlock.

<StackPanel Name="CheckBoxPanel" Orientation="Horizontal">
    <Viewbox Height="{Binding Path=ActualHeight, ElementName=CheckBoxPanel}">
        <CheckBox />
    </Viewbox>
    <TextBlock /> <!-- for CheckBox Content -->
</StackPanel>

If you change the size then you will have to also change the path, paths are fixed to the size. If you have a path already and just want to scale it you can increase all the number values proportionately.

I recently needed to change MSDN's example custom checkbox [x] style into a tick mark (https://msdn.microsoft.com/en-us/library/ms752319(v=vs.85).aspx), and here the path is before and after.

original path checkbox

<Path Visibility="Collapsed"
    Width="7"
    Height="7"
    x:Name="CheckMark"
    SnapsToDevicePixels="False"
    StrokeThickness="2"
    Data="M 0 0 L 7 7 M 0 7 L 7 0">
    <Path.Stroke>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
    </Path.Stroke>
</Path>

enter image description here

<Path Visibility="Collapsed"
    Width="9"
    Height="9"
    x:Name="CheckMark"
    SnapsToDevicePixels="False"
    StrokeThickness="2"
    Data="M 1 4.5 L 4 7.5 M 4 7.5 L 8 1">
    <Path.Stroke>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
    </Path.Stroke>
</Path>

Both of these examples have a path with two lines that use XY coodinates for their start and end position. Notice in the first image the numbers range from 0 to 7 and the size is 7x7. Also notice in the second image (the tick) i increased the size to 9x9.

All i did to make these was adjust the numbers for the start and end vector2 positions of each line to get the tick shape.

An alternative to manual editing is to download the free version of 'Microsoft Expression Design 4'. You can then make a new image at the desired size then use the EXPORT function and select a XAML file format, then check the file produced and take the path from it.


The XAML for the default a made up example of a BulletDecorator can be found here on MSDN. Almost the entire chunk of XAML on that page deals with the appearance and behavior of the BulletDecorator.

At the heart of all that XAML are two Path objects. The first for the checkmark, and the second for the indeterminate mark (though the name 'InderminateMark' is spelled wrong in the sample XAML. Fortunately, it's spelled consistently wrong everywhere in the CheckBox example, so it's OK.

            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="CheckMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 0 L 7 7 M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>
            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="InderminateMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>

As pointed out by H.B. in the comments, the default WPF themes can be found here.