UWP 中的 ListView 样式答案

【问题标题】：Styling ListView in UWPUWP 中的 ListView 样式
【发布时间】：2016-11-25 02:16:28
【问题描述】：

我在 stackoverflow 上找到了this question + answer to my question here，但对我来说，在哪里更改并不完全清楚

ListViewItemPresenter

我尝试了很多东西，但似乎我无法自己找到它:(

这是我的这个框架的 XAML 代码：

<Page.Resources>
    <DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0">
                <TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
                <TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
                    <TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind Items}"
              ScrollViewer.VerticalScrollBarVisibility="Hidden"
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True" 
              ItemTemplate="{StaticResource ItemListDataTemplate}"
              >
    </ListView>
</Grid>

有人可以帮帮我吗？非常感谢您的宝贵时间！

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案1】：

有两种方法可以在您的主页中编辑ListViewItemPresenter：

您可以从 here 复制 XAML 模板（默认样式下方的第一个 XAML 代码块）。将其添加到您的Page.Resources。 ListViewItemPresenter 位于这些 XAML 代码中，您可以编辑其属性，此样式将应用于此页面的 ListView 的所有项目。 注意：请勿在此样式中添加x:Key。
将ListViewItem 控件添加到您的页面，如下所示：
```
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListViewItem></ListViewItem>
</Grid>
```
文档大纲->选择ListViewItem->编辑模板->编辑副本：

删除生成的样式资源的x:Key属性，这样这个样式就会应用到所有的ListViewItem。然后您可以在生成的 XAML 资源中编辑ListViewItemPresenter。

【讨论】：

【解决方案2】：

只需在 Listview 中添加您的 DataTemplate。

将它放在 ItemTemplate 属性中。

   <ListView ItemsSource="{x:Bind Items}"
        ScrollViewer.VerticalScrollBarVisibility="Hidden"
        ItemClick="ListView_ItemClick" 
        IsItemClickEnabled="True" >
   <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0">
                <TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
                <TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
                    <TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </DataTemplate>     
  </ListView.ItemTemplate>

</ListView>

【讨论】：