UWP小书 - ListView 和 GridView (中)

:::tip
本章涉及知识点：

DataTemplate
ItemContainerStyle
:::

在上一章中，我们简单地介绍了一下ListView/GridView的好处，以及如何使用集合进行绑定。

但是在实际项目中，我们很难只绑定一个字符串集合，通常都是绑定类集合，比如ObservableCollection<User>等。我们的需求有时候也不会仅显示字符串这么简单，可能会显示一张张卡片，或者像QQ那样显示一个聊天列表，那么这该如何完成呢？

DataTemplate

我们知道，ListView/GridView可以根据集合批量创建视图，但这个视图具体长啥样，全靠DataTemplate决定。

顾名思义，DataTemplate就是一个模板，DataTemplate和ListView的关系，就像墙面和瓷砖的关系一样。ListView提供一个容器，DataTemplate决定每一个条目的具体模样。

在上一章中，我们绑定了一个字符串集合，但没有提供DateTemplate，现在我们书接上文，继续添加一个DataTemplate:

<ListView ItemsSource="{x:Bind StringCollection}" HorizontalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid BorderBrush="LightBlue" BorderThickness="0,0,0,1" Padding="0,0,0,5">
                <TextBlock Text="{Binding}" FontWeight="Bold" FontSize="25" FontStyle="Italic"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这里需要解释两个地方：

DataTemplate 算是一种资源，一种类型，并不是说ListView有一个名为DataTemplate的属性，只能说ListView有一个类型为DataTemplate的名为ItemTemplate的属性。这也是DataTemplate写在ListView.ItemTemplate中的原因。
在绑定字符串的时候，我用了这样的语句Text="{Binding}"，这种写法表示绑定DataTemplate代表的数据上下文（DataContext）。

:::tip
你可能不太理解什么是数据上下文，当然也怪这个翻译的含义有些不太明确。简单来说，我们知道属性、方法，而笼阔这些属性、方法的就是数据上下文（不单单指某个类）。在上面的实例中，对于DataTemplate而言，所谓的数据上下文，指的就是单个的String。我们是依托一个字符串集合创建的列表视图，每一个字符串都对应一个视图，那么我们就可以说，视图对应的数据上下文就是那个视图对应的字符串。
:::

现在运行我们可以看到效果：

ListView忠实渲染了我们预设的模板，并填充了数据。这跟我们上一章中不添加DataTemplate所显示的默认效果相比，是不是要好看一些呢？

但是我提出了一个新的需求：

我们注意到，对于单个列表项而言，字符串的位置是偏左的，如果我要让它居于列表项的中间位置呢？

你会发现，在DataTemplate中，你不管是修改Grid.HorizontalAlignment还是TextBlock.HorizontalAlignment都没有用，这又是为什么呢？

轉載來自 https://blog.richasy.cn/