MasterDetailPageContent Class

Allows you to implement the Master-Detail Pattern.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#
VB.NET

[TemplatePart(Name = "PART_ContentPresenter", Type = typeof(ContentPresenter))]
[TemplatePart(Name = "PART_ExtendedTouchArea", Type = typeof(MasterDetailPageContentSplitter))]
[TemplatePart(Name = "PART_MasterBorder", Type = typeof(Border))]
[TemplatePart(Name = "PART_RootGrid", Type = typeof(Grid))]
[TemplatePart(Name = "PART_Splitter", Type = typeof(MasterDetailPageContentSplitter))]
[TemplatePart(Name = "PART_SplittersContainer", Type = typeof(FrameworkElement))]
[ToolboxTabName("DX.21.2: Navigation & Layout")]
public class MasterDetailPageContent :
    ContentControl,
    INestedGoBackListener

<TemplatePart(Name:="PART_RootGrid", Type:=GetType(Grid))>
<TemplatePart(Name:="PART_ContentPresenter", Type:=GetType(ContentPresenter))>
<TemplatePart(Name:="PART_MasterBorder", Type:=GetType(Border))>
<TemplatePart(Name:="PART_Splitter", Type:=GetType(MasterDetailPageContentSplitter))>
<TemplatePart(Name:="PART_ExtendedTouchArea", Type:=GetType(MasterDetailPageContentSplitter))>
<TemplatePart(Name:="PART_SplittersContainer", Type:=GetType(FrameworkElement))>
<ToolboxTabName("DX.21.2: Navigation & Layout")>
Public Class MasterDetailPageContent
    Inherits ContentControl
    Implements INestedGoBackListener

Remarks

This example illustrates how to create a basic application that uses the Master-Detail Pattern based on the MVVM design pattern.

XAML

<Page xmlns:Layout="using:DevExpress.UI.Xaml.Layout" 
    x:Class="Master_Detail_Pattern_MVVM.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Master_Detail_Pattern_MVVM"
    xmlns:mvvmui="using:DevExpress.Mvvm.UI"
    xmlns:Interactivity="using:DevExpress.Mvvm.UI.Interactivity"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:ViewModel />
    </Page.DataContext>
    <Layout:MasterDetailPageContent Name="MasterDetailPageContent"
                                    EnableSplitter="True"
                                    ThresholdMode="Content" StackedStateThreshold="400" >
        <Layout:MasterDetailPageContent.MasterPane>
            <ListView ItemsSource="{Binding Source}"
                      IsItemClickEnabled="True"
                      SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}"
                      >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding FirstName}" Grid.Column="1" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
                            <TextBlock Text="{Binding LastName}" Grid.Column="1" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <Interactivity:Interaction.Behaviors>
                    <mvvmui:EventToCommand EventName="ItemClick" Command="{Binding ElementName=MasterDetailPageContent, Path=ShowContentPaneCommand}" />
                </Interactivity:Interaction.Behaviors>
            </ListView>
        </Layout:MasterDetailPageContent.MasterPane>
        <Grid Padding="10,10,10,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Text="Country: " FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="{Binding SelectedEmployee.Country, Mode=TwoWay}" Grid.Column="1" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="City: " Grid.Row="1" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="{Binding SelectedEmployee.City, Mode=TwoWay}" Grid.Column="1" Grid.Row="1" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="Address: " Grid.Row="2" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="{Binding SelectedEmployee.Address, Mode=TwoWay}" Grid.Column="1" Grid.Row="2" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="Job Title: " Grid.Row="3" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="{Binding SelectedEmployee.JobTitle, Mode=TwoWay}" Grid.Column="1" Grid.Row="3" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="Phone: " Grid.Row="4" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
            <TextBlock Text="{Binding SelectedEmployee.Phone, Mode=TwoWay}" Grid.Column="1" Grid.Row="4" FontSize="18" Margin="10,10,0,0" FontFamily="Segoe UI" />
        </Grid>
    </Layout:MasterDetailPageContent>
</Page>

C#
VB.NET

using DevExpress.Mvvm;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;

namespace Master_Detail_Pattern_MVVM {
    public class ViewModel : ViewModelBase {
        public List<Employee> Source {
            get { return GetProperty<List<Employee>>(); }
            set { SetProperty(value); }
        }
        public Employee SelectedEmployee {
            get { return GetProperty<Employee>(); }
            set { SetProperty(value); }
        }

