WPF Expander.Header 水平拉伸

Question

我在 Wpf 中有一个扩展器。在 header 中，我将标签左对齐，并希望在右侧站点上有一个按钮。我使用以下 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>

但这不起作用。 header 中的按钮左对齐，在标签旁边。任何人都可以向我解释如何正确地做吗？

Answer 1

我采用了 Bolu 链接的解决方案之一。这是结果：

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

Answer 2

我能够使用下面提供的 xaml 在 header 中扩展内容。基本上我将网格 HorizontailAlignment 数据绑定到内容呈现器祖先。不幸的是，scher 提供的解决方案（数据绑定到 ActualWidth）可能导致 ui 元素显示得比容器更宽，导致控件被部分切断。）Bolu 的 link 文章“Stretching Content in an Expander Header" 使用后面的代码，因为此示例使用纯 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>

Answer 3

Expander header 内容演示者已将水平对齐设置为 Left。

您可以使用 HorizontalAlignment 的 OneWayToSource 绑定将其更改为 Stretch（默认情况下 Grid 为 Stretch），如下所示：

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

P.S.: 我花了很多时间来理解已接受答案的解决方案，所以我决定为未来的读者节省时间。

Answer 4

*哎呀：右填充例如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>

Answer 5

如果您不想更改 Expander Header 查看全部，您还可以使用在加载 Header 时修改 HorizontalAlignment 的行为 (System.Windows.Interactivity)

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;
            }
        }
    }
}

这可以附加到扩展器

<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 水平拉伸

WPF Expander.Header horizontal stretch

c#

wpf

xaml

expander