Question

Good day,

I’m in the process of styling a CheckBox control in an WPF application. My goal is to add a padding to the left of the CheckBox ‘default’ rectangle/border.

By default the padding is only applied to the content area of the CheckBox. Margin does work on the left, but in this case the CheckBox doesn’t register the click to check the box.

Anyone got an idea? Thanks in advance!!

Edit #1, in answer to Vlad, an example which shows the difference in padding/margin:

<StackPanel Orientation="Vertical">
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Normal, clickable everywhere" />
   </Border>
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Content padding, clickable everywhere" Padding="5" />
   </Border>
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Control margin, not clickable in area 5px around" Margin="5" />
   </Border>
</StackPanel>

Answer 1

Well, it’s expected to behave this way. Margin is considered to be “outside” of the control, so the margin area is not letting the clicks through to the control. The padding area, on the contrary, is considered to be the part of control (between the control itself and its “client area” where the content is rendered), so the padding area is getting the clicks.

It looks like you can go with just Padding="5,0,0,0". (This adds padding only on the left side.) See this picture about the WPF’s box model.

---

Update: based on your comment, you need to hack the default template. The default template can be found here: http://msdn.microsoft.com/en-us/library/ms752319%28v=vs.100%29.aspx.

You would need the following changes: include the BulletDecorator into a Grid, and set the desired margin to the BulletDecorator. This must help, as hopefully the focus will be applied to the whole Grid and not the BulletDecorator. Or, alternately, you can set the margin at the BulletDecorator.Bullet‘s Border.

---

Update: Of course it’s better for maintainability not to copy the whole template definition into the actual code. It can be avoided with the following trick.

Say you’ve decided to go for setting an additional margin at the Bullet‘s Border. You can try to override the default style for Border just within the Checkbox‘s Bullet. The following trick should do this:

<!-- first, define a style for border -->
<Style TargetType="Border" x:Key="MyCoolBorderWithMargin">
    <Setter Property="Margin" Value="5,0,0,0"/>
</Style>

<!-- then, define a style for BulletDecorator -->
<!-- this style overrides the style for inner borders -->
<Style TargetType="BulletDecorator" x:Key="MyCoolDecoratorStyle">
    <Style.Resources>
        <Style TargetType="Border"
               BasedOn="{StaticResource MyCoolBorderWithMargin}"/>
    </Style.Resources>
</Style>

<!-- finally, override the style for CheckBox -->
<Style TargetType="CheckBox">
    <Style.Resources>
        <Style TargetType="BulletDecorator"
               BasedOn="{StaticResource MyCoolDecoratorStyle}"/>
    </Style.Resources>
</Style>

This should help.

Beware that this code is a hack, using the knowledge about how the default control template for CheckBox is implemented in the current WPF version. (If you are using WPF version different from 4.0, you may need to update the code, as it’s version-specific: different versions of WPF use different control templates!)