Click here to Skip to main content
13,830,616 members
Click here to Skip to main content
Add your own
alternative version


40 bookmarked
Posted 11 Jun 2007

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


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.


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:








    <!--  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">
    <ControlTemplate TargetType="{x:Type CheckBox}">









            Background="{TemplateBinding Background}" 

            BorderBrush="{TemplateBinding BorderBrush}" 

            IsChecked="{TemplateBinding IsChecked}" 

            RenderMouseOver="{TemplateBinding IsMouseOver}" 

            RenderPressed="{TemplateBinding IsPressed}" 





            Content="{TemplateBinding Content}" 



            HorizontalAlignment="Left" />

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


  • 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


About the Author

Karl Shifflett
Architect Infragistics
United States United States

I’m a passionate Platform Architect at Infragistics.

I’m a long-time WPF-Prism fanatic who enjoys writing developer tools and line of business applications.

My current front end passions are: XAML platforms (Xamarin.Forms, Xamarin, UWP, and WPF), Electron, ES2015 (ES6), Node.js, Aurelia, and AngularJS (Angular 1.5.x).

For the back end I use what is appropriate for the project: SQL Server and ASP.NET WebAPI, MongoDB, Express, Azure, Firebase, etc.

I am very pragmatic software engineer and strive to write simple, maintainable, and testable code. Simple code allows for solving complex problems in a maintainable way.

My Blog

My Github Repros

My YouTube Videos

Just a grain of sand on the worlds beaches.

You may also be interested in...

Comments and Discussions

QuestionCan it be done without Aero? Pin
osos16-Mar-17 11:38
memberosos16-Mar-17 11:38 
QuestionFlow Direction Pin
Member 787310317-Mar-13 22:29
memberMember 787310317-Mar-13 22:29 
AnswerRe: Flow Direction Pin
Karl Shifflett18-Mar-13 4:35
professionalKarl Shifflett18-Mar-13 4:35 
GeneralWhy you need to do that? Pin
demodude6-May-11 11:49
memberdemodude6-May-11 11:49 
GeneralRe: Why you need to do that? Pin
BhaaL-san4-Oct-12 5:15
memberBhaaL-san4-Oct-12 5:15 
GeneralEasier, less educational way Pin
Jacquers10-Dec-07 20:49
memberJacquers10-Dec-07 20:49 
GeneralRe: Easier, less educational way Pin
Daniel Hilgarth28-Sep-08 10:03
memberDaniel Hilgarth28-Sep-08 10:03 
GeneralStyles: Change value of an added item Pin
gerry327-Nov-07 12:22
membergerry327-Nov-07 12:22 
GeneralRe: Styles: Change value of an added item Pin
Karl Shifflett28-Nov-07 5:14
professionalKarl Shifflett28-Nov-07 5:14 
GeneralRe: Styles: Change value of an added item Pin
gerry329-Nov-07 6:37
membergerry329-Nov-07 6:37 
GeneralRe: Styles: Change value of an added item Pin
Karl Shifflett29-Nov-07 12:35
professionalKarl Shifflett29-Nov-07 12:35 
GeneralCheckBox in System.Windows.Forms Pin
Utwig6-Aug-07 3:59
memberUtwig6-Aug-07 3:59 
GeneralNice Pin
Josh Smith12-Jun-07 2:20
memberJosh Smith12-Jun-07 2:20 

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

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

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