Change the size of CheckBox's CheckMark WPF

Question

I have implemented this style for my CheckBox:

<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FontFamily" Value="{DynamicResource MetroFontRegular}"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource CheckBoxFocusVisual}"/>
  <Setter Property="Foreground" Value="#999999"/>
  <Setter Property="Background" Value="#3f3f3f"/>
  <Setter Property="FontSize" Value="12"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Template">
   <Setter.Value>
   <ControlTemplate TargetType="CheckBox">
     <BulletDecorator Background="Transparent">
       <BulletDecorator.Bullet>
         <Border x:Name="Border"  
                 Width="13" 
                 Height="13" 
                 CornerRadius="6,6,6,6"
                 Background="#ffffff"
                 BorderBrush="#999999"
                 BorderThickness="1" >
             <Image x:Name="CheckMark" Source="Images/CheckMark.png" Width="15" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Border>
       </BulletDecorator.Bullet>
       <ContentPresenter Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"/>
    </BulletDecorator>
    <ControlTemplate.Triggers>
      <Trigger Property="IsChecked" Value="false">
        <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
      </Trigger>
      <Trigger Property="IsMouseOver" Value="true">
        <Setter TargetName="Border" Property="Background" Value="#91814E" />
      </Trigger>
      <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="#c1c1c1"/>
      </Trigger>
   </ControlTemplate.Triggers>
 </ControlTemplate>
</Setter.Value>
</Setter>
</Style>

So now my checkbox looks like a circle and it's checkmark is actually an image named "CheckMark". So I'm pleased with it's look but what i would like to manage is to make my checkmark little bit bigger than my checkbox. For example something like this:

enter image description here

I tried to change the size of my image but when I change it it only get changed inside of checkbox. It does't get outside of it's border. How can I manage this?

could you also share the images used. – pushpraj Aug 15 '14 at 11:36 — pushpraj, Aug 15 '14 at 11:36

score 0 · Answer 1 · answered Aug 15 '14 at 11:43

based on assumptions this should work

<Border x:Name="Border"
        Width="13"
        Height="13"
        CornerRadius="6,6,6,6"
        Background="#ffffff"
        BorderBrush="#999999"
        BorderThickness="1">
    <Canvas>
        <Image x:Name="CheckMark"
                Canvas.Bottom="0"
                Width="20"
                Height="20"
                Source="Images/CheckMark.png"/>
    </Canvas>
</Border>

I have placed a canvas as the content of the Border and placed the check mark within it and aligned the bottom of check image to its bottom. since a Canvas does not clip its content by default this would result in overflow and since we have set a larger size it would give us the desired effect.

score 0 · Accepted Answer · answered Aug 15 '14 at 11:44

If your Border element is constraining the size of the Image that is declared inside it, you can simply move the Image outside of the Border and increase it's size:

<Border x:Name="Border"  
            Width="13" 
            Height="13" 
            CornerRadius="6,6,6,6"
            Background="#ffffff"
            BorderBrush="#999999"
            BorderThickness="1" >
</Border>
<Image x:Name="CheckMark" Source="Images/CheckMark.png" Width="30" Height="30" 
    HorizontalAlignment="Center" VerticalAlignment="Center"/>

Change the size of CheckBox's CheckMark WPF

2 Answers2