如何在 WPF 中对 GridViewColumns 进行分组，以便扩展器填满整个宽度

Question

我是 WPF 新手，尝试执行以下操作：

我有一个 ListView 和一个使用 ViewModel 的 ItemsSource。在里面，有一个带列的 GridView。每个 Column 代表 View Model 的一个 Preoperty。但描述是可选的，可能会很长。所以我想使用扩展器。我的问题是，我只能将扩展器设置为与名称列一样大。但我希望扩展器与整行一样大。这里有 2 张图片来阐明我想要什么。

我目前的状态： https://i.stack.imgur.com/ZNA4v.png

我想达到的目标： https://i.stack.imgur.com/ZmFq1.png

我尝试了 "grouping the GridView" 但没有成功...请看这里 http://technico.qnownow.com/grouping-gridview-wpf/

这是我的代码

<Window ...>
<Window.Resources>
    ...
</Window.Resources>
<DockPanel>
    <StackPanel DockPanel.Dock="Top">
        ...
    </StackPanel>
    <Grid>            
        <ListView Grid.RowSpan="4" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding MyView}">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="BorderBrush" Value="Black"></Setter>
                    <Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
                    <Setter Property="Focusable" Value="False" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalAlignment" Value="Top"></Setter>
                    <Setter Property="VerticalContentAlignment" Value="Top"></Setter>
                </Style>
            </ListView.ItemContainerStyle>

            <!-- New GridView -->
            <ListView.View>
                <GridView>

                    <!--Number-->
                    <GridViewColumn Header="#">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}"
                                               Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--ErrorLevel-->
                    <GridViewColumn Header="" Width="45">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <Image Source="{Binding Model.ErrorLevel, Converter={StaticResource ErrorLevelToImageConverter}, Mode=OneWay}"
                                           ToolTip="{Binding Model.ErrorLevel, Mode=OneWay}" Width="20" Margin="5" VerticalAlignment="Top" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--ID-->
                    <GridViewColumn Header="ID">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock TextAlignment="Center" Margin="5" Width="50" VerticalAlignment="Top" >
                                        <Hyperlink NavigateUri="{Binding Model.Hyperlink, Mode=OneWay}"
                                                   Command="{Binding HyperlinkCommand}">
                                            <TextBlock Text="{Binding Model.Id, Mode=OneWay}" />
                                        </Hyperlink>
                                    </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--Name-->
                    <GridViewColumn Header="Name" Width="500" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
                                    <Expander.Header>
                                        <TextBlock Text="{Binding Model.Name, Mode=OneWay}"
                                               HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
                                               TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
                                    </Expander.Header>
                                    <GroupBox Header="Description" FontWeight="Bold" >
                                        <TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap"
                                                       FontWeight="Normal" TextAlignment="Left" Margin="5" />
                                    </GroupBox>
                                </Expander>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!-- Module-->
                    <GridViewColumn Header="Module" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock Text="{Binding Model.Module, Mode=OneWay}"
                                               TextAlignment="Center" Margin="5" Width="100" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</DockPanel>

再一次，我是 WPF、MVVM、DataBinding 和所有这些的新手。所以请尽量让你的回答尽可能详细。我尝试了很多东西，但没有成功。

Answer 1

好的，扩展器不可拉伸的事实是因为不可拉伸的父控件。您的 gridview 中有一列 'Name'，其宽度固定，并添加了一个扩展器作为子项。据我所知，如果这不是事实，子控件不能超出父控件，我相信有人会纠正这个问题。我不知道实现目标的最佳方法是什么，但为了给您一些灵感，我举了一个小例子。

所以，给你一个例子，看看它是如何工作的：

编辑：您可以像这样在扩展器上设置负边距：

<Expander ToolTip="Expand" ExpandDirection="Down" Margin="-100,0,-300,0" Foreground="Black" VerticalAlignment="Top">

感谢@LittleBit 提供此提示。

<ListView x:Name="lsttest" ItemsSource="{Binding persons}">
        <ListViewItem>
            <StackPanel>
                <ListView>
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Header="#1" Width="50">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"
                                           Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Header="Test 2" Width="50">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"
                                           Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
                <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
                    <Expander.Header>
                        <TextBlock Text="{Binding Model.Name, Mode=OneWay}"
                                           HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
                                           TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
                    </Expander.Header>
                    <GroupBox Header="Description" FontWeight="Bold" Width="{Binding ActualWidth, ElementName=lsttest}">
                        <TextBlock Text="{Binding Name, Mode=OneWay}" TextWrapping="Wrap"
                                                   FontWeight="Normal" TextAlignment="Left" Margin="5" />
                    </GroupBox>
                </Expander>
            </StackPanel>
        </ListViewItem>
        </ListView>

结果：

Answer 2

您可以在左侧（XAML 中的顶部）添加以下 GridViewColumn 到您的 GridView

<GridViewColumn Header="" Width="30">
    <GridViewColumn.CellTemplate>
        <DataTemplate DataType="viewModel:MyViewModel">
            <Expander Margin="-5,2,-5000,0" HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ItemsPresenter}}}">
                <GroupBox Header="Description" FontWeight="Bold" Margin="0,0,5,0">
                    <TextBlock Text="{Binding Model.Description}" FontWeight="Normal" TextWrapping="Wrap" />
                </GroupBox>
            </Expander>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

这是 GridViewColumn 包含一个空的 Header，它只显示 GridViewRow 中的 Expander-箭头。

Expander本身是左对齐的，并且在右侧有一个巨大的负数Margin，所以它可以在右边界之外绘制它的内容。宽度设置为 GridView 的 ItemsPresenter 的 ActualWidth。使用此 Width，您可以将内容限制为 GridView 的当前可见 Width（或者您可以将其设置为绝对值，如 500）。

最后预览这个 Column

如何在 WPF 中对 GridViewColumns 进行分组，以便扩展器填满整个宽度

How can I group GridViewColumns in WPF, so the expander fills the whole width

c#

wpf

gridview

mvvm

expander