WPF Checkbox style making focus border behave strangly

Question

Hi All,

I am using WPF with a style sheet. In my style I have been trying to customized the look of the dotted focus border for a checkbox. I need the focus border to only draw around the square an not the entire control.

I set my style width to 15 and the dotted border is correct, but does not surround the square, its off to the side.

I have included the style.

thanks for the help.

Style Sheet fragment:

<Setter Property="Control.Template">
                <Setter.Value>
                  <ControlTemplate>
                    <Rectangle StrokeThickness="1" Stroke="Black"  StrokeDashArray="1 2" SnapsToDevicePixels="true" Width="15"/>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>

Answer 1

Use Blend or XAMLWriter using one the the techniques shown here to get the ControlTemplate of a CheckBox.

Look at how and where the "square" is defined - I am sure that you will see that it has a margin and/or padding and/or other formatting applied to it.

At that point, you can use that information to implement your Style. It's unclear from your snippet if you are actually implementing the ControlTemplate of the CheckBox, but that may be easiest.

Oh, and FYI - in WPF, they are called ResourceDictionaries, not style sheets.

Answer 2

Didn't change much but I think it looks ok

<Style x:Key="MyFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle StrokeThickness="1" Margin="-1,1,-1,1" Stroke="Black" HorizontalAlignment="Left" StrokeDashArray="1 2" SnapsToDevicePixels="true" Width="15"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Canvas>
    <CheckBox Canvas.Left="100" Canvas.Top="100" TabIndex="0" Content="Content1" FocusVisualStyle="{DynamicResource MyFocusVisual}"/>
    <CheckBox Canvas.Left="100" Canvas.Top="120" TabIndex="1" Content="Content2" FocusVisualStyle="{DynamicResource MyFocusVisual}"/>
</Canvas>