This article is about the ListView control in Window Store Apps using XAML. In this article I will show you how to customize the ListView control to create a master/details view.
The master/details view is just a scenario which has two panes, one pane displays the master information and the pane on the right side shows the details for the items selected from the left pane.
In this article I use a ListView control to show the master/details view in a Windows Store App using XAML and C#.
Procedure
Step 1
Create a Blank Windows Store Application in XAML.
Step 2
Here I create two custom classes that is used to bind the data to the ListView.
using System;
using System.Collections.Generic;
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");
item.Content = "Core i5 (2G), 13.3 Inch, 4 GB RAM, 320 GB HD, Win 7";
Collection.Add(item);
item = new Item();
item.Title = "Acer Aspire One 725 Laptop";
item.Price = "Rs. 19,499";
item.SetImage(_baseUri, "Images/3.jpg");
item.Content = "AMD APU Dual Core, 11.6 Inch, 2 GB RAM, 320 GB HD, Win 7";
Collection.Add(item);
item = new Item();
item.Title = "Acer Aspire One AOD 270 NU.SGASI.003 Netbook";
item.Price = "Rs. 16,560";
item.SetImage(_baseUri, "Images/4.jpg");
item.Content = "Atom Dual Core (2G), 10.1 Inch, 2 GB RAM, 320 GB HD, Linux";
Collection.Add(item);
item = new Item();
item.Title = "Acer Aspire V3-571G Laptop";
item.Price = "Rs. 38,455";
item.SetImage(_baseUri, "Images/6.jpg");
item.Content = "Core i3 (2G), 15.6 Inch, 4 GB RAM, 500 GB HD, Win 7";
Collection.Add(item);
}
List<Item> collection = new List<Item>();
public List<Item> Collection
{
get
{
return this.collection;
}
}
}
}
public class Item
{
private string _Title;
public string Title
{
get
{
return this._Title;
}
set
{
this._Title = value;
}
}
private string _Price;
public string Price
{
get
{
return this._Price;
}
set
{
this._Price = value;
}
}
private ImageSource _Image;
public ImageSource Image
{
get
{
return this._Image;
}
set
{
this._Image = value;
}
}
public void SetImage(Uri baseUri, String path)
{
Image = new BitmapImage(new Uri(baseUri, path));
}
private string _Link;
public string Link
{
get
{
return this._Link;
}
set
{
this._Link = value;
}
}
private string _Category;
public string Category
{
get
{
return this._Category;
}
set
{
this._Category = value;
}
}
private string _Description;
public string Description
{
get
{
return this._Description;
}
set
{
this._Description = value;
}
}
private string _Content;
public string Content
{
get
{
return this._Content;
}
set
{
this._Content = value;
}
}
}
Step 3
Here is the UI design for the XAML page.
Create a ListView for the Master-List view.
<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">
<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>
This section specifies the details view that shows the details item related to the selection on the master list.
<!--DETAILS VIEW-->
<!-- This section shows the details item related to the selection on the master list. -->
<ScrollViewer x:Name="DetailView" Margin="0,0,0,0" Grid.RowSpan="2" Grid.Column="1" RenderTransformOrigin="0.5,0.5" VerticalScrollBarVisibility="Auto">
<ScrollViewer.RenderTransform>
<CompositeTransform/>
</ScrollViewer.RenderTransform>
<StackPanel x:Name="ContentPanelDetail" HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10,0,0,0" DataContext="{Binding SelectedItem, ElementName=ItemListView}">
<StackPanel x:Name="HeaderElements" Orientation="Horizontal">
<StackPanel x:Name="HeaderStackPanel" Orientation="Vertical" VerticalAlignment="Center" Width="500" Hori
zontalAlignment="Left" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" MaxHeight="80" FontSize="30" HorizontalAlignment="Left" Margin="0" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Price}" FontSize="25" HorizontalAlignment="Left" VerticalAlignment="Top" TextTrimming="WordEllipsis" Margin="0"/>
</StackPanel>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="DetailTextBlock" FontSize="35" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,18,40,0" Width="500" Height="Auto" TextWrapping="Wrap"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
Step 4
Now, at last give the ItemSource to the ListView collection:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
ItemDetails messageData = new ItemDetails();
ItemListView.ItemsSource = messageData.Collection;
ItemListView.SelectedIndex = 0;
}
Output
Here is your output of the master/details view using ListView.
Select another item from the Master View via ListView. You will see the details of the selected item in the right side pane.
Join the conversation! Your thoughts help the community grow.