How to share an app bar between multiple pivot/pano items?

In the previous post, I’ve shown you how to show different app bar for different pivot/pano items. But what if I want some pivot/pano items to show the same app bar? This is what I’m going to talk about in this post.

Suppose we have the following Pivot control with 3 pivot items:

<controls:Pivot Title="APPBARUTILS">
    <!--Pivot item one-->
    <controls:PivotItem Header="item1">
    <!--Pivot item two-->
    <controls:PivotItem Header="item2">
    <!--Pivot item three-->
    <controls:PivotItem Header="item3">

I want to define 2 app bars. The first two pivot items will share the first app bar, and the third pivot item will take the remaining app bar. Here’s how this is done:

            <!--Map 1st and 2nd pivot item to 1st app bar-->
            <abu:SelectionMapping SourceIndex="0" TargetIndex="0"/>
            <abu:SelectionMapping SourceIndex="1" TargetIndex="0"/>
            <!--Map 3rd pivot item to 2nd app bar-->
            <abu:SelectionMapping SourceIndex="2" TargetIndex="1"/>
            <abu:AppBar Id="0">
                    <abu:AppBarMenuItem Text="clear" Command="{Binding SampleCommand}"/>
                <abu:AppBarButton IconUri="/icons/"
                    Text="add" Command="{Binding SampleCommand}"/>
                <abu:AppBarButton IconUri="/icons/"
                    Text="sync" Command="{Binding SampleCommand}"/>
            <abu:AppBar Id="1" Mode="Minimized">
                    <abu:AppBarMenuItem Text="settings" Command="{Binding SampleCommand}"/>
                    <abu:AppBarMenuItem Text="help" Command="{Binding SampleCommand}"/>

This code is placed inside the Pivot element in XAML but ouside any PivotItem element. This time SelectedPivotItemChangedTrigger is used instead of SelectedPanoItemChangedTrigger. The way of defining app bars within the SwitchAppBarAction remains the same as what we have seen in the previous post.

In order to provide custom mappings from pivot item index to app bar ID, we need to create a list of SelectionMapping for SelectedPivotItemChangedTrigger.SelectionMappings property as shown in the above code. The SourceIndex property of SelectionMapping refers to the pivot item index, while the TargetIndex property refers to the app bar ID.

The above code will have the pivot items whose indexes are 0 and 1 mapped to the app bar whose ID is 0, and the pivot item whose index is 2 mapped to the app bar whose ID is 1. In this case, the first two pivot items will show the first app bar, while the third pivot item will show the second app bar.

Now that you’ve got the idea of this feature, go ahead to download the binary and take advantage of it today! Cheers!


One thought on “How to share an app bar between multiple pivot/pano items?

  1. […] the previous two posts, we have learnt how to work with multiple app bars on pivot/pano page. In this post I’m […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: