如何在网格中为扩展器提供列的全宽

Question

我有一个 Expander，它应该接收到列的整个宽度，但我无法让它工作。

我尝试在 TextBlock 和 Expander 本身甚至 Grid 上添加 Horizontal(Content)Alignment = stretch，但它不起作用。

我需要的是 Expander 占据大约 90% 的宽度，其余分配给按钮，如下例所示：

我想显示例如一个名字，当你按下它时，它会向下展开并显示附加信息如果按钮被按下，那么按钮后面的命令将被执行（示例中没有绑定命令）。

<ListView
    ItemsSource="{Binding log}"
    SelectionMode="Multiple"
    Style="{StaticResource ListViewStyle}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="0,0,0,1" BorderBrush="Gray">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100*" />
                        <ColumnDefinition Width="5*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>

                    <Expander Grid.Column="0"
                              HorizontalAlignment="Stretch"
                              IsExpanded="{Binding Mode=TwoWay, Path=IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}}"
                              Style="{StaticResource ExpanderStyle}">
                        <Expander.Header>
                            <TextBlock Text="{Binding Name}" Foreground="White"
                                       HorizontalAlignment="Stretch" />
                        </Expander.Header>
                        <TextBlock
                            VerticalAlignment="Center"
                            FontSize="16"
                            Foreground="White"
                            Text="{Binding Description}" />
                    </Expander>

                    <Button Grid.Column="1"
                            Style="{StaticResource IconButton}">
                        <Button.Background>
                            <ImageBrush ImageSource="../icons/edit.png"
                                        Stretch="None" />
                        </Button.Background>
                    </Button>
                    <dialogButton:ConfirmButton Grid.Column="2"
                                                Question="{x:Static language:Strings.confirm}"
                                                Style="{DynamicResource IconButton}"
                                                Margin="0,0,10,0">
                        <dialogButton:ConfirmButton.Background>
                            <ImageBrush ImageSource="../icons/delete.png"
                                        Stretch="None" />
                        </dialogButton:ConfirmButton.Background>
                    </dialogButton:ConfirmButton>

                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

样式

<Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid Background="Transparent" SnapsToDevicePixels="False">
                        <ContentPresenter HorizontalAlignment="Stretch" Margin="0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3" SnapsToDevicePixels="true">
                    <DockPanel>
                        <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" DockPanel.Dock="Top" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontWeight="{TemplateBinding FontWeight}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" MinHeight="0" MinWidth="0" Margin="1" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="true">
                        <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                    </Trigger>

                    <Trigger Property="ExpandDirection" Value="Down">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Bottom"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top"/>
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderDownHeaderStyle}"/>
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我还尝试了以下主题

这里的问题是 Button 被推出了视图

最好的解决方案是 Expander 只取列的宽度，这样我就可以通过 Grid.ColumnDefinition.

调整元素的宽度

Answer 1

问题是 项目容器 ，ListViewItem 默认情况下不会拉伸其内容。您必须创建项目容器样式才能将 HorizontalContentAlignment 设置为 Stretch。

<ListView.ItemContainerStyle>
   <Style TargetType="{x:Type ListViewItem}">
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
   </Style>
</ListView.ItemContainerStyle>

如何在网格中为扩展器提供列的全宽

How to give Expander Full Width of Column in a Grid

c#

.net

wpf

mvvm

expander