54

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:

enter image description 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.

5
  • 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. Commented Aug 29, 2011 at 15:51
  • 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.
    – brunnerh
    Commented Aug 29, 2011 at 16:03
  • 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?
    – Joe White
    Commented Aug 29, 2011 at 16:55
  • 4
    set VerticalContentAlignment="Center" Commented Sep 26, 2017 at 14:18
  • Update your answer Commented Oct 15, 2018 at 7:35

9 Answers 9

87

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.

3
  • 34
    I found that specifying the VerticalContentAlignment="Center" attribute was enough. So more compactly: <CheckBox Content="Well aligned Checkbox" VerticalContentAlignment="Center"/> works for me
    – nmarler
    Commented Jan 22, 2015 at 23:19
  • 6
    This is the best answer
    – DdW
    Commented Jul 11, 2016 at 14:56
  • 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! Commented Jul 18, 2019 at 12:03
31

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: enter image description here

3
  • This does not do anything at all.
    – brunnerh
    Commented Aug 29, 2011 at 16:11
  • 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. Commented Aug 29, 2011 at 17:48
  • 1
    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" Commented Aug 29, 2011 at 18:06
21

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"/>
17

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

enter image description here

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>
3
  • Setting Padding="4, -2, 0, 0" is a reasonable fix for now. Thanks. Commented Aug 29, 2011 at 18:08
  • 1
    I tried that one to after I saw your comment about Window having FontSize="14" :) Commented Aug 29, 2011 at 18:13
  • 1
    Seeing your response, adding margin to my checkbox seems to solve it for me. Commented Jan 11, 2017 at 8:33
3

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 />
1
  • 7
    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.
    – Wouter
    Commented Sep 30, 2013 at 11:36
1

Applying negative Top padding works just fine for my layout:

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

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>
1
  • 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. Commented Aug 29, 2011 at 17:44
0

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

Here's how it was resolved on my end in MAUI

<StackLayout Orientation="Horizontal" Grid.Row="2" VerticalOptions="Center" Margin="10">
    <CheckBox
        x:Name="chkPaidCall"
        VerticalOptions="Center"
        Margin="0,0,5,0" 
        IsVisible="true" 
        IsChecked="False"/>
    <Label 
        Text="Use Paid Check"
        VerticalTextAlignment="Center"
        HorizontalTextAlignment="Start"
        VerticalOptions="Center"
        Margin="0,0,0,0"/>
</StackLayout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.