我可以用Xaml实现这个布局吗?
我有一个对象数组,基本上是各种类别的ID/值的网格。如果我绑定按类别排序的集合,我可以绑定ListView中文本框的“网格”吗?ID值将是已知的。下面将举例说明。我可以处理UI,但我不知道如何通过ID“放置”,而是显示/绑定值,除非我在代码中punt并创建UI我可以用Xaml实现这个布局吗?,xaml,win-universal-app,windows-10,uwp,Xaml,Win Universal App,Windows 10,Uwp,我有一个对象数组,基本上是各种类别的ID/值的网格。如果我绑定按类别排序的集合,我可以绑定ListView中文本框的“网格”吗?ID值将是已知的。下面将举例说明。我可以处理UI,但我不知道如何通过ID“放置”,而是显示/绑定值,除非我在代码中punt并创建UI public class MyItem { string ID; string Value; string Category; } with values: { id1, value1a, ca
public class MyItem {
string ID;
string Value;
string Category;
}
with values:
{ id1, value1a, catA}
{ id2, value1b, catA}
{ id1, value2a, catB}
{ id2, value2a, catB}
所需的UI绑定(ListView,每行显示每个类别的值):
您可以创建一个
列表视图
,并将一些属性绑定到您的模型。比如说
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ID}" />
<TextBlock Grid.Column="1" Text="{Binding Value}" />
<TextBlock Text="{Binding Category}" />
<Etc />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
在您的情况下,我建议您使用
GridView
而不是ListView
<GridView x:Name="categoryGrid" SizeChanged="GridView_SizeChanged" >
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
别忘了设置
categoryGrid.ItemsSource=yourCustomList代码>您可以使用Orientation=“Horizontal”在行内创建StackPanel,并使用绑定将一些文本块放置在行内。
<GridView x:Name="categoryGrid" SizeChanged="GridView_SizeChanged" >
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
private async void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
{
try
{
ItemsWrapGrid itemsWPGrid = (ItemsWrapGrid)((GridView)sender).ItemsPanelRoot;
double viewWidth = ApplicationView.GetForCurrentView().VisibleBounds.Width;
itemsWPGrid.ItemWidth = (viewWidth) / 2;
}
catch
{
}
}