CommandBar placement inside MasterDetailsView

Question

I created a project for Windows 10 using Windows Template Studio, and added a master-details page. I then added master and details command bars to the Microsoft.Toolkit.Uwp.UI.Controls.MasterDetailsView like this:

<Page
    x:Class="MasterDetails.Views.MasterDetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Style="{StaticResource PageStyle}"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:model="using:MasterDetails.Models"
    xmlns:views="using:MasterDetails.Views"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="ItemTemplate" x:DataType="model:SampleOrder">
            <Grid Height="64" Padding="0,8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <FontIcon Grid.Column="0" Tag="{x:Bind HashIdentIcon}" FontSize="40" Glyph="{x:Bind SymbolAsChar}" VerticalAlignment="Center" />
                <StackPanel Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center">
                    <TextBlock Text="{x:Bind Company}" Tag="{x:Bind HashIdentTitle}" Style="{ThemeResource ListTitleStyle}"/>
                    <TextBlock Text="{x:Bind Status}" Style="{StaticResource ListSubTitleStyle}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="DetailsTemplate">
            <views:MasterDetailDetailControl MasterMenuItem="{Binding}"/>
        </DataTemplate>

        <DataTemplate x:Key="NoSelectionContentTemplate">
            <TextBlock x:Uid="MasterDetail_NoSelection" Style="{StaticResource ListNoSelectionTextStyle}" />
        </DataTemplate>
    </Page.Resources>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition x:Name="TitleRow" Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock
            x:Uid="MasterDetail_Title"
            x:Name="TitlePage"
            Margin="12,0,12,7"
            Style="{StaticResource PageTitleStyle}" />

        <controls:MasterDetailsView
            Grid.Row="1"
            x:Name="MasterDetailsViewControl"
            ItemsSource="{x:Bind SampleItems}"
            SelectedItem="{x:Bind Selected, Mode=OneWay}"
            ItemTemplate="{StaticResource ItemTemplate}"
            DetailsTemplate="{StaticResource DetailsTemplate}"
            NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
            BorderBrush="Transparent">
            <controls:MasterDetailsView.MasterCommandBar>
                <CommandBar HorizontalAlignment="Left">
                    <AppBarButton Icon="Refresh" Label="Refresh"/>
                    <AppBarButton Icon="Add" Label="Add"/>
                </CommandBar>
            </controls:MasterDetailsView.MasterCommandBar>
            <controls:MasterDetailsView.DetailsCommandBar>
                <CommandBar HorizontalAlignment="Left">
                    <AppBarButton Icon="Edit" Label="Edit"/>
                </CommandBar>
            </controls:MasterDetailsView.DetailsCommandBar>
        </controls:MasterDetailsView>
    </Grid>  
</Page>

The command bars are place at the bottom (of the master and details panels respectively). I would like to have them at the top. How can I accomplish that?

I tried placing the master command bar outside the MasterDetailsView and the details command bar just before the scrollviewer inside MasterDetailDetailControl.xaml, but that doesn't look good and takes up unnecessary space.

Answer 1

You need to re-template MasterDetailsView.

1. You can get the default template from MasterDetailsView.xaml

2. Change the row order in <Grid.RowDefinitions>

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   

3. Change the row number for MasterList to Grid.Row="2" and MasterCommandBarPanel to Grid.Row="1"

   <Grid x:Name="MasterPanel"
         Width="{TemplateBinding MasterPaneWidth}"
         Background="{TemplateBinding MasterPaneBackground}"
         BorderBrush="{TemplateBinding BorderBrush}"
         BorderThickness="0,0,1,0">
       <Grid.RowDefinitions>
           <RowDefinition Height="Auto" />
           <RowDefinition Height="Auto" />
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
       <ContentPresenter x:Name="HeaderContentPresenter"
                         Margin="12,0"
                         x:DeferLoadStrategy="Lazy"
                         Content="{TemplateBinding MasterHeader}"
                         ContentTemplate="{TemplateBinding MasterHeaderTemplate}"
                         Visibility="Collapsed" />
       <Grid x:Name="MasterCommandBarPanel" Grid.Row="1"></Grid>
       <ListView x:Name="MasterList"
                 Grid.Row="2"
                 IsTabStop="False"
                 ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                 ItemTemplate="{TemplateBinding ItemTemplate}"
                 ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                 ItemsSource="{TemplateBinding ItemsSource}"
                 SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
   </Grid>
   

Do the same thing for DetailsPanel