MasterDetailsView XAML Control

The MasterDetailsView Control presents items in a master/details pattern. It shows a collection of items within the "master panel" and the details for that item within the "details panel". The MasterDetailsView reacts to the width it is given to determine if it should show both the master and details or just one of the two. There is a dependency property ViewState or an event ViewStateChanged that can be used to track which state the control is in.

Syntax

<controls:MasterDetailsView
          ItemsSource="{Binding Items}"
          ItemTemplate="{StaticResource ListTemplate}"
          DetailsTemplate="{StaticResource DetailsTemplate}"
          NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
          CompactModeThresholdWidth="720">
</controls:MasterDetailsView>

Sample Output

MasterDetailsView animation

Properties

Property Type Description
CompactModeThresholdWidth double If width of control is less than CompactModeThresholdWidth, the control will only display the master or details view - otherwise it will show both views.
DetailsCommandBar CommandBar Gets or sets the Windows.UI.Xaml.Controls.CommandBar for the details section
DetailsTemplate DataTemplate Gets or sets the DataTemplate used to display the details
MapDetails Func<object,object> Gets or sets a function for mapping the selected item to a different model. This new model will be the DataContext of the Details area
MasterCommandBar CommandBar Gets or sets the Windows.UI.Xaml.Controls.CommandBar for the master section
MasterHeader object Gets or sets the content for the master pane's header
MasterHeaderTemplate DataTemplate Gets or sets the DataTemplate used to display the content of the master pane's header
MasterPaneBackground Brush Gets or sets the Brush to apply to the background of the list area of the control
MasterPaneWidth double Gets or sets the width of the master pane when the view is expanded
NoSelectionContent object Gets or sets the content to dsiplay when there is no item selected in the master list
NoSelectionContentTemplate DataTemplate Gets or sets the DataTemplate used to display the content when there is no selection
SelectedItem object Gets or sets the selected item
ViewState MasterDetailsViewState Gets the current visual state of the control

Events

Events Description
SelectionChanged Occurs when the currently selected item changes
ViewStateChanged Occurs when the view state changes

Sample Code

MasterDetailsView Sample Page Source. You can see this in action in Windows Community Toolkit Sample App.

Default Template

MasterDetailsView XAML File is the XAML template used in the toolkit for the default styling.

Requirements

Device family Universal, 10.0.15063.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API