没有数据绑定的 UWP ListView

Question

我刚刚开始使用 UWP，目前正在尝试创建包含项目的 ListView。我看过一些教程，但所有教程都适用于 DataBinding。

有没有办法创建一个没有 DataBinding 的 ListView？ DataBinding 对于简单模型来说很棒，但当它变得复杂时，我更喜欢自己填充视图。就像从 url 加载图像、日期到字符串等等。

这可能吗？（如果我完全看错了也请纠正我）

编辑

这就是我在 Android 上填写列表的方式：

我有一个项目列表（例如有名字和姓氏的人）。
我有单个列表项的布局（例如只有一个文本块）
我有一个 ViewHolder，它保存对单个列表项（例如 textBlock）中的视图的引用。此 ViewHolder 被重用。
我有一个适配器，它向 ListView 提供信息（例如项目数和创建 ViewHolder 并将数据绑定到 ViewHolder）
将数据绑定到 ViewHolder 时，我可以完全灵活地决定如何进行绑定。我有对列表项中每个视图的引用。因此，例如，我可以用 firstName 和 lastName 组合填充 textBlock（这都是在代码而不是布局文件中完成的）

Answer 1

在我看来，你不想使用数据绑定的情况真的不多。性能损失没有引入 x:Bind 之前那么大。除此之外，您还可以使用转换器执行您提到的日期格式化等操作。

如果我有一个可以以多种方式呈现的非常复杂的项目，我会使用 UserControl。我只是将数据对象绑定到 UserControl 上的属性并处理此 UserControl 的代码隐藏中的所有内容。

Answer 2

在我看来你完全错了！ :-)

创建 List 的实例，其中 MyItem 与您要手动添加到 ListView 的 class 相同（与您添加到 ListView 的 Items 属性的相同）。最后你有一个包含很多对象的列表。

那么你可以简单地：

this.listView1.ItemsSource = your_instance_of_list

完成！之后你需要设置一个 ItemTemplate。

Answer 3

因此，请允许我先说明一下，关于数据绑定，您是 100% 错误的，哈哈...事情越复杂，DataBinding 就越有用。事实上，事实恰恰相反。人们倾向于发现 MVVM 进程和数据绑定对于简单示例来说有点健壮。

也就是说....

这是按照您的要求进行操作的方法。

要将项目添加到您的列表视图中，您只需调用 Items.Add

在我的 Xaml 中，我有一个 ListView 名为 TestListview

<Grid>
    <ListView x:Name="TestListview"/>
</Grid>

在我的后台代码（Xaml.cs）中，我的构造函数中有以下内容。

TestListview.Items.Add("Item One");
TestListview.Items.Add("Item Two");
TestListview.Items.Add("Item Three");

就是这样。现在项目将在我的列表视图中。再说一遍，这是最糟糕的方法，不可维护，是一种糟糕的学习实践，会让你作为一个专业人士受到惩罚、剥皮和贬低。

祝你好运！

更新

根据 OP 的要求，这里有一个例子说明为什么没有数据绑定的生活会很糟糕

我们将探讨两个示例。在我们的第一个示例中，我们将研究如何使用具有一些属性的对象填充列表视图。然后我们将在单击该对象时启用该对象的详细视图。

然后在我们的第二个示例中，我们将看到如何仅使用数据绑定来完成同样的事情。

对于这两个示例，我将使用这个虚拟数据生成器和模型

   public static IEnumerable<PersonModel> GenerateFakePeople()
   {
            List<PersonModel> people = new List<PersonModel>();
            people.Add(new PersonModel() { FirstName = "Aaron", LastName = "Doe", Age = 11, Bio = "This is a short bio bio bio blah blah blah.", ImageURL= "http://media.boingboing.net/wp-content/uploads/2012/02/breadingcats.jpg" });
            people.Add(new PersonModel() { FirstName = "John", LastName = "Doe", Age = 21, Bio = "This is a short bio bio bio blah blah blah.", ImageURL = "http://media.boingboing.net/wp-content/uploads/2012/02/breadingcats.jpg" });
            people.Add(new PersonModel() { FirstName = "David", LastName = "Doe", Age = 31, Bio = "This is a short bio bio bio blah blah blah.", ImageURL = "http://media.boingboing.net/wp-content/uploads/2012/02/breadingcats.jpg" });
            return people;
    }

    public class PersonModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public string ImageURL { get; set; }
        public string Bio { get; set; }
    }

