Checkbox Tick size change

[omeraziz]

I have reduced the the size of rectangle of checkbox using "CheckBoxHelper.CheckSize" but the Tick mark inside it is still too big and clipped. How can I change the size of Tick as well to fit it inside the rectangle?

Can I change the Tick mark altogether? For example, replace it with a Lock sign when checked and unlock symbol when unchecked?

[timunie]

Hi @omeraziz ,

you can control this via the CheckBoxHelper.CheckGlyph* - Properties, where * has to be replaced by you with the needed Property. I would override the CheckBoxHelper.CheckGlyphCheckedTemplate and CheckBoxHelper.CheckGlyphUncheckedTemplate with my custom icons.

<CheckBox>
    <mah:CheckBoxHelper.CheckGlyphCheckedTemplate>
        <DataTemplate>
            <iconPacks:PackIconMaterial Width="12"
                                        Height="12"
                                        Margin="2"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Foreground="{DynamicResource MahApps.Brushes.Accent}"
                                        Kind="Lock" />
        </DataTemplate>
    </mah:CheckBoxHelper.CheckGlyphCheckedTemplate>
    <mah:CheckBoxHelper.CheckGlyphUncheckedTemplate>
        <DataTemplate>
            <iconPacks:PackIconMaterial Width="12"
                                        Height="12"
                                        Margin="2"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Foreground="{DynamicResource MahApps.Brushes.Gray1}"
                                        Kind="LockOpenVariant" />
        </DataTemplate>
    </mah:CheckBoxHelper.CheckGlyphUncheckedTemplate>
</CheckBox>

Happy coding
Tim

[omeraziz]

Thanks Tim!
This works for me.