c# - 使用 UniformGrid 在 ListView 中嵌套绑定和布局
问题描述
我是 WPF/XAML 的新手,并且在数据绑定和布局方面遇到了一些不错的问题。我试图实现的目标:具有单行网格单元(仅文本和背景颜色)和一些文本块下方的列表。我的 XAML 看起来像这样:
<Window.Resources>
<DataTemplate x:Key="GridLayoutTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding RowData.RowColor}" />
<TextBlock Text="{Binding RowData.RowText}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ListLayoutTemplate">
<StackPanel VerticalAlignment="Stretch">
<ItemsControl ItemTemplate="{StaticResource GridLayoutTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="9"></UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding TileColor}" />
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding TileText}" />
</Grid>
</StackPanel>
</DataTemplate>
</Window.Resources>
<ListView ItemTemplate="{StaticResource ListLayoutTemplate}" Name="lvDataBinding">
</ListView>
后面的代码:
public Test()
{
InitializeComponent();
List<DataObject> items = new List<DataObject>();
List<Row> rowItem = new List<Row>();
rowItem.Add(new Row()
{
RowColor = "Red",
RowText = "Text1"
});
rowItem.Add(new Row()
{
RowColor = "Blue",
RowText = "Text2"
});
items.Add(new DataObject()
{
TileColor = "Black",
TileText = "Blibb",
RowData = rowItem
});
items.Add(new DataObject() { TileColor = "Yellow", TileText = "Blubb", RowData=rowItem });
items.Add(new DataObject() { TileColor = "Red", TileText = "Blabb", RowData=rowItem });
this.lvDataBinding.ItemsSource = items;
}
}
public class DataObject
{
public string TileText { get; set; }
public string TileColor { get; set; }
public List<Row> RowData { get; set; }
}
public class Row
{
public string RowText { get; set; }
public string RowColor { get; set; }
}
如果我运行它,它只显示列表视图的行而不是统一网格。listview 项目的绑定是好的,但我不知道uniformgrid,布局也可能是错误的。令人困惑。
解决方案
绑定to的ItemsSource
属性并移除“RowData”。从中的绑定路径:ItemsControl
RowData
GridLayoutTemplate
<DataTemplate x:Key="GridLayoutTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding RowColor}" />
<TextBlock Text="{Binding RowText}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ListLayoutTemplate">
<StackPanel VerticalAlignment="Stretch">
<ItemsControl ItemsSource="{Binding RowData}" ItemTemplate="{StaticResource GridLayoutTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="9"></UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding TileColor}" />
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding TileText}" />
</Grid>
</StackPanel>
</DataTemplate>
推荐阅读
- java - 如何在 java 中将现有日期对象转换为 24 小时时间格式?
- javascript - OnMouseDown 在 Scatterplot 中多次触发
- c# - 发票的项目行仅显示在最后一页,而不是每个人c#reportviewer
- java - Firebase 推送通知从模型类发送额外数据
- python - 调用 aws sagemaker 端点
- javascript - Web 应用:Firestore 缓存 - 仅读取更改的文档
- python - 获取串行输入以正确格式化为列表
- c++ - CRTP自动注册工厂(静态初始化命令惨败)
- sql - 查找包含确切三个孩子的记录
- java - 在按钮单击时更改以编程方式创建的文本视图背景