未加星标

Slideable ListItem Control Using Images In UWP

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Before reading this article, please go through the following articles.

Introduction To Universal windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015 How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

SlideableListItem control is a ContentControl, which provides the functionality for sliding left or right to expose functions. This effect can be forced to ignore the mouse, if only touch screen interaction is desired. This control can be used as a ListView Data Template root to create effects similar to those common in mobile Email apps like Outlook.

After reading this article, you will learn how to use UWP Tool Kit Control SlideableListItem in Universal Windows apps development with XAML and Visual C#.

The important tools, given below are required to develop UWP-

Windows 10 (Recommended). Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss step by step App development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPSlideableListItem)->OK.


Slideable ListItem Control Using Images In UWP

Step 2

Choose target and minimum platform version for your Windows, that Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.
Slideable ListItem Control Using Images In UWP

For adding UWPToolKit Control, please refer

How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3

Add TextBlock control, change the name and text property for the title.


Slideable ListItem Control Using Images In UWP

Step 4

Add XAML code, given below to create the data template for SlideableListItem control. <Page.Resources> <DataTemplatex:Key="ImageItemTemplate"> </DataTemplate> </Page.Resources>
Slideable ListItem Control Using Images In UWP

Step 5

Add UWP Tool Kit Name Space in Mainpage.xaml.

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add SlideableListItem control from UWP Tool Kit and change the name property.


Slideable ListItem Control Using Images In UWP

Step 6

Add the images in the Assets folder, images for SlideableListItem.


Slideable ListItem Control Using Images In UWP

Step 7

Add XAML code, given below to create the data template for SlideableListItem control.

<my:SlidableListItemx:Name="SLIItemtest"LeftIcon="Camera"> <GridBackground="White"> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="50"/> <ColumnDefinitionWidth="*"/></Grid.ColumnDefinitions> <GridGrid.Column="0"Background="Cyan"x:Name="Checkmark"> <SymbolIconSymbol="Pictures"Foreground="White"/></Grid> <ImageGrid.Column="1"Source="{BindingIName}"Stretch="None"></Image> </Grid> </my:SlidableListItem>
Slideable ListItem Control Using Images In UWP

">

Step 8

Add List View control to list the images in SlideableListItem.


Slideable ListItem Control Using Images In UWP

Note

Automatically, the code, given below will be generated in XAML code view, while we are finished in the design view.

<Pagexmlns:my="using:Microsoft.Toolkit.Uwp.UI.Controls"x:Class="UWPSlideListItem.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:UWPSlideListItem"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"> <Page.Resources> <DataTemplatex:Key="ImageItemTemplate"> <my:SlidableListItemx:Name="SLIItemtest"LeftIcon="Camera"> <GridBackground="White"> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="50"/> <ColumnDefinitionWidth="*"/></Grid.ColumnDefinitions> <GridGrid.Column="0"Background="Cyan"x:Name="Checkmark"> <SymbolIconSymbol="Pictures"Foreground="White"/></Grid> <ImageGrid.Column="1"Source="{BindingIName}"Stretch="None"></Image> </Grid> </my:SlidableListItem> </DataTemplate> </Page.Resources> <GridBackground="{ThemeResourceApplicationPageBackgroundThemeBrush}"> <TextBlockx:Name="tblTitle"HorizontalAlignment="Left"Margin="232,25,0,0"TextWrapping="Wrap"Text="SlidableListItemTest"VerticalAlignment="Top"FontWeight="Bold"FontSize="20"Width="226"/> <ListViewx:Name="lvSLI"SelectionMode="None"IsItemClickEnabled="False"HorizontalAlignment="Center"ItemsSource="{x:BindIitem,Mode=OneWay}"ItemTemplate="{StaticResourceImageItemTemplate}"Margin="159,81,98,34"Width="383"> <ListView.ItemContainerStyle> <StyleTargetType="ListViewItem"> <SetterProperty="HorizontalContentAlignment"Value="Stretch"/><SetterProperty="Margin"Value="0,1"/> </Style> </ListView.ItemContainerStyle> </ListView> </Grid> </Page>

Step 9

Add the namespace and the code, given below in MainPage.xaml.cs

usingSystem.Collections.ObjectModel; publicclassMenuItem{ publicstringIName{ get; set; } } publicsealedpartialclassMainPage:Page{ privatereadonlyObservableCollection<MenuItem>Iitem; publicMainPage(){ this.InitializeComponent(); ObservableCollection<MenuItem>items=newObservableCollection<MenuItem>(); for(inti=0;i<25;i++){ items.Add(newMenuItem(){ IName="ms-appx:///Assets//img.jpg" }); } Iitem=items; } } }
Slideable ListItem Control Using Images In UWP

Step 10

Deploy your app in the local machine and the output of UWPSlideableListItem app is given below.


Slideable ListItem Control Using Images In UWP

Left SlideableListItem output is given below.

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: WindowsC#UWVisual StudioVisual Studi
分页:12
转载请注明
本文标题:Slideable ListItem Control Using Images In UWP
本站链接:http://www.codesec.net/view/482506.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(27)