introduction

AppBarUtils provides out-of-box app bar behaviors/triggers/actions for Windows Phone SDK 7.1/8.0. They enable you to do command binding (also binding for other properties) for app bar buttons/menu items, make use of the built-in Blend SDK and 3rd party behaviors, and dynamically show different app bars for different pano/pivot items or based on different page states.

get the toolkit

AppBarUtils is available via NuGet. Simply add it to your project through the NuGet extension from within Visual Studio. If you are using Visual Studio Express, you can still download it from here CodePlex and add it to your project manually.

sample code

<!--Behaviors for fixed app bar-->
<i:Interaction.Behaviors>
    <abu:AppBarItemCommand Id="locked" Text="{Binding LockButtonDisplayText}"
        IconUri="{Binding LockButtonIconUri}" Command="{Binding LockCommand}"/>
</i:Interaction.Behaviors>

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

<!--Behaviors for dynamic app bar-->
<i:Interaction.Triggers>
    <abu:SelectedPivotItemChangedTrigger>
        <abu:SwitchAppBarAction>
            <abu:AppBar Id="0">
                <abu:AppBar.MenuItems>
                    <abu:AppBarMenuItem Text="clear" Command="{Binding SampleCommand}"/>
                </abu:AppBar.MenuItems>
                <abu:AppBarButton IconUri="{Binding AddButtonIcon}"
                    Text="{Binding AddButtonText}">
                    <ec:NavigateToPageAction TargetPage="/AddPage.xaml"/>
                </abu:AppBarButton>
            </abu:AppBar>
            <abu:AppBar Id="1" Mode="Minimized">
                <abu:AppBar.MenuItems>
                    <abu:AppBarMenuItem Text="help">
                        <ec:NavigateToPageAction TargetPage="/HelpPage.xaml"/>
                    </abu:AppBarMenuItem>
                </abu:AppBar.MenuItems>
            </abu:AppBar>
        </abu:SwitchAppBarAction>
    </abu:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
You can find a fully functional demo in the source code.

how to use

  1. Article: How to use AppBarUtils in Blend? (English, 简体中文)
  2. Article: How to do command binding for application bar with AppBarUtils in XAML?
  3. Article: How to do navigation for application bar with AppBarUtils in XAML?
  4. Article: How to use actions shipped with Blend with AppBarUtils in XAML?
  5. Article: How to bind text of an app bar item with AppBarUtils in XAML?
  6. Article: How to show different app bar for different pivot/pano item?
  7. Article: How to share an app bar between multiple pivot/pano items?
  8. Article: How to show different app bar for different page state?
  9. Video: How to create app bar in Blend? (English, 国语, 粤语)
  10. Video: How to do command binding for app bar in Blend? (English, 国语, 粤语)
  11. Video: How to use actions shipped with Blend? (English, 国语, 粤语)
  12. Video: How to show different app bar for different pano item? (English, 国语, 粤语)
  13. Video: How to show different app bar for different page state? (English, 国语, 粤语)
If you find a bug, you can file it at Issue Tracker. If you have troubles while using this toolkit, you can raise your question at Discussions. Thanks!

latest changes

versiondescription
2.4[New features] Now buttons and menu items in dynamic app bar can take advantage of existing trigger actions provided by Blend SDK.

view all change history

Last edited Jun 9, 2013 at 1:31 PM by allenlooplee, version 118