张高兴的 UWP 开发笔记：横向 ListView

　　ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ，但如果我们需要横向显示的 ListView 怎么办？

　　Blend for Visual Studio 现在就派上用场了。不只是 ListView ，其他的控件也可以用 Blend 定制你自己的 UI 样式。

　　下面新建一个项目 "HorizontalListViewDemo" ，用于演示横向 ListView ，解决方案结构如下：( GitHub: https://github.com/ZhangGaoxing/uwp-demo/tree/master/HorizontalListViewDemo )

　　由于只是一个演示项目，ListView 的绑定数据素材引自 Bob Tabor 的 UWP 入门开发视频 https://mva.microsoft.com/zh-cn/training-courses/-windows-10--14541 。

　　项目分析

　　1. MainPage 的结构

　　MainPage 由两部分组成，一个标题，一个 ListView 。

<Grid Background="Black"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><!--标题--><StackPanel Margin="15,15,15,0"><TextBlock Text="Horizontal ListView Demo" FontSize="30" FontWeight="Bold"Foreground="White" /><TextBlock Text="横向 ListView" Foreground="White" /></StackPanel><ListView Name="MyListView" Grid.Row="1"  /></Grid>

　　2. 用 Blend 定制样式

　　首先右击项目，点击“在 Blend 中设计”。

　　在“对象和时间线”中找到 "MyListView" ，右击。

　　在“编辑其他模板”中有 ItemTemplate，ItemContainerStyle，ItemsPanel 三个选项。ItemTemplate 用于数据绑定，数据绑定的模板一般是手写完成，用 Blend 也是可以创建数据绑定模板的。ItemContainerStyle 是容器的样式，说白了就是 ListView 中的 Item 的显示样式，像 Width，Background 等都可以在其中定制。ItemsPanel 是横向 ListView 的关键，ListView 的显示方向就在其中。下面是横向 ListView 的 ItemsPanel xaml代码。

        <!--横向布局--><ItemsPanelTemplate x:Key="HorizontalItemsPanelTemplate"><VirtualizingStackPanel Orientation="Horizontal"VerticalAlignment="Top"ScrollViewer.HorizontalScrollMode="Enabled"ScrollViewer.VerticalScrollMode="Disabled"/></ItemsPanelTemplate>

　　3. 所有代码

　　MainPage.xaml

<Pagex:Class="HorizontalListViewDemo.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:HorizontalListViewDemo"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:data="using:HorizontalListViewDemo.Model"mc:Ignorable="d"><Page.Resources><!--数据绑定模板--><DataTemplate x:Key="DataTemplate" x:DataType="data:Book"><StackPanel Margin="8"><Image Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Margin="0,0,0,5" Width="90" /><TextBlock Text="{x:Bind Title}" Foreground="White" HorizontalAlignment="Center" FontSize="16" /><TextBlock Text="{x:Bind Author}" Foreground="White" HorizontalAlignment="Center" FontSize="10" /></StackPanel></DataTemplate><!--容器模板--><Style x:Key="HorizontalItemContainerStyle" TargetType="ListViewItem"><Setter Property="MinWidth" Value="{StaticResource SplitViewCompactPaneThemeLength}"/><Setter Property="Padding" Value="0"/><Setter Property="UseSystemFocusVisuals" Value="True" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListViewItem"><ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"Control.IsTemplateFocusTarget="True"SelectionCheckMarkVisualEnabled="False"PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"SelectedBackground="Transparent"SelectedForeground="{ThemeResource SystemControlForegroundAccentBrush}"SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"SelectedPressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"HorizontalContentAlignment="Stretch"VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"ContentMargin="{TemplateBinding Padding}"/></ControlTemplate></Setter.Value></Setter></Style><!--横向布局--><ItemsPanelTemplate x:Key="HorizontalItemsPanelTemplate"><VirtualizingStackPanel Orientation="Horizontal"VerticalAlignment="Top"ScrollViewer.HorizontalScrollMode="Enabled"ScrollViewer.VerticalScrollMode="Disabled"/></ItemsPanelTemplate></Page.Resources><Grid Background="Black"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><!--标题--><StackPanel Margin="15,15,15,0"><TextBlock Text="Horizontal ListView Demo" FontSize="30" FontWeight="Bold"Foreground="White" /><TextBlock Text="横向 ListView" Foreground="White" /></StackPanel><ListView Name="MyListView" Grid.Row="1" SelectionMode="None" IsItemClickEnabled="True"HorizontalAlignment="Center"Margin="20" BorderThickness="1" BorderBrush="White"ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"ScrollViewer.VerticalScrollMode="Disabled"ItemsSource="{x:Bind Books}"ItemTemplate="{StaticResource DataTemplate}"ItemContainerStyle="{StaticResource HorizontalItemContainerStyle}"ItemsPanel="{StaticResource HorizontalItemsPanelTemplate}" /></Grid>
</Page>

　　MainPage.xaml.cs

using HorizontalListViewDemo.Model;
using System.Collections.Generic;
using Windows.UI.Xaml.Controls;namespace HorizontalListViewDemo
{public sealed partial class MainPage : Page{private List<Book> Books;public MainPage(){this.InitializeComponent();Books = BookManager.GetBooks();}}
}

　　Book.cs

using System.Collections.Generic;namespace HorizontalListViewDemo.Model
{public class Book{public int BookId { get; set; }public string Title { get; set; }public string Author { get; set; }public string CoverImage { get; set; }}public class BookManager{public static List<Book> GetBooks(){var books = new List<Book>{new Book { BookId = 1, Title = "Vulpate", Author = "Futurum", CoverImage = "Assets/1.png" },new Book { BookId = 2, Title = "Mazim", Author = "Sequiter Que", CoverImage = "Assets/2.png" },new Book { BookId = 3, Title = "Elit", Author = "Tempor", CoverImage = "Assets/3.png" },new Book { BookId = 4, Title = "Etiam", Author = "Option", CoverImage = "Assets/4.png" },new Book { BookId = 5, Title = "Feugait Eros Libex", Author = "Accumsan", CoverImage = "Assets/5.png" },new Book { BookId = 6, Title = "Nonummy Erat", Author = "Legunt Xaepius", CoverImage = "Assets/6.png" },new Book { BookId = 7, Title = "Nostrud", Author = "Eleifend", CoverImage = "Assets/7.png" },new Book { BookId = 8, Title = "Per Modo", Author = "Vero Tation", CoverImage = "Assets/8.png" },new Book { BookId = 9, Title = "Suscipit Ad", Author = "Jack Tibbles", CoverImage = "Assets/9.png" },new Book { BookId = 10, Title = "Decima", Author = "Tuffy Tibbles", CoverImage = "Assets/10.png" },new Book { BookId = 11, Title = "Erat", Author = "Volupat", CoverImage = "Assets/11.png" },new Book { BookId = 12, Title = "Consequat", Author = "Est Possim", CoverImage = "Assets/12.png" },new Book { BookId = 13, Title = "Aliquip", Author = "Magna", CoverImage = "Assets/13.png" }};return books;}}
}

　　效果图

张高兴的 UWP 开发笔记：横向 ListView相关推荐

张高兴的 UWP 开发笔记：汉堡菜单进阶
不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...
张高兴的 UWP 开发笔记：手机状态栏 StatusBar
UWP 有关应用标题栏 TitleBar 的文章比较多,但介绍 StatusBar 的却没几篇,在这里随便写写.状态栏 StatusBar 用法比较简单,花点心思稍微设计一下,对应用会是个很好的点缀. ...
张高兴的 UWP 开发笔记：定制 ContentDialog 样式
我需要一个背景透明的 ContentDialog,像下图一样.如何定制?写了一个简单的示例(https://github.com/ZhangGaoxing/uwp-demo/tree/master/C ...
张高兴的 Xamarin.Forms 开发笔记：为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )...
所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色 ...
张高兴的 Windows 10 IoT 开发笔记：BH1750FVI 光照度传感器
张高兴的 Windows 10 IoT 开发笔记:BH1750FVI 光照度传感器原文:张高兴的 Windows 10 IoT 开发笔记:BH1750FVI 光照度传感器 BH1750FVI 是一款 ...
张高兴的 Windows 10 IoT 开发笔记：RTC 时钟模块 DS3231
原文:张高兴的 Windows 10 IoT 开发笔记:RTC 时钟模块 DS3231 GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/ ...
【课程设计】UWP 开发入门小笔记（1）
UWP 开发入门小笔记(1) 零.介绍一.系列介绍[p1] 二.创建第一个属于自己的UWP应用[p2] (一)一个button的属性: (二)修改属性的三种方法 (三)字号(以后会细讲) 三.UWP ...
Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
本文内容: 1.横向ListView的所有实现思路; 2.其中一个最通用的思路HorizontalListView,并基于横向ListView开发一个简单的相册: 3.实现的横向ListView在点击 ...
iphone开发笔记和技巧总结
在iphone程序中实现截屏的一种方法: //导入头文件 #importQuartzCore/QuartzCore.h //将整个self.view大小的图层形式创建一张图片imageUIGrap ...

张高兴的 UWP 开发笔记：横向 ListView

张高兴的 UWP 开发笔记：横向 ListView相关推荐

最新文章

热门文章