Slideable ListItem Control Using Images In UWP

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

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. 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-

1. Windows 10 (Recommended).
2. 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.



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.



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.



Step 4

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

<Page.Resources>
   <DataTemplate x:Key="ImageItemTemplate">
   </DataTemplate>
</Page.Resources>

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.



Step 6 

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



Step 7 

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

<my:SlidableListItem x:Name="SLIItemtest" LeftIcon="Camera">
    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="Cyan" x:Name="Checkmark">
            <SymbolIcon Symbol="Pictures" Foreground="White" /> </Grid>
        <Image Grid.Column="1" Source="{Binding IName}" Stretch="None"></Image>
    </Grid>
</my:SlidableListItem>

">

Step 8 

Add List View control to list the images in SlideableListItem.



Note 

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

<Page xmlns: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>
        <DataTemplate x:Key="ImageItemTemplate">
            <my:SlidableListItem x:Name="SLIItemtest" LeftIcon="Camera">
                <Grid Background="White">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0" Background="Cyan" x:Name="Checkmark">
                        <SymbolIcon Symbol="Pictures" Foreground="White" /> </Grid>
                    <Image Grid.Column="1" Source="{Binding IName}" Stretch="None"></Image>
                </Grid>
            </my:SlidableListItem>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="232,25,0,0" TextWrapping="Wrap" Text="Slidable List Item Test" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" Width="226" />
        <ListView x:Name="lvSLI" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Center" ItemsSource="{x:Bind Iitem, Mode=OneWay}" ItemTemplate="{StaticResource ImageItemTemplate}" Margin="159,81,98,34" Width="383">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/><Setter Property="Margin" Value="0,1"/>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>
</Page>

Step 9 

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

using System.Collections.ObjectModel;
public class MenuItem {
    public string IName {
        get;
        set;
    }
}
public sealed partial class MainPage: Page {
    private readonly ObservableCollection < MenuItem > Iitem;
    public MainPage() {
        this.InitializeComponent();
        ObservableCollection < MenuItem > items = new ObservableCollection < MenuItem > ();
        for (int i = 0; i < 25; i++) {
            items.Add(new MenuItem() {
                IName = "ms-appx:///Assets//img.jpg"
            });
        }
        Iitem = items;
    }
}
}

Step 10 

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



Left SlideableListItem output is given below.



Right SlideableListItem output is given below.



Summary

Now, you have successfully tested UWP Tool Kit – SlideableListItem control in Visual C# - UWP environment.