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. less学习

    // 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...

  2. GreenDao 数据库:使用Raw文件夹下的数据库文件以及数据库升级

    一.使用Raw文件夹下的数据库文件 在使用GreenDao框架时,数据库和数据表都是根据生成的框架代码来自动创建的,从生成的DaoMaster中的OpenHelper类可以看出: public sta ...

  3. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  4. Chrome出了个小bug:论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  5. 《Django By Example》第三章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...

  6. 如何利用tcpdump对mysql进行抓包操作

    命令如下: tcpdump -s -l -w - dst -i eno16777736 |strings 其中-i指定监听的网络接口,在RHEL 7下,网络接口名不再是之前的eth0,而是 eno16 ...

  7. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  8. Atitit.软件开发的三层结构isv金字塔模型

    Atitit.软件开发的三层结构isv金字塔模型 第一层,Implements 层,着重与功能的实现.. 第二次,spec层,理论层,设计规范,接口,等.流程.方法论 顶层,val层,价值观层,原则, ...

  9. 项目游戏开发日记 No.0x00000

    14软二杨近星(2014551622) ---恢复内容开始--- 2016-03-17 从开始迈进软件工程专业, 已经快两年了, 记得当初选择软件的理由是, 我要学去做东西, 我享受开发过程. 两年来 ...

  10. [转]Java常用工具类集合

    转自:http://blog.csdn.net/justdb/article/details/8653166 数据库连接工具类——仅仅获得连接对象 ConnDB.java package com.ut ...