How to Use Actions Shipped with Blend with AppBarUtils in XAML?

Expression Blend comes with a variety of built-in actions, like CallMethodAction, PlaySoundAction, etc. It would be a pity if we could not take advantage of them. Now with AppBarItemTrigger, this becomes possible.

Assuming you have the following app bar with a sync button:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBarIconButton
               IconUri="/icons/appbar.sync.rest.png" Text="sync"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

and you want to call the Sync method of you view model when the user clicks the button. You can wrap the built-in CallMethodAction in the AppBarItemTrigger like below:

<i:Interaction.Triggers>
    <AppBarUtils:AppBarItemTrigger Type="Button"
                 Id="sync" IsEnabled="{Binding HasData}">
        <ec:CallMethodAction MethodName="Sync" TargetObject="{Binding}"/>
    </AppBarUtils:AppBarItemTrigger>
</i:Interaction.Triggers>

You can also bind the IsEnabled property to a property of you view model like the code above to control whether the app bar button is enabled. AppBarItemTrigger will hook into the app bar button and set its IsEnabled property accordingly.

The default value of IsEnabled property of AppBarItemTrigger is true, meaning you will get an enabled app bar button by default, being consistent with the behavior of the original app bar button.

For app bar menu item, just set the Type property of AppBarItemTrigger to MenuItem.

For a complete sample code, please visit http://appbarutils.codeplex.com/

Advertisements
Tagged

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: