WPF Expander.Header horizontal stretch

Question

I have an Expander in Wpf. In the header I have Label on left aligned and want to have a button on the right site. I use the following XAML:

<Expander HorizontalAlignment="Stretch" IsExpanded="True">
    <Expander.Header >
        <Grid HorizontalAlignment="Stretch" Background="Aqua" Margin="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Content="Label on the left site"/>
            <Button Grid.Column="1" Content="Button on the right"/>
         </Grid>
    </Expander.Header>
    <Label Content="Some Content"/>
</Expander>

But that does not work. The button in the header is aligned to the left, next to the label. Can anyone explain me how to do it right?

[Stretching Content in an Expander Header](https://joshsmithonwpf.wordpress.com/2007/02/24/stretching-content-in-an-expander-header/) — Bolu, Jul 01 '15 at 13:19

score 45 · Answer 1 · answered Jan 19 '18 at 11:23

45

Expander header content presenter has horizontal alignment set to Left.

You can change it to Stretch using OneWayToSource binding of HorizontalAlignment (which is by default Stretch for Grid) like this:

<Expander>
    <Expander.Header>
        <Grid Background="Yellow">
            <TextBlock Text="Header"
                       HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}" />
        </Grid>
    </Expander.Header>
</Expander>

P.S.: it took me more than it should to understand the solution of accepted answer, so I decide to save the time for future readers.

answered Jan 19 '18 at 11:23

Sinatr

20,892
15
90
319

5

This should be accepted answer, because this one does not suggest that you need to alter header template. – Mateusz Myślak Feb 08 '18 at 13:22
this is the only answer that worked and is clean, should be the accepted – christopher_h May 04 '20 at 15:22
3

I agree that this should be the accepted answer. But the binding should be defined on the `Grid`, not the `TextBlock`. – Till F. Dec 29 '20 at 14:23
The alignment on the ContentPresenter is what helped me. Fixed that in my custom expander template et voila! – Travis Apr 21 '21 at 17:42
that's perfect ! – Flou Apr 06 '22 at 14:17
This doesn't work if the expander is not visible in the beginning (e.g. placed in a non-selected tab like in my case). Is there a way to fire the binding when the control is actually shown? – BlackOverlord Sep 04 '22 at 20:34
I'm adding a checkbox on the right hand side and this solution didn't work for me. I tried the HorizontalAlignment on the checkbox and the grid. It looks correct in the design editor but not at runtime. – RevitArkitek May 25 '23 at 13:03

score 22 · Accepted Answer · answered Nov 09 '16 at 13:32

I was able to get content stretching in the header to work using the xaml provided below. Basically I data bind the grids HorizontailAlignment to the content presenter ancestor. Unfortunatley the solution provided by scher (data binding to ActualWidth) can cause ui elements to be displayed wider then there container resulting in controls being partially cut off.) Bolu's link to the article "Stretching Content in an Expander Header" uses code behind where as this example uses pure xaml.

<ItemsControl x:Name="ItemGroups" Grid.Column="2" Grid.Row="0"   ItemsSource="{Binding Model.ItemGroups}" ScrollViewer.VerticalScrollBarVisibility="Auto" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Expander Margin="4,0"   Header="{Binding}">
                        <Expander.HeaderTemplate>
                            <DataTemplate>
                                <Grid  HorizontalAlignment="{Binding Path=HorizontalAlignment, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}, Mode=OneWayToSource}" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition   />
                                        <ColumnDefinition  Width="Auto"/>
                                        <ColumnDefinition  Width="64"/>
                                    </Grid.ColumnDefinitions>

                                    <TextBox Grid.Column="0"  Text="{Binding Name, Mode=TwoWay}" />
                                    <TextBlock Grid.Column="1" Text="{Binding TotalCostString}" Margin="4,0"/>
                                    <Button Grid.Column="2" Command="{Binding DataContext.RemoveItemGroup, ElementName=ItemGroups, Mode=OneWay}" CommandParameter="{Binding}" Content="Remove"/>
                                </Grid>         
                            </DataTemplate>
                        </Expander.HeaderTemplate>
                        <Expander.Content>
                            <TextBlock Text="{Binding Summary}"></TextBlock>
                        </Expander.Content>
                    </Expander>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