正如您在 xaml 中看到的那样，我已将其扩展以包含一个位置来显示我们的用户已被点击。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".3*"/>
        <ColumnDefinition Width=".7*"/>
    </Grid.ColumnDefinitions>
    <ListView x:Name="TestListview" Grid.Column="0" SelectionChanged="TestListview_SelectionChanged"/>
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".3*"/>
            <ColumnDefinition Width=".7*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="300"/>
        </Grid.RowDefinitions>
        <Image x:Name="PersonsImage" Grid.Column="0" Grid.Row="0"/>
        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
            <TextBlock x:Name="PersonsName" FontSize="25"/>
            <TextBlock x:Name="PersonsAge" FontSize="25"/>
        </StackPanel>
        <TextBlock x:Name="PersonsBio" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" FontSize="30" TextWrapping="Wrap"/>
    </Grid>
</Grid>

在我们的后台代码中，您可以看到信息不仅是如何填充在屏幕上的，而且还可以看到创建每个单独的 UI 项目时发生的高度耦合的工作。

当我们像这样将 UI 元素紧密耦合在一起时，很难在不破坏内容的情况下更改 UI。不仅如此，它还使更改模型变得困难。

例如，如果我想更改我的 PersonModel 对象以支持全名而不是名字和姓氏，我将不得不检查并更改具有名字的每一行代码属性参考。

更糟糕的是，如果我添加了全名属性但决定保留名字和姓氏属性，但又想将它们切换掉，我将不得不手动查找所有引用旧属性的地方。

哦，我如何访问简历？我们正在从 ListView 捕获选择更改事件，但我们只能从 UI 元素访问数据，因为我们实际上从未将 PersonModel 绑定到 ListViewItem。

最后更新画面，这大概是数据绑定最大的卖点了。如果出于某种原因我在代码中修改了某人的名字，我更改了他们的年龄、他们的简历或其他一些附加到他们的属性会发生什么？我将不得不通过 UI 并手动更新每个引用属性的点。这意味着我必须跟踪它被引用的每个地方。这是高度耦合和非常糟糕的设计。

 public partial class MainWindow : Window
    {
        
    public MainWindow()
    {            
        InitializeComponent();
        
        foreach(PersonModel person in GenerateFakePeople())
        {
            TestListview.Items.Add(GenerateItem(person));
        }
    }

  
    public static StackPanel GenerateItem(PersonModel person)
    {
        StackPanel outerStackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
        StackPanel innerStackPanel = new StackPanel() { Orientation = Orientation.Vertical };
        Image image = new Image() { Source = new BitmapImage(new Uri(person.ImageURL)) };
        TextBlock firstName = new TextBlock() { Text = person.FirstName };
        TextBlock lastName = new TextBlock() { Text = person.LastName };
        TextBlock age = new TextBlock() { Text = person.Age.ToString() };
        TextBlock bio = new TextBlock() { Text = person.Bio };

        outerStackPanel.Children.Add(image);
        outerStackPanel.Children.Add(innerStackPanel);
        innerStackPanel.Children.Add(firstName);
        innerStackPanel.Children.Add(lastName);
        innerStackPanel.Children.Add(age);

        return outerStackPanel;
    }

    private void TestListview_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        StackPanel outerStackPanel = (sender as ListView).SelectedItem as StackPanel;

        if (outerStackPanel != null)
        {
            Image image = outerStackPanel.Children[0] as Image;
            StackPanel innerStackPanel = outerStackPanel.Children[1] as StackPanel;

            if (innerStackPanel != null)
            {
                TextBlock firstName = innerStackPanel.Children[0] as TextBlock;
                TextBlock lastName = innerStackPanel.Children[1] as TextBlock;
                TextBlock age = innerStackPanel.Children[2] as TextBlock;
               // TextBlock bio = innerStackPanel.Children[3] as TextBlock;

                PersonsImage.Source = image.Source;
                PersonsName.Text = firstName.Text + " " + lastName.Text;
                PersonsAge.Text = age.Text;
             //   PersonsBio.Text = bio.Text; //Cant Even access the bio! It doesn't exist!
            }
        }
    }
}

