Click here to Skip to main content
12,621,492 members (35,633 online)
Click here to Skip to main content
Add your own
alternative version

Stats

92K views
902 downloads
39 bookmarked
Posted

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 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...

Pro

Comments and Discussions

 
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
memberKarl Shifflett18-Mar-13 4:35 
GeneralWhy you need to do that? Pin
pankyz6-May-11 11:49
memberpankyz6-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
Jacques Doubell10-Dec-07 20:49
memberJacques Doubell10-Dec-07 20:49 
GeneralRe: Easier, less educational way Pin
dEUs[CPP]28-Sep-08 10:03
memberdEUs[CPP]28-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
memberKarl 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
memberKarl 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
mvpJosh 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.

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