thanks, i was just looking at this topic and saw your answer. I didn't think about this, but I confirm this works. It's a bit extra xaml code but it is nice to have it xaml only. I also binded to actualwidth in the header but that was a bit too big. I could have used a converter and adjusted the width width e.g. 2 pixels for the border e.g., but that would be more "static" but shorter code :) — juFo, Nov 09 '16 at 14:09
Does this work because the default value for `Grid.HorizontalAlginment` is `Stretch`? — Tim Pohlmann, Feb 22 '17 at 15:46
This solution also works, when the expander-button is put on the right side like mentioned in the [answer of ray](http://stackoverflow.com/a/18716114/4968864). — scher, Mar 21 '17 at 09:26
I've had a similar problem regarding a custom DataGrid header, where the header hadn't been resized according to the column width. The approach here also works for the DataGrid headers, as I found out. — Chris Tophski, May 28 '18 at 16:54

score 8 · Answer 3 · answered Jul 02 '15 at 06:53

I took one of the solutions linked by Bolu. This is the result:

    <Expander HorizontalAlignment="Stretch" IsExpanded="True">
        <Expander.Header >
            <!-- Width-Binding is needed, to fill the whole header horizontally-->
            <Grid HorizontalAlignment="Stretch" Background="Aqua" Margin="0" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Content="Label on the left site"/>
                <!-- Margin is needed, to bring the Button into the view -->
                <Button Grid.Column="1" Content="Button on the right" Margin="0,0,40,0"/>
            </Grid>
        </Expander.Header>
        <Label Content="Some Content"/>
    </Expander>

Daniel Dušek · Answer 4 · 2018-04-23T14:37:24.870

1

*Heck: right padding to e.g. 100000: Padding="2 2 100000 2"

<Expander Name="Name" ExpandDirection="Down">
    <Expander.Header>
        <TextBlock Text="Expander..." Margin="0 5" Padding="2 2 100000 2" />
    </Expander.Header>
</Expander>

edited Apr 23 '18 at 14:37

answered Apr 23 '18 at 12:48

Daniel Dušek

13,683
5
36
51

score 0 · Answer 5 · answered Sep 19 '19 at 06:42

If you don't want to change the Expander Header look at all you could also use Behaviors (System.Windows.Interactivity) that modifies the HorizontalAlignment when the Header is being loaded

internal class StretchingExpanderHeaderBehavior : Behavior<Expander>
{
    protected override void OnAttached()
    {
        AssociatedObject.Loaded += StretchHeader;
    }

    private void StretchHeader(object sender, RoutedEventArgs e)
    {
        DependencyObject header = AssociatedObject.Header as DependencyObject;
        if (header != null)
        {
            ContentPresenter contentPresenter = VisualTreeHelper.GetParent(header) as ContentPresenter;
            if (contentPresenter != null)
            {
                contentPresenter.HorizontalAlignment = HorizontalAlignment.Stretch;
            }
        }
    }
}

This can be attached to the Expander

<Expander>
    <Expander.Header>
        <DockPanel HorizontalAlignment="Stretch">
            <Button DockPanel.Dock="Right" Content="Button on the right" />
            <Label Content="Label on the left site"/>
        </DockPanel>
    </Expander.Header>

    <Border BorderBrush="LightGray" BorderThickness="1">
        <ItemsPresenter />
    </Border>

    <iy:Interaction.Behaviors>
        <bhv:StretchingExpanderHeaderBehavior />
    </iy:Interaction.Behaviors>

</Expander>

WPF Expander.Header horizontal stretch

5 Answers5