现在让我们看一下数据绑定示例。

使用 DataBinding，我们可以简化我们的后台代码。它允许我们使用 MVVM 等模式。在大规模工作时，它们非常强大。

这是我们的新 Xaml 文件

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".3*"/>
            <ColumnDefinition Width=".7*"/>
        </Grid.ColumnDefinitions>
        <ListView x:Name="PeopleListView" Grid.Column="0" ItemsSource="{Binding People}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImageURL}" Height="100" Width="100"/>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding FirstName}" />
                            <TextBlock Text="{Binding LastName}" />
                            <TextBlock Text="{Binding Age}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".3*"/>
                <ColumnDefinition Width=".7*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="300"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding ElementName=PeopleListView, Path=SelectedItem.ImageURL}"  Grid.Column="0" Grid.Row="0"/>
            <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
                <TextBlock Text="{Binding ElementName=PeopleListView, Path=SelectedItem.FirstName}"  FontSize="25"/>
                <TextBlock Text="{Binding ElementName=PeopleListView, Path=SelectedItem.Age}" FontSize="25"/>
            </StackPanel>
            <TextBlock Text="{Binding ElementName=PeopleListView, Path=SelectedItem.Bio}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" FontSize="30" TextWrapping="Wrap"/>
        </Grid>
    </Grid>

如您所见，有几处发生了变化。您应该注意到的第一件事是 ListView 现在有一个 ItemTemplate。这表示对于添加到 ListView 的每个项目，这就是您希望它在控件中的显示方式。这使我们能够将所有 UI 设计内容保留在其所属的 xaml 中。

您应该注意到的第二件事是我现在将我们的人物显示区域绑定到 ListView 的 SelectedItem 属性。这使我们能够直接访问实际的数据对象，而不必深入研究控件。这是一种更优越的数据处理方式。

终于来看看我们的CS了

    private ObservableCollection<PersonModel> _people;

    public ObservableCollection<PersonModel> People
    {
        get { return _people; }
        set { _people = value; }
    }


    public MainWindow()
    {            
        InitializeComponent();
        People = new ObservableCollection<PersonModel>(GenerateFakePeople());
        this.DataContext = this;
    }

你看的很清楚，我们的CS大大简化了。不仅如此，我们可以对我们的对象进行操作，我们可以通过关闭 PropertyChangedEvent 来保持我们的 UI 同步。这将更新绑定到属性的所有内容。我们还可以轻松地将更多 PersonModel 添加到我们的 People 集合中，它也会反映在屏幕上。

我理解您对 DataBinding 和 MVVM 架构的担忧。我向你保证，整个社区都没有错。我们建立在几十年从不良做法中吸取教训的基础上。 MVVM 为企业提供了一种非常模块化且具有成本效益的软件构建方式。它允许您轻松地重用代码，最重要的是，如果出现问题，很容易找到，因为您不需要在代码中搜索对属性的一百万个引用。您只需修复一次。

我强烈建议您对 MVVM、数据绑定和面向对象编程进行一些研究。走出去，实际构建一些需要维护的 phone 应用程序或软件。然后，当您因为更改某些内容的文本而不得不花一个小时更新代码时，您就会明白。

这里有一些我会研究的资源。如果他们说的是 WPF 而不是 UWP，请不要害怕。对于这些主题，模式几乎相同。

What is MVVM?

What is DataBinding?

Creating User Controls

Creating Lookless Controls

没有数据绑定的 UWP ListView

UWP ListView without DataBinding

data-binding

listview

uwp

windows-10-universal

uwp-xaml

更新