        public ViewModel() {
            Source = EmployeeData.DataSource;
            SelectedEmployee = Source[0];
        }
    }
    public class Employee {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public string Address { get; set; }
        public string JobTitle { get; set; }
        public string Phone { get; set; }
    }
    public class EmployeeData : List<Employee> {
        public static List<Employee> DataSource {
            get {
                List<Employee> list = new List<Employee>();
                list.Add(new Employee() {
                    FirstName = "Nathan",
                    LastName = "White",
                    Country = "Spain",
                    City = "Madrid",
                    Address = "90 7th Street",
                    JobTitle = "Sales Manager",
                    Phone = "(417) 166-3268"
                });
                list.Add(new Employee() {
                    FirstName = "Sandra",
                    LastName = "Oldman",
                    Country = "United States",
                    City = "LA",
                    Address = "3687 Mohawk Street",
                    JobTitle = "Marketing Manager",
                    Phone = "(918) 161-3649"
                });
                list.Add(new Employee() {
                    FirstName = "Andrea",
                    LastName = "Deville",
                    Country = "United Kingdom",
                    City = "London",
                    Address = "14 Garrett Hill",
                    JobTitle = "Accountant",
                    Phone = "(303) 718-1654"
                });
                list.Add(new Employee() {
                    FirstName = "George",
                    LastName = "Holloway",
                    Country = "Canada",
                    City = "Ottawa",
                    Address = "23 Tsawassen Blvd.",
                    JobTitle = "Accounts Manager",
                    Phone = "(720) 971-3927"
                });
                list.Add(new Employee() {
                    FirstName = "Barbara",
                    LastName = "Chinavare",
                    Country = "Hungary",
                    City = "Budapest",
                    Address = "6688 Alhambra Ave",
                    JobTitle = "Tool Designer",
                    Phone = "(360) 186-4982"
                });
                return list;
            }
        }
    }
}

Imports DevExpress.Mvvm
Imports System
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports Windows.UI.Xaml.Controls
Public Class ViewModel
    Inherits ViewModelBase

    Public Property Source() As List(Of Employee)
        Get
            Return GetProperty(Of List(Of Employee))()
        End Get
        Set(ByVal value As List(Of Employee))
            SetProperty(value)
        End Set
    End Property
    Public Property SelectedEmployee() As Employee
        Get
            Return GetProperty(Of Employee)()
        End Get
        Set(ByVal value As Employee)
            SetProperty(value)
        End Set
    End Property
    Public Sub New()
        Source = EmployeeData.DataSource
        SelectedEmployee = Source(0)
    End Sub
End Class
Public Class Employee
    Public Property FirstName() As String
    Public Property LastName() As String
    Public Property Country() As String
    Public Property City() As String
    Public Property Address() As String
    Public Property JobTitle() As String
    Public Property Phone() As String
End Class
Public Class EmployeeData
    Inherits List(Of Employee)

    Public Shared ReadOnly Property DataSource() As List(Of Employee)
        Get
            Dim list As New List(Of Employee)()
            list.Add(New Employee() With {
                    .FirstName = "Nathan",
                    .LastName = "White",
                    .Country = "Spain",
                    .City = "Madrid",
                    .Address = "90 7th Street",
                    .JobTitle = "Sales Manager",
                    .Phone = "(417) 166-3268"
                })
            list.Add(New Employee() With {
                    .FirstName = "Sandra",
                    .LastName = "Oldman",
                    .Country = "United States",
                    .City = "LA",
                    .Address = "3687 Mohawk Street",
                    .JobTitle = "Marketing Manager",
                    .Phone = "(918) 161-3649"
                })
            list.Add(New Employee() With {
                    .FirstName = "Andrea",
                    .LastName = "Deville",
                    .Country = "United Kingdom",
                    .City = "London",
                    .Address = "14 Garrett Hill",
                    .JobTitle = "Accountant",
                    .Phone = "(303) 718-1654"
                })
            list.Add(New Employee() With {
                    .FirstName = "George",
                    .LastName = "Holloway",
                    .Country = "Canada",
                    .City = "Ottawa",
                    .Address = "23 Tsawassen Blvd.",
                    .JobTitle = "Accounts Manager",
                    .Phone = "(720) 971-3927"
                })
            list.Add(New Employee() With {
                    .FirstName = "Barbara",
                    .LastName = "Chinavare",
                    .Country = "Hungary",
                    .City = "Budapest",
                    .Address = "6688 Alhambra Ave",
                    .JobTitle = "Tool Designer",
                    .Phone = "(360) 186-4982"
                })
            Return list
        End Get
    End Property
End Class