如何将命令栏添加到 MasterDetailsView？答案

【问题标题】：How do I add a commandbar to the MasterDetailsView?如何将命令栏添加到 MasterDetailsView？
【发布时间】：2017-11-04 20:35:25
【问题描述】：

我正在尝试将命令栏添加到 MasterDetailsView，但我不知道如何使用直接 XAML 添加控件。

这是我的代码：

      <CommandBar Grid.Row="0" Name="CommandBar" >
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" />
        <AppBarButton Icon="Stop" Label="Stop" />
        <AppBarButton Icon="Play" Label="Play" />
        <AppBarButton Icon="Forward" Label="Forward" />

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" />
            <AppBarButton Icon="Dislike" Label="Dislike" />
        </CommandBar.SecondaryCommands>

        <CommandBar.Content>
            <TextBlock Text="Now playing..." Margin="12,14"/>
        </CommandBar.Content>
    </CommandBar>

    <controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
        Grid.Row="1"
        x:Name="MasterDetailsViewControl"

        ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
        SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
        ItemTemplate="{StaticResource ItemTemplate}"
        DetailsTemplate="{StaticResource DetailsTemplate}"
        NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
        BorderBrush="Transparent" />

【问题讨论】：

标签： xaml uwp windows-community-toolkit

【解决方案1】：

您可以像这样设置 CommandBar：

<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
    Grid.Row="1"
    x:Name="MasterDetailsViewControl"

    ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
    ItemTemplate="{StaticResource ItemTemplate}"
    DetailsTemplate="{StaticResource DetailsTemplate}"
    NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
    BorderBrush="Transparent">
    <controls:MasterDetailsView.MasterCommandBar>
        <CommandBar>
            <AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
        </CommandBar>
    </controls:MasterDetailsView.MasterCommandBar>
</controls:MasterDetailsView>

您还应该能够将 CommandBar 放入您的页面资源并使用该资源进行应用

<Page.Resources>
    <CommandBar x:Key="MasterCommandBar" >
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" />
        <AppBarButton Icon="Stop" Label="Stop" />
        <AppBarButton Icon="Play" Label="Play" />
        <AppBarButton Icon="Forward" Label="Forward" />

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" />
            <AppBarButton Icon="Dislike" Label="Dislike" />
        </CommandBar.SecondaryCommands>

        <CommandBar.Content>
            <TextBlock Text="Now playing..." Margin="12,14"/>
        </CommandBar.Content>
    </CommandBar>
</Page.Resources>

<controls:MasterDetailsView MasterCommandBar="{StaticResource MasterCommandBar}"
    Grid.Row="1"
    x:Name="MasterDetailsViewControl"

    ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
    ItemTemplate="{StaticResource ItemTemplate}"
    DetailsTemplate="{StaticResource DetailsTemplate}"
    NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
    BorderBrush="Transparent" />

【讨论】：

感谢您的大力帮助！一个问题，我的CommandBar无论你是插入MasterCommandBar还是DetailsCommandBar，总是显示在底部。这可以放在顶部还是我必须像使用控制模板那样做严重的手术？
默认情况下，CommandBar 位于底部。您可以通过重新设置 MasterDetailsView 的样式将其放在顶部