Reader Level:
Articles

Create Master-Detail View in Windows Store Apps Using XAML

By Gaurav Gupta on November 08, 2012
In this article we are going to learn how to customize the ListView Control to create Master-Detail in Windows Store Apps.
  • 0
  • 0
  • 7249

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.

ListView-items-in-win-windows-store-apps.jpg

Select another item from the Master View via ListView. You will see the details of the selected item in the right side pane.

Master-Details-View-in-listview.jpg

Gaurav Gupta

I am a student and Developer. I like to explore new technologies, mostly working on web development.

COMMENT USING

Trending up