How to Bind Text of an App Bar Item with AppBarUtils in XAML?

So you want to bind the Text property of an app bar item? What for? Well, typically you’ll want this capability when supporting multi-language in your app. For example, bind the Text property to a localization resource manager. Unfortunately, neither app bar item is a dependency object, nor is the Text property a dependency property. So what next?

The AppBarItemTrigger and AppBarItemBehavior in AppBarUtils 1.0 RC 2 provide a DisplayText dependency property dedicated to this scenario. Here’s how it work:

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

Very simple. But what’s the difference between Id and Text? What are they for?

Well, when hooking up the app bar item, we need a way to find it. But we don’t have many options. Actually, at this point of time the only way to find an app bar item is to query with its Text property, and we provide this cue for AppBarItemTrigger/AppBarItemBehavior by setting the Id property. Once this is done, the value of Id property will no longer be needed.

Text, on the other hand, acts as a bridge between the Text property of an app bar item and the binding source from the beginning to the end. It will detect any changes in the binding source and apply to the Text property of the app bar item. However, changes to null of binding source will be ignored.

In a nutshell, you’ll need to provide an intial value for the Text property of an app bar so that the Id property can do its work. Then you can bind the Text property to somewhere through the use of the Text property.

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: