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

Question

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

提前致谢。

Answer 1

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

以下是您需要执行的步骤：

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

模板属性

最后一步是将 DataTemplateSelector class 分配给 ListView 的 ItemTemplateSelector 属性。

我做了一个简单的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;
        }
    }
}

Xaml:

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

长什么样：

您可以在这里获得更详细的信息：Data template selection: Styling items based on their properties

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

How to customize UI or DataTemplate for each item in listView UWP C#

c#

xaml

user-controls

listview

uwp