WPF - Can't align Groupbox Header to right

Question

I'm new to WPF,

I can't align the groupbox header text "abc" to the right,it's stays on the left, don't know why, can anyone help me please?

<Window x:Class="UserInterface.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="625">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>             
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="4*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="1">
                <GroupBox>
                    <GroupBox.Header>
                        <DockPanel>
                            <TextBlock HorizontalAlignment="Right">abc</TextBlock>
                        </DockPanel>
                    </GroupBox.Header>
                </GroupBox>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

You'll have to edit the `GroupBox`'s `ControlTemplate` as header is hardcoded to be left aligned in there using `Grid` and column arrangements. — Mat J, Feb 28 '14 at 12:02
http://stackoverflow.com/questions/2104013/wpf-groupbox-header-postion-alignment — har07, Feb 28 '14 at 12:04

Rohit Vats · Answer 1 · 2014-02-28T12:25:49.270

You have to override Template of Groupbox in case you want to align header to Right. By default it is placed at left in default template.

Key is to

Set Grid.ColumnSpan to 2 on border hosting Header ContentPresenter.
Set HorizontalAlignment to Right on ContentPresenter.

Here is the XAML which will work:

<GroupBox Header="abc">
   <GroupBox.Template>
      <ControlTemplate TargetType="GroupBox">
         <Grid SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="6" />
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="*" />
               <ColumnDefinition Width="6" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*" />
               <RowDefinition Height="6" />
            </Grid.RowDefinitions>
            <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                    CornerRadius="4,4,4,4"
                    BorderBrush="#00FFFFFF"
                    Background="{TemplateBinding Panel.Background}"
                    Grid.Column="0"
                    Grid.Row="1"
                    Grid.ColumnSpan="4"
                    Grid.RowSpan="3" />
            <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                    CornerRadius="4,4,4,4"
                    BorderBrush="#FFFFFFFF"
                    OpacityMask="{x:Null}"
                    Grid.Row="1"
                    Grid.ColumnSpan="4"
                    Grid.RowSpan="3">
               <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                       CornerRadius="3,3,3,3"
                       BorderBrush="{TemplateBinding Border.BorderBrush}">
                 <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                         CornerRadius="2,2,2,2"
                         BorderBrush="#FFFFFFFF" />
               </Border>
             </Border>
            <Border Padding="3,1,3,0"
                    Name="Header"
                    Grid.Column="1"
                    Grid.ColumnSpan="2" <-- HERE
                    Grid.Row="0"
                    Grid.RowSpan="2">
               <ContentPresenter RecognizesAccessKey="True"
                                 HorizontalAlignment="Right" <-- And HERE
                                 Content="{TemplateBinding HeaderedContentControl.Header}"
                                 ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
                                 ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}"
                                 ContentSource="Header"
                                 SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
             </Border>
             <ContentPresenter Content="{TemplateBinding ContentControl.Content}"
                               ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                               ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                               Margin="{TemplateBinding Control.Padding}"
                               SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                               Grid.Column="1"
                               Grid.Row="2"
                               Grid.ColumnSpan="2" />
          </Grid>
       </ControlTemplate>
   </GroupBox.Template>
</GroupBox>

score 0 · Answer 2 · answered Feb 28 '14 at 12:06

You need to redesign the ContentPresenter inside the template of the Control.

MSDN has an example but somehow it also redesigns the GroupBox.

Check this out and see if thats what you are looking for. You are looking for this line

<ContentPresenter Margin="4"
                  ContentSource="Header"
                  RecognizesAccessKey="True" />

Just add to that:

HorizontalAlignment="Right"

WPF - Can't align Groupbox Header to right

2 Answers2