Question

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

我有一个使用ViewModel的带有ItemsSource的ListView。里面有一个带有列的GridView。每列代表视图模型的Preoperty。但是Description是可选的，可能会很长。所以我想使用扩展器。我的问题是，我只能将扩展器管理成与Name-Column一样大。但是我希望扩展器与整个行一样大。这是2张图片，以阐明我想要的内容。

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

我想要实现的目标： https://i.stack.imgur.com/ZmFq1.png

我尝试“对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

您可以在左侧（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，它仅显示Expander中的GridViewRow-箭头。

Expander本身保持左对齐，并且在右侧具有巨大的负Margin，因此可以将其内容绘制到右边界之外。宽度设置为ActualWidth的{{1}}中的ItemsPresenter。使用此GridView，您可以将内容限制为Width的当前可见Width（或者可以将其设置为绝对值，例如500）。

最后是此GridView的预览

Answer 2

好的，扩展器不可拉伸的事实是由于不可拉伸的父控件。您在gridview中有一列“名称”，具有固定的宽度，并添加了一个扩展器作为子级。据我所知，如果这不是事实，则子控件不能扩展到父控件之外，请确保有人会对此进行纠正。我不知道达到目标的最佳方法是什么，但我给了我一个小例子，给了我一些启发。

因此，举个例子说明这是如何工作的：

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

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

结果：

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

2 个答案: