c# - 如何在 WPF 中对 GridViewColumns 进行分组,以便扩展器填充整个宽度
问题描述
我是 WPF 的新手,并尝试执行以下操作:
我有一个使用 ViewModel 的带有 ItemsSource 的 ListView。在里面,有一个带有列的 GridView。每个 Column 代表 View Model 的一个 Preoperty。但是描述是可选的,可能会很长。所以我想使用扩展器。我的问题是,我只能将扩展器管理为与名称列一样大。但我希望扩展器与整行一样大。这里有 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 和所有这些的新手。因此,请尽量使您的答案尽可能详细。我尝试了很多东西,但都没有成功。
解决方案
您可以GridViewColumn
在左侧(XAML 中的顶部)添加以下内容到您的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
,它仅显示 s 中的Expander
-Arrow GridViewRow
。
它Expander
本身是左对齐的,并且Margin
在右侧有一个巨大的负数,因此它可以将其内容绘制到右边界之外。宽度设置为ActualWidth
您ItemsPresenter
的GridView
. 有了这个Width
,您可以将内容限制为当前可见Width
的GridView
(或者您可以将其设置为绝对值,例如 500)。
推荐阅读
- for-loop - 在 VHDL 中,是否可以在 FOR 循环中使用 i,j 以外的变量进行综合?
- javascript - 如何知道何时手动(写入)更改了 url 哈希?
- docker - Hyperledger Fabric:了解 Docker 容器
- ios - 是否有原生图像附加到 ios 故事板上的按钮?
- javascript - jquery如何触发点击具有相同类但不同文本的链接
- r - dplyr::arrange 拒绝按时间戳列排列数据帧?
- c# - 如何将类型不变的设置器添加到协变接口?
- javascript - jQuery或js检查复选框是否被选中
- css - Flexbox 父元素折叠
- javascript - 我可以在退货声明中使用警告框吗?