Tengo un Expansor en Wpf. En el encabezado, tengo la etiqueta alineada a la izquierda y quiero tener un botón en el sitio correcto. Yo uso el siguiente 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>Pero eso no funciona. El botón del encabezado está alineado a la izquierda, al lado de la etiqueta. ¿Alguien puede explicarme cómo hacerlo bien?
El presentador de contenido del encabezado de Expander tiene la alineación horizontal establecida en Left .
Puede cambiarlo a Stretch usando el enlace OneWayToSource de HorizontalAlignment (que es por defecto Stretch para Grid ) así:
<Expander> <Expander.Header> <Grid Background="Yellow"> <TextBlock Text="Header" HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}" /> </Grid> </Expander.Header> </Expander>PD: me tomó más de lo debido entender la solución de respuesta aceptada, así que decido ahorrar tiempo para futuros lectores.
Pude hacer que el contenido se extendiera en el encabezado para que funcionara usando el xaml que se proporciona a continuación. Básicamente, vinculo los datos de las cuadrículas HorizontailAlignment al antepasado del presentador de contenido. Desafortunadamente, la solución proporcionada por Scher (enlace de datos a ActualWidth ) puede hacer que los elementos de la interfaz de usuario se muestren más anchos que el contenedor, lo que da como resultado que los controles se corten parcialmente). este ejemplo usa xaml puro.
<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>Tomé una de las soluciones vinculadas por Bolu. Este es el resultado:
<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>