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

简介:   ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办?   Blend for Visual Studio 现在就派上用场了。

  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 = 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;
        }
    }
}

  效果图

 

目录
相关文章
|
C#
WPF 左键单击弹出菜单 ContextMenu
原文:WPF 左键单击弹出菜单 ContextMenu WPF中的ContextMenu在XAML中可直接做出来,但是仅限于右键弹出菜单,如果需要添加左键弹出功能,只需要在事件中添加Click事件 XMAL代码如下 ...
3098 0
|
12月前
|
安全 调度 C#
STA模型、同步上下文和多线程、异步调度
【10月更文挑战第19天】本文介绍了 STA 模型、同步上下文和多线程、异步调度的概念及其优缺点。STA 模型适用于单线程环境,确保资源访问的顺序性;同步上下文和多线程提高了程序的并发性和响应性,但增加了复杂性;异步调度提升了程序的响应性和资源利用率,但也带来了编程复杂性和错误处理的挑战。选择合适的模型需根据具体应用场景和需求进行权衡。
270 0
|
C#
蓝易云 - C#将异步改成同步方法
注意:虽然这样可以将异步方法转为同步,但在实际开发中,我们通常推荐使用异步方法,因为它可以提高应用程序的响应性和并发性。将异步方法转为同步可能会导致死锁或性能问题。
181 2
|
前端开发 小程序 Java
【规范】SpringBoot接口返回结果及异常统一处理,这样封装才优雅
本文详细介绍了如何在SpringBoot项目中统一处理接口返回结果及全局异常。首先,通过封装`ResponseResult`类,实现了接口返回结果的规范化,包括状态码、状态信息、返回信息和数据等字段,提供了多种成功和失败的返回方法。其次,利用`@RestControllerAdvice`和`@ExceptionHandler`注解配置全局异常处理,捕获并友好地处理各种异常信息。
5709 0
【规范】SpringBoot接口返回结果及异常统一处理,这样封装才优雅
|
SQL XML Java
MyBatis-Plus联表查询(Mybatis-Plus-Join)
MyBatis-Plus联表查询(Mybatis-Plus-Join)
MyBatis-Plus联表查询(Mybatis-Plus-Join)
|
设计模式 前端开发 Java
六种方式,教你在SpringBoot初始化时搞点事情!
六种方式,教你在SpringBoot初始化时搞点事情!
|
关系型数据库 MySQL 数据库
MySQL 和 PostgreSQL,我到底选择哪个?
MySQL 和 PostgreSQL,我到底选择哪个?
15298 0
|
SQL Java 数据库连接
七十三、Spring与DAO操作 update()
七十三、Spring与DAO操作 update()
七十三、Spring与DAO操作 update()
|
XML Android开发 数据格式
Android 横向ListView实现
Android 横向ListView实现
Android 横向ListView实现