Create Muti-Select Item ListView in Windows Store Apps Using XAML

In this article I will shows how to create a ListView that allows multiple items to be selected, in other words users can select more than one item, just like adding mulitple items to a shopping cart.

Here I use a ListView control and bind data to it. When the user selects the items it allows them to select more than one item at a time.

Here is the procedure to be followed.

Step 1

Create a Blank Windows Store App using XAML and C#.

Step 2

Here is the XAML markup of creating the Listview:

<Page

x:Class="MasterDetailViewUsingListView.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MasterDetailViewUsingListView"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid Height="500">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<ListView x:Name="ItemListView" Margin="0,0,0,8" Width="Auto" Height="Auto" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Left"

ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Multiple">

<ListView.ItemsPanel>

<ItemsPanelTemplate >

<StackPanel Margin="0,0,0,0" Width="Auto"/>

</ItemsPanelTemplate>

</ListView.ItemsPanel>

<ListView.ItemTemplate>

<DataTemplate>

<Grid HorizontalAlignment="Stretch" Width="Auto" Height="Auto" Margin="20,0,0,0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Border Margin="0,8,0,8" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center">

<Image Source="{Binding Image}" Margin="0" Stretch="Fill"/>

</Border>

<StackPanel Grid.Column="1" HorizontalAlignment="Left" Margin="10,8,0,0">

<TextBlock Text="{Binding Title}" FontSize="25" Width="400"/>

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

<StackPanel Orientation="Horizontal" Grid.Column="1">

<StackPanel Orientation="Horizontal" Margin="0,10,0,0">

<Button x:Name="AddToCart" Content="Add to cart" Click="AddToCart_Click"/>

</StackPanel>

<TextBlock x:Name="ShoppingCart" Text="" Width="300" FontSize="20" TextWrapping="Wrap" Margin="0,10,0,0"/>

</StackPanel>

</Grid>

</Grid>

</Page>

Step 3

For selecting multiple items, set the selectionMode property to Multiple, as in:

SelectionMode="Multiple"

Step 4

In this article I use custom classes to create the data source. The following is the code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

namespace MasterDetailViewUsingListView

{

public class ItemDetails

{

public ItemDetails()

{

Item item;

Uri _baseUri = new Uri("ms-appx:///");

item = new Item();

item.Title = "Acer Aspire S3-391 Laptop";

item.Price = "Rs. 66,754";

item.SetImage(_baseUri, "Images/1.jpg");

item.Content = "Core i7 (3G), 13.3 Inch4, GB RAM, 500 GB HD, Win 7";

item = new Item();

item.Title = "Acer Aspire S3 Aspire S Laptop";

item.Price = "Rs. 54,500";

item.SetImage(_baseUri, "Images/2.jpg");