WP7 (6): AppBarUtils User Guide

WP7 (6): AppBarUtils User Guide

 

Written by Allen Lee

 

Without your life, I began to write novels, and there were a lot of images for inspiration. I would like to pay you the fee.

-Jay Chou, Mine

 

Task of this lesson

We know that the Application Bar of Windows Phone does not support data binding, which means that we cannot directly bind the buttons or menu items on the Application Bar to the command attributes of the view model like the Button control of Silverlight.

To solve this problem, we can use some third-party toolkit, such as the AppBarUtils that I will introduce to you today, which provides a set of Expression Blend behaviors, you can bind buttons on the Application Bar to menu items. Next, we will take a look at how to use this toolkit to implement relevant functions.

First, assume that our Application contains the Application Bar shown in Figure 1-1.

Figure 11 Application Bar

The add button and clear menu items are respectively bound to the two command attributes of the view model. They are responsible for adding data to The ListBox control of the page and clearing the content of The ListBox control; the sync button will execute the Sync method of the view model, and the statistic menu item will open the statistics result page.

Before starting, You need to download the dllof appbarutilsat http://appbarutils.codeplex.com/and use the deployment in the project.

 

Button and menu command binding

In Expression Blend, click the Assets button on the left toolbar to open the Assets window, select the Behaviors category, and drag the AppBarItemCommand from the right to [PhoneApplicationPage] on the Objects and Timeline panel, as shown in 2-1.

Figure 21 Add an AppBarItemCommand

