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

<Page
x: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 = , Title = "Vulpate", Author = "Futurum", CoverImage = "Assets/1.png" },
new Book { BookId = , Title = "Mazim", Author = "Sequiter Que", CoverImage = "Assets/2.png" },
new Book { BookId = , Title = "Elit", Author = "Tempor", CoverImage = "Assets/3.png" },
new Book { BookId = , Title = "Etiam", Author = "Option", CoverImage = "Assets/4.png" },
new Book { BookId = , Title = "Feugait Eros Libex", Author = "Accumsan", CoverImage = "Assets/5.png" },
new Book { BookId = , Title = "Nonummy Erat", Author = "Legunt Xaepius", CoverImage = "Assets/6.png" },
new Book { BookId = , Title = "Nostrud", Author = "Eleifend", CoverImage = "Assets/7.png" },
new Book { BookId = , Title = "Per Modo", Author = "Vero Tation", CoverImage = "Assets/8.png" },
new Book { BookId = , Title = "Suscipit Ad", Author = "Jack Tibbles", CoverImage = "Assets/9.png" },
new Book { BookId = , Title = "Decima", Author = "Tuffy Tibbles", CoverImage = "Assets/10.png" },
new Book { BookId = , Title = "Erat", Author = "Volupat", CoverImage = "Assets/11.png" },
new Book { BookId = , Title = "Consequat", Author = "Est Possim", CoverImage = "Assets/12.png" },
new Book { BookId = , Title = "Aliquip", Author = "Magna", CoverImage = "Assets/13.png" }
}; return books;
}
}
}

  效果图

张高兴的 UWP 开发笔记:横向 ListView的更多相关文章

  1. 张高兴的 UWP 开发笔记:用 Thumb 控件仿制一个可拖动 Button

    在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧. 关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了.下面 ...

  2. 张高兴的 UWP 开发笔记:汉堡菜单进阶

    不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...

  3. 张高兴的 UWP 开发笔记:应用内启动应用 (UWP Launch UWP)

    需求:在 A 应用内启动 B 应用,如果 B 应用未安装则跳转应用商店搜索. 启动方式使用 Uri 启动,本文使用尽可能简单,并且能拿来直接用的代码.不涉及启动后的应用数据交互,如需深入了解,请戳 M ...

  4. 张高兴的 UWP 开发笔记:手机状态栏 StatusBar

    UWP 有关应用标题栏 TitleBar 的文章比较多,但介绍 StatusBar 的却没几篇,在这里随便写写.状态栏 StatusBar 用法比较简单,花点心思稍微设计一下,对应用会是个很好的点缀. ...

  5. 张高兴的 UWP 开发笔记:定制 ContentDialog 样式

    我需要一个背景透明的 ContentDialog,像下图一样.如何定制?写了一个简单的示例(https://github.com/ZhangGaoxing/uwp-demo/tree/master/C ...

  6. UWP开发笔记——嵌套式页面的实现

    绪论 UWP开发中,Page是最常用的Control之一,通常情况下,在开发的application中,每一个页面就是一个Page.有时候,为了开发整合度更高,UI表现更为一致的UI,开发者需要把UI ...

  7. 张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

    所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色 ...

  8. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

  9. UWP开发入门(十)——通过继承来扩展ListView

    本篇之所以起这样一个名字,是因为重点并非如何自定义控件,不涉及创建CustomControl和UserControl使用的Template和XAML概念.而是通过继承的方法来扩展一个现有的类,在继承的 ...

随机推荐

  1. 故障重现(内存篇2),JAVA内存不足导致频繁回收和swap引起的性能问题

    背景起因: 记起以前的另一次也是关于内存的调优分享下   有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...

  2. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  3. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  4. XSS分析及预防

    XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行.在WEB前端应用日益发展的今天,XSS漏洞尤其容易被开发人员忽视,最终可能造成对个人信息 ...

  5. sql的那些事(一)

    一.概述 书写sql是我们程序猿在开发中必不可少的技能,优秀的sql语句,执行起来吊炸天,性能杠杠的.差劲的sql,不仅使查询效率降低,维护起来也十分不便.一切都是为了性能,一切都是为了业务,你觉得你 ...

  6. [原创]关于Hibernate中的级联操作以及懒加载

    Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...

  7. Java类访问权限修饰符

    一.概要 通过了解Java4种修饰符访问权限,能够进一步完善程序类,合理规划权限的范围,这样才能减少漏洞.提高安全性.具备表达力便于使用. 二.权限表 修饰符 同一个类 同一个包 不同包的子类 不同包 ...

  8. TFS2013 设置签出独占锁

    转载自: http://www.cnblogs.com/zhang888/p/4280251.html

  9. MySQL+Amoeba实现数据库主从复制和读写分离

    MySQL读写分离是在主从复制的基础上进一步通过在master上执行写操作,在slave上执行读操作来实现的.通过主从复制,master上的数据改动能够同步到slave上,从而保持了数据的一致性.实现 ...

  10. 烂泥:wiki系统confluence5.6.6安装、中文、破解及迁移

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它 ...