Click here to Skip to main content
Click here to Skip to main content

WPF Checkbox : Text On Left Side

, 11 Jun 2007
Rate this:
Please Sign up or sign in to vote.
An article on styling the standard Checkbox control, changing it's layout so that the text displays to the left of the checkbox graphic instead of the right side.

Sample Image - maximum width is 600 pixels

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.

Sample Image - maximum width is 600 pixels

History

  • 11 June 2007: Initial Release

License

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

Share

About the Author

Karl Shifflett
Architect Gayle Manufacturing Company
United States United States
Karl loves .NET, WPF, WCF, ASP.NET, VB.NET and C#.
 
Awards:
 
  • December 2008 VB.NET Code Project Article Award
  • 2009 Code Project MVP
  • 2008 Code Project MVP
  • 2008 Microsoft MVP - Client App Dev
  • December 2007 VB.NET Code Project Article Award
  • Gold Medal Winner at IBM's 1998 PROIV Programming Contest in Las Vegas
Click here to check out my Blog
 
Click here to learn about Mole 2010 debugging tool for Visual Studio 2010
 
Click here to read about XAML Power Toys
 

Just a grain of sand on the worlds beaches.

Follow on   Twitter

Comments and Discussions

 
QuestionFlow Direction PinmemberMember 787310317-Mar-13 22:29 
AnswerRe: Flow Direction PinmemberKarl Shifflett18-Mar-13 4:35 
GeneralWhy you need to do that? Pinmemberpankyz6-May-11 11:49 
GeneralRe: Why you need to do that? PinmemberBhaaL-san4-Oct-12 5:15 
GeneralEasier, less educational way PinmemberJacques Doubell10-Dec-07 20:49 
GeneralRe: Easier, less educational way PinmemberdEUs[CPP]28-Sep-08 10:03 
GeneralStyles: Change value of an added item Pinmembergerry327-Nov-07 12:22 
GeneralRe: Styles: Change value of an added item PinmemberKarl Shifflett28-Nov-07 5:14 
GeneralRe: Styles: Change value of an added item Pinmembergerry329-Nov-07 6:37 
GeneralRe: Styles: Change value of an added item PinmemberKarl Shifflett29-Nov-07 12:35 
GeneralCheckBox in System.Windows.Forms PinmemberUtwig6-Aug-07 3:59 
GeneralNice PinmvpJosh Smith12-Jun-07 2:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 11 Jun 2007
Article Copyright 2007 by Karl Shifflett
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid