WPF Checkbox : Text On Left Side

• Download source file - 1 Kb

Introduction

This article demonstrates one of the many awesome features of WPF, styling by providing a style for the WPF checkbox control to display it's text on the left side of the control instead of the right.

Background

I was developing a demo application for my company. The task was to provide a WPF program that looked like our web application.

When I came to laying out a stack panel containing 9 checkboxes, I discovered WPF didn't allow me to place the text on the left side of the checkbox graphic. So my options were to:

• Create two controls - a label and checkbox with the label to the left of the checkbox with no text. (This solution didn't work because when the checkbox receives focus the "text" is highlighted and in our case the text was removed. In other words, the little checkbox graphic, does not receive focus, the text does.)
• Change the design of our cool new WPF project and settle for text on the right of the checkbox. (Not!)
• Somehow figure out how to make the checkbox do what I need. (This is my second WPF project. So you can tell, I'm a baby at WPF.)

Checkbox Style

When editing the style, the hard part was figuring out what container panel can provide a solution to the problem. I wanted the checkbox graphic aligned or glued to the right side of the control. The operative word here is "glued."

In WPF, glue translates to, DockPanel. The rest was a piece of cake.

Here is the finished style in a resource dictionary:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2006" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    xmlns:Microsoft_Windows_Themes=
        "clr-namespace:Microsoft.Windows.Themes;
        assembly=PresentationFramework.Aero">

    <!--  SUPER IMPORTANT  -->

    <!--  Your project MUST reference PresentationFramework.Aero.  -->
    
    <!--  SUPER IMPORTANT  -->

<Style x:Key="checkboxLeftSideText" TargetType="{x:Type CheckBox}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="FocusVisualStyle" 
            Value="{DynamicResource CheckBoxFocusVisual}"/>
  <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
  <Setter Property="BorderBrush" 
            Value="{DynamicResource NormalBorderBrush}"/>
  <Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type CheckBox}">

      <DockPanel 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Top" 
          Width="Auto" 
          LastChildFill="True">

        <Microsoft_Windows_Themes:BulletChrome 
            DockPanel.Dock="Right" 
            Margin="4,0,0,0"
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            IsChecked="{TemplateBinding IsChecked}" 
            RenderMouseOver="{TemplateBinding IsMouseOver}" 
            RenderPressed="{TemplateBinding IsPressed}" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Center" 
            Width="Auto" 
            Height="Auto"/>
            
        <ContentPresenter 
            Content="{TemplateBinding Content}" 
            RecognizesAccessKey="True" 
            Height="Auto" 
            HorizontalAlignment="Left" />
            
      </DockPanel>
    </ControlTemplate>
  </Setter.Value>
  </Setter>
</Style>
</ResourceDictionary>

How Does It Work

The DockPanel does all the work. The checkbox graphic (BulletChrome) is docked on the right side of the control with DockPanel.Dock="Right".

The text (ContentPresenter.Content) fills the remaining space of the control. This behavior is made possible by the DockPanel property, LastChildFill=True.

Notice the left margin of 4 that was applied to the checkbox graphic, Margin="4,0,0,0". This keeps the text from butting up against the checkbox graphic. You can adjust this to suit your needs.

That's it friends.

Using The New Checkbox Style

To use this new style, just add the style to a resource dictionary in your application or just use the above code as its own resource dictionary. I suggest placing this style at the application scope so that all windows and pages can take advantage of the new checkbox style.

You MUST add a reference to PresentationFramework.Aero. in your project.

New Checkbox In Action

Below you can see how some stacked checkboxes look. Simply by setting the control width wider than the text you can get the look you want. This was done to allow the checkbox graphic line up with some textboxes on the form.

History

• 11 June 2007: Initial Release

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here