Zhang happy UWP Development Notes: horizontal ListView, uwplistview

Zhang happy UWP Development Notes: horizontal ListView, uwplistview

The default Orientation of ListView is Vertical (Orientation = "Vertical"), but what if we want to display the ListView horizontally?

　　Blend for Visual StudioNow it is useful. Other widgets can also use Blend to customize your own UI styles.

 

The following is a new project "HorizontalListViewDemo" to demonstrate horizontal ListView, the solution structure is as follows :( GitHub: https://github.com/ZhangGaoxing/uwp-demo/tree/master/HorizontalListViewDemo)

Since it's just a demo project, ListView's bind data material is derived from Bob Tabor's UWP getting started Development Video https://mva.microsoft.com/zh-cn/training-courses/-windows-10--14541.

 

Project Analysis

1. MainPage Structure

MainPage consists of two parts: one title and one ListView.

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

 

2. Use Blend to customize styles

Right-click the project and click "design in Blend ".

Find "MyListView" in "object and timeline" and Right-click.

There are three options in "edit other templates": ItemTemplate, ItemContainerStyle, and ItemsPanel.ItemTemplateFor data binding, Data Binding templates are generally hand-written, and Blend templates can also be created.ItemContainerStyleIs the container style. To put it bluntly, it is the display style of items in ListView, such as Width and Background, which can be customized.ItemsPanelIt is the key to horizontal ListView, and the display direction of ListView is in it. The following is the ItemsPanel xaml code of the horizontal ListView.

<! -- Horizontal layout --> <ItemsPanelTemplate x: Key = "HorizontalItemsPanelTemplate"> <canonicalizingstackpanel Orientation = "Horizontal" verticalignment = "Top" ScrollViewer. horizontalScrollMode = "Enabled" ScrollViewer. verticalScrollMode = "Disabled"/> </ItemsPanelTemplate>

 

3. All code

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> <! -- Data Binding template --> <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> <! -- Container template --> <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 = "{Templ AteBinding ContentTransitions} "Control. success = "True" Success = "False" PointerOverBackground = "{ThemeResource succeeded}" Success = "{ThemeResource succeeded}" SelectedBackground = "Transparent" SelectedForeground = "{ThemeResource succeeded}" failed = "{Theme Resource Identifier} "PressedBackground =" {ThemeResource identifier} "identifier =" {ThemeResource identifier} "DisabledOpacity =" {ThemeResource identifier} "identifier =" Stretch "encoding =" {TemplateBinding entity} "ContentMargin =" {Template Binding Padding} "/> </ControlTemplate> </Setter. Value> </Setter> </Style> <! -- Horizontal layout --> <ItemsPanelTemplate x: Key = "HorizontalItemsPanelTemplate"> <canonicalizingstackpanel Orientation = "Horizontal" verticalignment = "Top" ScrollViewer. horizontalScrollMode = "Enabled" ScrollViewer. verticalScrollMode = "Disabled"/> </ItemsPanelTemplate> </Page. resources> <Grid Background = "Black"> <Grid. rowDefinitions> <RowDefinition Height = "Auto"/> <RowDefinition Height = "*"/> </Grid. rowDefinitions> <! -- Title --> <StackPanel Margin = "15, 15, 15, 0 "> <TextBlock Text =" Horizontal ListView Demo "FontSize =" 30 "FontWeight =" Bold "Foreground =" White "/> <TextBlock Text =" Horizontal 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 details} "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;        }    }}