How can I align a CheckBox with its content?

Question

The look of a WPF CheckBox misaligns the check portion with the label (content) portion. The check stays slightly above the content as shown here:

The XAML looks like this:

<CheckBox Content="Poorly aligned CheckBox" Margin="9"/>

The CheckBox is inside a Grid cell. Is there a simple way to make the content and check portions of a XAML CheckBox align vertically? I've tried various combinations of properties with no luck. I saw a similar question here but the answer is way too complex.

Thanks in advance.

EDIT: The problem was caused by the Window FontSize which I set to 14. To re-create the problem set the CheckBox FontSize to 14 (or more). My program is viewed at a distance by factory workers so I allow the Window FontSize to be increased or decreased by the user.

Sextillion

If you think that editing the control template is way too complex, then you are going to have to accept the way the standard control template is laid out. The actual change you'd need to make to the control template, like the change made in the answer you linked to, is simple. – Eberly

Tags do not belong into the title, everyone who is even remotely familiar with the site knows this, if the question is tagged as WPF everyone knows that you are not talking about a WinForms or HTML checkbox. The WPF tag is even automatically prepended on the page title. – Closet

You can add me to the list of people who can't reproduce your problem. Your XAML yields a normal-looking checkbox, without the layout problem you show in your screenshot. Can you reproduce your problem in a standalone test app? – Gelt

set VerticalContentAlignment="Center" – Delphadelphi

Update your answer – Emmett

Answer 1

Edit - New Answer: (previous was no good)

Not the best way i believe , but can do the work:

<CheckBox>
    <TextBlock Text="Poorly aligned CheckBox" Margin="0,-2,0,0"/>
</CheckBox>

Using negative margin to push the content up, result:

Booby

This does not do anything at all. – Closet

The Qwertie answer pointed me to the cause of the problem - Window FontSize="14". Your negative top margin answer works as long as the user does not change the Window FontSize (which my program allows). For now, your answer is the best I've found. Thanks. – Sextillion

The negative top margin moves the entire control slightly up. I find a negative top padding works better. Now my fix is this: Padding="4, -2, 0, 0" – Sextillion

Answer 2

I know it's too late, but here is a better solution, without setting margins. Margins should be set differently for different heights of TextBlock or Checkbox.

<CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center">
    <TextBlock Text="Well aligned Checkbox" VerticalAlignment="Center" />
</CheckBox>

Update:

It's worth checking out @nmarler's comment below.

Lodgings

I found that specifying the VerticalContentAlignment="Center" attribute was enough. So more compactly: <CheckBox Content="Well aligned Checkbox" VerticalContentAlignment="Center"/> works for me – Ghostly

This is the best answer – Constitutive

I used @nmarler's suggestion, but strangly it only aligns with <CheckBox Content="Well aligned Checkbox" VerticalContentAlignment="Bottom"/> . Anyway it fixed my alignment issue, thank you guys! – Grist

Answer 3

There is a simple solution for this without needing to make a text block for the content, and without writing extra code that you don't need. Just use "VerticalContentAlignment". Example:

<CheckBox Content="Sample of Text" VerticalContentAlignment="Center"/>

Ila

Answer 4

The default Style of a CheckBox don't look like that in WPF. It aligns perfectly in both XP and Windows 7. Can you give a better description of how to reproduce this problem?

Two things I can think of to get the offset that you're seeing is either changing the Padding or the VerticalContentAlignment. The default CheckBox value for VerticalContentAlignment is Top and a CheckBox with Content has Padding set to "4,0,0,0". Try to change these two around and see if it makes any difference.

Here is a comparison

From the following Xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <CheckBox Grid.Row="0"
              Content="Poorly aligned CheckBox" Margin="9" />
    <CheckBox Grid.Row="1"
              Content="Padding=4,4,0,0" Margin="9" Padding="4,4,0,0"/>
    <CheckBox Grid.Row="2"
              Content="Vertical Center" Margin="9"
              VerticalContentAlignment="Center"/>
    <CheckBox Grid.Row="3"
              Content="Vertical Top" Margin="9"
              VerticalContentAlignment="Top"/>
</Grid>

Henriques

Setting Padding="4, -2, 0, 0" is a reasonable fix for now. Thanks. – Sextillion

I tried that one to after I saw your comment about Window having FontSize="14" :) – Henriques

Seeing your response, adding margin to my checkbox seems to solve it for me. – Alane

Answer 5

Place an empty CheckBox and the content as separate controls in a StackPanel with horizontal orientation. This works with any font size.

<StackPanel Orientation="Horizontal">
    <CheckBox VerticalAlignment="Center" />
    <TextBlock VerticalAlignment="Center" Text="Option X" />
</StackPanel />

Stunt

If you do it like this clicking the TextBlock will not toggle the CheckBox. You need to place it in the Content of CheckBox for that behavior. – Kwashiorkor

Answer 6

Applying negative Top padding works just fine for my layout:

<CheckBox Content="Poorly aligned CheckBox" Padding="4,-3,0,0" Margin="9"/>

Inductile

Answer 7

My checkboxes are aligned fine, so I wonder what's different about yours. The only apparent difference is that you are using a larger font than me, which reminds me of the following question:

WPF CheckBox style with the TextWrapping

Your problem may be that if the content is a textblock, the checkbox is top-justified, which may look odd when the font size is increased. So my guess is, try using an AccessText as the Content of the CheckBox instead:

<CheckBox Margin="9"><AccessText>Better aligned CheckBox?</AccessText></CheckBox>

Tiltyard

Thank you. Your answer pointed me to the cause of the problem - Window FontSize="14". I tried AccessText but that didn't fix it. I will probably use the MichaelS answer of giving the content a negative top Margin. – Sextillion

Answer 8

In the ControlTemplate TargetType="{x:Type CheckBox}", you will see Width=13 Height=13; add in the Margin="0,4,0,0" (Left, Top, Right, Bottom) and adjust to get the results you like. I have even enlarged the CheckBox and the Glyph Size and then realigned it with the Margin. Here is the complete Template:

<Style x:Key="{x:Type CheckBox}"
   TargetType="{x:Type CheckBox}">
    <Setter Property="SnapsToDevicePixels"
      Value="true" />
    <Setter Property="OverridesDefaultStyle"
      Value="true" />
    <Setter Property="FocusVisualStyle"
      Value="{DynamicResource CheckBoxFocusVisual}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <!--Width=13 Height=13 CornerRadius=0-->
                        <Border x:Name="Border"
                Width="15"
                Height="15"
                Margin="0,4,0,0"
                CornerRadius="1"
                BorderThickness="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                                            <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="{DynamicResource ControlLightColor}" />
                                            <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>

                            </Border.Background>
                            <Grid>
                                <!--Width=7 Height=7-->
                                <Path Visibility="Collapsed"
                  Width="8"
                  Height="8"
                  Margin="0,0,0,0"
                  x:Name="CheckMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 0 L 7 7 M 0 7 L 7 0">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                                    </Path.Stroke>
                                </Path>
                                <Path Visibility="Collapsed"
                  Width="8"
                  Height="8"
                  Margin="0,0,0,0"
                  x:Name="InderminateMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 7 L 7 0">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                                    </Path.Stroke>
                                </Path>
                            </Grid>
                        </Border>
                    </BulletDecorator.Bullet>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlMouseOverColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlPressedColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource PressedBorderDarkColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource PressedBorderLightColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="CheckMark">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Visible}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="InderminateMark">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Visible}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!--4,0,0,0-->
                    <ContentPresenter Margin="5,0,0,0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        RecognizesAccessKey="True" />
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Jolinejoliotcurie