How to show different app bar for different page state?

In the previous two posts, we have learnt how to work with multiple app bars on a pivot/pano page. In this post I’m going to talk about how to work with multiple app bars on a general page. Suppose we have a page containing a MultiselectList control from Silverlight for Windows Phone Toolkit like this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <toolkit:MultiselectList
        ItemTemplate="{StaticResource TodosItemTemplate}"
        ItemsSource="{Binding Todos}"
        IsSelectionEnabled="{Binding IsSelecting, Mode=TwoWay}"/>
</Grid>

The MultiselectList control can switch between reading and selecting modes. I want to define two different app bars, one for reading mode, the other for selecting mode, and have them shown based on the current mode, just like the built-in email app.

With StateChangedTrigger from the lastest AppBarUtils (2.1), this can be done easily:

<i:Interaction.Triggers>
    <abu:StateChangedTrigger State="{Binding IsSelecting}">
        <abu:SwitchAppBarAction>
            <abu:AppBar Id="0">
                <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.list.check.png" 
                    Text="select" Command="{Binding SelectCommand}"/>
            </abu:AppBar>
            <abu:AppBar Id="1">
                <abu:AppBarButton IconUri="/icons/appbar.delete.rest.png" 
                    Text="delete" Command="{Binding DeleteCommand}"/>
            </abu:AppBar>
        </abu:SwitchAppBarAction>
    </abu:StateChangedTrigger>
</i:Interaction.Triggers>

The above code defines two app bars within SwitchAppBarAction which is then placed into StateChangedTrigger. The key property of StateChangedTrigger is the State property which you can bind to your view model. When your view model changes, StateChangedTrigger will inspect the value of the State property and invoke SwitchAppBarAction with that value.

State property supports int, bool, enum (int underlying type), and string (integer literal). ints will be used directly. enums will be converted to int. false and true will be interpreted as 0 and 1 respectively. Strings will be parsed to int.

MultiselectList provides a IsSelectionEnabled property to indicate whether it’s now in reading mode or selecting mode. We bound the IsSelectionEnabled property to a IsSelecting property of the view model (two-way binding), and then bound the State property to the same property of the view model. In this way, the changes of the IsSelectionEnabled property will be transfered to the State property via the IsSelecting property.

We need this indirection here because we want to have the MultiselectList switched to reading mode when a user presses the hardware back key while in selecting mode, just like the built-in email app, which is done within OnBackKeyPress method (see demo for details).

Now comes your turn. Go ahead to download the demo and run it! Cheers!

Advertisements

3 thoughts on “How to show different app bar for different page state?

  1. cast says:

    Hi,when State bind to a Property of a Element in view ,It can’t work

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: