Uwp MasterDetailsView中的命令栏放置

Uwp MasterDetailsView中的命令栏放置,uwp,uwp-xaml,windows-community-toolkit,Uwp,Uwp Xaml,Windows Community Toolkit,我使用Windows Template Studio为Windows 10创建了一个项目,并添加了一个母版详细信息页。然后,我将master和details命令栏添加到Microsoft.Toolkit.Uwp.UI.Controls.MasterDetails视图中,如下所示: <Page x:Class="MasterDetails.Views.MasterDetailPage" xmlns="http://schemas.microsoft.com/winfx/200

我使用Windows Template Studio为Windows 10创建了一个项目,并添加了一个母版详细信息页。然后,我将master和details命令栏添加到Microsoft.Toolkit.Uwp.UI.Controls.MasterDetails视图中,如下所示:

<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>

命令栏位于底部(分别位于主面板和详细面板的底部)。我想把它们放在最上面。我怎样才能做到这一点


我尝试将主命令栏放置在MasterDetailsView之外,并将详细信息命令栏放置在MasterDetailControl.xaml内的scrollviewer之前,但这看起来不太好,并且占用了不必要的空间。

您需要重新模板
MasterDetailsView

  • 您可以从中获取默认模板
  • 更改


  • DetailsPanel执行相同的操作

    是的,这很有效。为了记录,我将下载并编辑的MasterDetailsView.xaml放在Styles文件夹中。然后,我不得不将其添加到App.xaml:
    中的应用程序资源中。
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <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>