未加星标

Creating Bottom Up List In UWP With XAML And C#

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

Before reading this article, please go through the article, whose link is given below-

Introduction To Universal windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

When a new item is added in the list view, it's added at the end of the item and then the KeepLastItemInView scroll mode will scroll the new last item into view. This concept is mainly used for chat Applications.

After reading this article, you will learn how to create Bottom up List, using ItemstackPanel in List View Control and UWP with XAML and Visual C#. Also, we are adding new items in the bottom(end) and deleting the selected item in the list.

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

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 (UWPBtmUPLV) ->OK.


Creating Bottom Up List In UWP With XAML And C#

Step 2- Choose the Target and minimum platform version for your Windows Universal Application will support it. Afterwards, the project creates App.xaml and MainPage.xaml.


Creating Bottom Up List In UWP With XAML And C#

Step 3- Open (double click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML controls and drag the required control to the middle of the design canvas.

After dragging and dropping, in the TextBlock control, you have to change the name and text property for the title.


Creating Bottom Up List In UWP With XAML And C#

Add the Scroll viewer control.


Creating Bottom Up List In UWP With XAML And C#

Add the stack panel inside the Scroll viewer.


Creating Bottom Up List In UWP With XAML And C#

After dragging and dropping, the ListView control is there and inside it is the stack panel. Change the Name, BorderThickness and BorderBrush property.


Creating Bottom Up List In UWP With XAML And C#

Step 4- Add the code for ItemPanelTemplate, given below-

<ListView.ItemsPanel> <ItemsPanelTemplate> <ItemsStackPanelItemsUpdatingScrollMode="KeepLastItemInView"VerticalAlignment="Bottom"/> </ItemsPanelTemplate> </ListView.ItemsPanel>
Creating Bottom Up List In UWP With XAML And C#

">

- Add a button to add items in a ListView.
Creating Bottom Up List In UWP With XAML And C#

">

Add a button to delete the items in a ListView.


Creating Bottom Up List In UWP With XAML And C#

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

<Pagex:Class="UWPBtmUpLV.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:UWPBtmUpLV"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"> <GridBackground="{ThemeResourceApplicationPageBackgroundThemeBrush}"> <TextBlockx:Name="tblTitle"HorizontalAlignment="Left"Margin="184,47,0,0"TextWrapping="Wrap"Text="BottomUpListViewinUWP"VerticalAlignment="Top"FontWeight="Bold"FontSize="20"RenderTransformOrigin="0.577,0.531"/> <ScrollViewerHorizontalAlignment="Left"Height="192"Margin="244,96,0,0"VerticalAlignment="Top"Width="168"> <StackPanelHeight="163"Width="142"> <ListViewx:Name="LBBottomlist"Height="161"BorderThickness="2"BorderBrush="Black"> <ListView.ItemsPanel> <ItemsPanelTemplate> <ItemsStackPanelItemsUpdatingScrollMode="KeepLastItemInView"VerticalAlignment="Bottom"/> </ItemsPanelTemplate> </ListView.ItemsPanel> </ListView> </StackPanel> </ScrollViewer> <Buttonx:Name="btnadd"Content="AddItem"Click="{x:BindAdditem}"HorizontalAlignment="Left"Margin="136,176,0,0"VerticalAlignment="Top"/> <Buttonx:Name="btnDelete"Content="DeleteItem"Click="{x:BindDelitem}"HorizontalAlignment="Left"Margin="467,176,0,0"VerticalAlignment="Top"/> </Grid> </Page>

Step 6- Add the code, given below in Mainpage.xaml.cs

intitemno; publicMainPage() { this.InitializeComponent(); Additem(); } privatevoidAdditem() { LBBottomlist.Items.Add("Item"+(++itemno)); } privatevoidDelitem() { intselectedIndex=LBBottomlist.SelectedIndex; LBBottomlist.Items.Remove(LBBottomlist.SelectedItem); if(selectedIndex<LBBottomlist.Items.Count) { LBBottomlist.SelectedIndex=selectedIndex; } }
Creating Bottom Up List In UWP With XAML And C#
Step 7 - Deploy of your app in Local Machine and output of the UWPBtmUPLV app is given below-
Creating Bottom Up List In UWP With XAML And C#

Afterwards, click the Add Item.


Creating Bottom Up List In UWP With XAML And C#

Select the item for delete


Creating Bottom Up List In UWP With XAML And C#

Afterwards, click Delete item.


Creating Bottom Up List In UWP With XAML And C#
Summary

- Now, you have successfully created and tested your Bottom up List, using ItemstackPanel in List View Control in Visual C# - UWP environment.

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

主题: C#WindowsVisual StudioVisual StudiUWLV
分页:12
转载请注明
本文标题:Creating Bottom Up List In UWP With XAML And C#
本站链接:http://www.codesec.net/view/484856.html
分享请点击:


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