Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

384
Vistas
WPF Expander.Header horizontal stretch

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?

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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.

over 4 years ago · Santiago Trujillo Denunciar

0

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>
over 4 years ago · Santiago Trujillo Denunciar

0

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>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda