How to show different app bar for different pivot/pano item?

Yesterday I released AppBarUtils 2.0. This major version includes behaviors that enable you to define multiple app bars within a pivot/pano page where different pivot/pano item shows different app bar. This feature has been requested for some time, and now you’ve got what you want.

In this post, I’m going to talk about how to create a pano page with app bars that behave like the built-in people hub. Suppose we have the following Panorama control with 3 pano items:

<controls:Panorama Title="people">
    <!--Panorama item one-->
    <controls:PanoramaItem Header="recent">
        <Grid/>
    </controls:PanoramaItem>
    <!--Panorama item two-->
    <controls:PanoramaItem Header="all">
        <Grid/>
    </controls:PanoramaItem>
    <!--Panorama item three-->
    <controls:PanoramaItem Header="what's new">
        <Grid/>
    </controls:PanoramaItem>
</controls:Panorama>

I want to define 3 app bars for these 3 pano items. Each pano item shows its corresponding app bar just like the built-in people hub. Here’s how this is done:

<i:Interaction.Triggers>
    <abu:SelectedPanoItemChangedTrigger>
        <abu:SwitchAppBarAction>
            <abu:AppBar Id="0" Mode="Minimized">
                <abu:AppBar.MenuItems>
                    <abu:AppBarMenuItem Text="settings" Command="{Binding SampleCommand}"/>
                </abu:AppBar.MenuItems>
            </abu:AppBar>
            <abu:AppBar Id="1">
                <abu:AppBar.MenuItems>
                    <abu:AppBarMenuItem Text="settings" Command="{Binding SampleCommand}"/>
                </abu:AppBar.MenuItems>
                <abu:AppBarButton IconUri="/icons/appbar.add.rest.png"
                    Text="add" Command="{Binding SampleCommand}"/>
                <abu:AppBarButton IconUri="/icons/appbar.feature.search.rest.png"
                    Text="search" Command="{Binding SampleCommand}"/>
            </abu:AppBar>
            <abu:AppBar Id="2" Mode="Minimized">
                <abu:AppBar.MenuItems>
                    <abu:AppBarMenuItem Text="refresh" Command="{Binding SampleCommand}"/>
                    <abu:AppBarMenuItem Text="settings" Command="{Binding SampleCommand}"/>
                </abu:AppBar.MenuItems>
            </abu:AppBar>
        </abu:SwitchAppBarAction>
    </abu:SelectedPanoItemChangedTrigger>
</i:Interaction.Triggers>

This code is placed inside the Panorama element in XAML but ouside any PanoramaItem element. The SelectedPanoItemChangedTrigger subscribes to the SelectionChanged event of Panorama control. When this event raises, it will invoke the SwitchAppBarAction to show the correct app bar.

SwitchAppBarAction is also the place where you define multiple app bars each of which is assigned a unique ID. By default, the ID corresponds to the selected index of Panorama control. For example, when the 2nd pano item shows, the app bar whose ID is 2 will show.

You define app bar with AppBar, app bar button with AppBarButton, and app bar menu item with AppBarMenuItem as the above code shows. AppBarButton is placed directly within AppBar as element content, while AppBarMenuItem is placed within AppBar.MenuItems property, which has the same structure as the built-in ApplicationBar.

The properties they support are also the same as the built-in ApplicationBar, ApplicationBarIconButton, and ApplicationBarMenuItem, plus a Command property and a CommandParameter property. All those properties are dependency properties, so they’re ready for data binding.

Now that you’ve got the idea of this feature, go ahead to download the demo project and run it! Cheers!

Advertisements

2 thoughts on “How to show different app bar for different pivot/pano item?

  1. […] the previous post, I’ve shown you how to show different app bar for different pivot/pano items. But what if I […]

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: