如何为listView UWP C#中的每一项自定义UI或DataTemplate

凯撒

我有一个包含不同类型项目的 listView,我需要在 UI 中使用不同的元素来显示它们。例如,我在 listView 中有孩子和成人成员,孩子不会有孩子、配偶等,而成年人会有他们的孩子、配偶、工作场所等。据我所知,一旦我使用数据模板在 XAML 中布局结构,我就不能更改。我为不同的项目创建了一个 UserControl,不确定在添加项目时如何在 ListView 中使用它。
寻求有关如何执行此操作的帮助。

提前致谢。

Roy Li - MSFT

根据您的情况,您可以尝试使用DataTemplateSelector Class此类使您可以根据自己的逻辑为 ListView 应用不同的模板。

以下是您需要执行此操作的步骤:

  1. 您将需要创建自己的DataTemplateSelector Class. 然后您可以将每个模板声明为类的属性。
  2. 您需要DataTemplateSelector class在 XAML 文件的资源部分创建您自己的实例您应该创建 DataTemplate 对象的实例并在资源部分定义它们的布局。然后将这些数据模板的模板属性您在声明DataTemplateSelector class
  3. 最后一步是将 分配给ListViewDataTemplateSelector classItemTemplateSelector 属性

我做了一个简单的demo,你可以参考下面的代码:

后面的代码:

 public sealed partial class MainPage : Page
{
    public List<int> NumbersList { get; set; }

    public MainPage()
    {
        this.InitializeComponent();

        NumbersList = new List<int>();

        for (int i=0;i<10; i++) 
        {
            NumbersList.Add(i);
        }
    }
}

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate ChildrenTemplate { get; set; }
    public DataTemplate AdultTemplateent { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        // use your own conditions
        if ((int)item % 2 == 0)
        {
            return AdultTemplateent;
        }
        else
        {
            return ChildrenTemplate;
        }
    }
}

Xml:

 <Page.Resources>

    <DataTemplate x:Key="AdultTemplateent" x:DataType="x:Int32">
        <StackPanel Orientation="Horizontal" Background="LightGray">
            <TextBlock Text="This is Adult Item" Margin="5"/>
            <TextBlock Text="{x:Bind}" Margin="5"/>
            <TextBlock Text="Workplace:NewYork" Margin="5"/>
        </StackPanel>
      
    </DataTemplate>

    <DataTemplate x:Key="ChildrenTemplate" x:DataType="x:Int32">
        <StackPanel Orientation="Vertical" Background="LightBlue">
            <TextBlock Text="This is Children Item" Margin="5" />
            <TextBlock Text="{x:Bind}" Margin="5" />
            <TextBlock Text="School:DC" Margin="5"/>
        </StackPanel>
    </DataTemplate>

    <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"  AdultTemplateent="{StaticResource AdultTemplateent}" ChildrenTemplate="{StaticResource ChildrenTemplate}"/>

</Page.Resources>
<Grid>
    <ListView x:Name = "TestListView"
      ItemsSource = "{x:Bind NumbersList}"
      ItemTemplateSelector = "{StaticResource MyDataTemplateSelector}">
    </ListView>
</Grid>

它的样子:

在此处输入图片说明

您可以在此处获得更多详细信息:数据模板选择:基于属性的样式项

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章