WPF: Master-detail view

This entry is part 47 of 54 in the series Learn WPF

The master detail view is a rather common way to display information in Windows.

It usually consists of 2 columns.  The left column being the the master view and the right column the detail view.

The master shows a compressed view of some objects, while the detail view shows the selected object (from the master) in greater detail, as appropriate.

<Window x:Class="MasterDetail.MainWindow"
        Title="MainWindow" Height="350" Width="525">
            <ColumnDefinition Width="200"/>
            <ColumnDefinition  />
        <ListBox ItemsSource="{Binding}" FontSize="16" DisplayMemberPath="ProcessName" x:Name="master"/>
        <Grid Grid.Column="1" TextBlock.FontSize="16" DataContext="{Binding SelectedItem, ElementName=master}">
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            <TextBlock Margin="6" Text="{Binding ProcessName, StringFormat='Name: \{0\}'}" />
            <TextBlock Grid.Row="1" Margin="6" Text="{Binding Id, StringFormat='ID: 0'}" />
            <TextBlock Grid.Row="2" Margin="6" Text="{Binding PriorityClass, StringFormat='Priority Class: \{0\}'}" />
            <TextBlock Grid.Row="3" Margin="6" Text="{Binding Threads.Count, StringFormat='Threads: 0'}" />
            <TextBlock Grid.Row="4" Margin="6" Text="{Binding TotalProcessorTime, StringFormat='Processor Time: \{0:G\}'}" />
        <GridSplitter Background="Blue" Width="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" />

using System.Diagnostics;
using System.Windows;

namespace MasterDetail
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
        public MainWindow()
            DataContext = Process.GetProcesses();


Series Navigation<< WPF: Listview with IValueConverter
WPF: Master detail for a class with data >>

Leave a comment

Leave a Reply