CODEWITHSUNDEEP
xamluwpwindows-community-toolkit
ATL_DEV
ATL_DEV

Reputation: 9591

How do I add a commandbar to the MasterDetailsView?

I am trying to add a commandbar to the MasterDetailsView, but I cannot figure out how to add the control using straight XAML.

Here's my code:

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

Upvotes: 1

Views: 170

Answers (1)

Shawn Kendrot
Shawn Kendrot

Reputation: 12465

You can set the CommandBar like such:

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

You should also be able to put the CommandBar into your page resources and apply using the resource

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

Upvotes: 1

Related Questions