Here, you may ask, why is it dragged to [PhoneApplicationPage? Because the buttons and menu items on the Application Bar are not dependent objects, the Expression Blend behavior cannot be associated with them, and the only place in Windows Phone applications that can access the Application Bar is the page, therefore, we need to drag the AppBarItemCommand to [PhoneApplicationPage.

Repeat the preceding steps to add an AppBarItemCommand. Now we have two appbaritemcommands for the add button and clear menu items respectively.

Select the first AppBarItemCommand on the Objects and Timeline panel, and set the Id attribute to add on the Properties panel, as shown in Figure 2-2.

Figure 22 set the Id attribute

Because AppBarItemCommand finds the button on the Application Bar based on the value of the Text attribute, the value of the Id attribute must match the value of the Text attribute.

Next, switch to the XAML mode and bind the Command attribute of AppBarItemCommand to the corresponding Command attribute of the view model, as shown in Code 2-1.

Code 21: bind the Command Property

<AppBarUtils: AppBarItemCommand Id = "add" Command = "{Binding AddCommand}"/>

Here, you may ask, why not directly set the binding of the Command attribute on the Properties panel? This is because Expression Blend performs special processing on the ICommand type attribute of Behavior. As shown in Figure 2-2 above, the Command attribute does not look like a common attribute and there is no Advanced options button on the right, therefore, the data binding dialog box cannot be opened.

For the clear menu items, we need to set the values of the Id and Type attributes to clear and MenuItem on the Properties panel, as shown in Figure 2-3.

Figure 23 set the Id and Type attributes

It must be noted that the Type attribute is used to distinguish the buttons and menu items on the Application Bar. Its default value is Button. Therefore, when you use AppBarItemCommand on the button, you do not need to set the value of this attribute.

Finally, bind the Command property. As before, we need to switch to the XAML mode to set the binding expression, as shown in Code 2-2.

Code 22: bind the Command Property

<AppBarUtils: AppBarItemCommand Type = "MenuItem" Id = "clear" Command = "{Binding ClearCommand}"/>

 

Behavior of using Expression Blend SDK

You know, Expression Blend SDK provides many useful actions, one of which is CallMethodAction, which can be used to execute the specified method of the specified object. It is obviously very suitable for our sync button, however, it needs to work with the Trigger, and the Expression Blend SDK does not provide a Trigger for the Application Bar. What should I do? At this time, it was AppBarItemTrigger's turn to appear.

Open the Assets window, select the Behaviors category, and drag CallMethodAction from the right side to [PhoneApplicationPage] on the Objects and Timeline panel, as shown in 3-1.

Figure 31 add CallMethodAction

Make sure that CallMethodAction is selected. On the Properties panel, set the New button to the right of TriggerType, as shown in 3-2.

Figure 32 click the New button

In the pop-up Select Object dialog box, Select AppBarItemTrigger, as shown in 3-3, and click OK to close the dialog box.

Figure 33 select AppBarItemTrigger

In this case, the relevant attributes of the Trigger are changed to AppBarItemTrigger, and the value of the Id attribute is set to sync, as shown in 3-4.

Figure 34 attributes of AppBarItemTrigger

As for the CallMethodAction attributes, we only need to bind the TargetObject attribute to the specified object, and then set the value of the MethodName attribute to the name of the specified method.

 

Page navigation

With AppBarItemTrigger, we can use the NavigateToPageAction of Expression Blend SDK to open the page for the Application Bar. Of course, the simpler method is to directly use AppBarItemNavigation, its usage is similar to AppBarItemCommand, except that the Command attribute is replaced with the TargetPage attribute.

If you want to include the query string in the URI and the value of the parameter is bound to the attribute of the view model, you can try NavigateWithQueryStringAction.

Open the Assets window, select the Behaviors category, and drag NavigateWithQueryStringAction from the right to [PhoneApplicationPage] on the Objects and Timeline panel, as shown in Figure 4-1.

Figure 41 add NavigateWithQueryStringAction

Make sure that the NavigateWithQueryStringAction is selected. On the Properties panel, Trigger is changed to AppBarItemTrigger. Then, change the values of the attributes Id, Type, and TargetPage to statistic, MenuItem, And/StatisticPage. xaml, as shown in 4.

Figure 42 set Related Properties

Assume that the query string we want to include is "hitcount = XX & timecount = YY", where XX and YY come from the HitCount and TimeCount attributes of the view model, you can set Parameters of NavigateWithQueryStringAction.

On the Properties panel, click the Edit items in this collection button on the right of the Parameters property. in the displayed Parameter Collection Editor dialog box, click Add another item to Add a Parameter, set the Field attribute Value to hitcount and bind the Value attribute to the HitCount attribute of the view model, as shown in Figure 4-3.

Figure 43 Add Parameters

Add a timecount parameter in the same way and bind its Value attribute to the TimeCount attribute of the view model.

According to the above settings, NavigateWithQueryStringAction will create a URI:/StatisticPage. xaml? Hitcount = 9 & timecount = 13 (assume that when you click the statistic menu item, the values of the HitCount and TimeCount attributes are 9 and 13 respectively ).

Since NavigateWithQueryStringAction is a TriggerAction, it means its purpose is not limited to Application Bar. You can use EventTrigger of Expression Blend SDK to use it on the Silverlight Button control (or other controls.

Finally, if you only need a simple backend, you can use GoBackAction. Like NavigateWithQueryStringAction, you can use it on the Application Bar through AppbarItemTrigger, or use it on the Silverlight Button control (or other controls) through EventTrigger.

 

Bind enable status and display text

In some cases, you may want the buttons and menu items on the Application Bar to automatically adjust the enabling status according to certain conditions. For example, the sync button is available only when there is content in The ListBox control of the page, otherwise, it should be disabled.

AppBarItemTrigger provides an IsEnabled dependency attribute. When we bind it to a bool type attribute of the view model, the former listens to the latter for changes, then, reflect the modified value to the IsEnabled attribute of the button or menu item on the Application Bar.

If you are using AppBarItemCommand, you can use ICommand. the Return Value of the CanExecute method specifies the enable/disable status, and triggers the CanExecuteChanged event when the status changes. The remaining AppBarItemCommand will help you handle the problem.

As for the buttons on the Application Bar and the display text of menu items, you may also want to bind them. This requirement usually appears in applications supported by multiple languages. At this time, you can bind the Text dependency attribute of AppBarItemTrigger to a certain attribute of the resource object. The former listens to changes of the latter, then, reflect the modified value to the Text attribute of the button or menu item on the Application Bar. If you are using AppBarItemCommand or AppBarItemNavigation, you can use their Text dependency attribute to achieve the same effect.

Some may worry that the attributes of Id and Text may be shelved. Don't worry, they won't. Although they are eventually associated with the Text attribute of the button or menu item on the Application Bar, the time when they take effect is different. The Id attribute is only used to find the buttons or menu items on the Application Bar when the behavior is initialized. Once it is found, the Id attribute will be retired. From now on, the Text property will work in handy. It will pay close attention to the binding source and reflect the update to the Text property of the button or menu item on the Application Bar.

 

Class ......