How to Implement the application bar in Windows Phone 7

In Windows Phone 7, the previous menu system is canceled, but different programs and functions are switched through the Application bar.

Up to four applications (four icons) can be displayed in each application column ).

Windows Phone application bar can be added in two ways. One is to add through C # code, and the other is to generate the application bar through XAML.

C # code can be used to internationalize the application bar (that is, switch between different languages on the mobile phone). However, the application bar generated through XAML cannot implement the switch function in different languages. This is because ApplicationBar is not a Silverlight control, so ApplicationBar does not support data binding. Any data binding targets must be self-inherited from the frameworkelement class. Therefore, data binding cannot be used for internationalization and localization. Only the C # code can be used to generate the ApplicationBar and then implement the internationalization and localization functions.

Steps:

1. Generate the application bar through XAML

The code is automatically generated on the XAML page. By default, this code is commented out.

 <!--<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>-->

The preceding table declares an ApplicationBar and adds two buttons and two menuitems. To add an ApplicationBar, you only need to remove the comments of the above Code.

Note: applicationbariconbutton indicates that a button is declared. iconuri indicates the path of the button icon, and text indicates the name displayed by the button.

Applicationbarmenuitem indicates that a menuitem is declared, and text indicates the name of the menu item.

Modify the above Code as follows:

<Phone: phoneapplicationpage. applicationBar> <shell: ApplicationBar isvisible = "true" ismenuenabled = "true" opacity = "0.5"> <shell: applicationbariconbutton X: name = "videobutton" iconuri = "/icons/appbar.feature.video.rest.png" text = "video" Click = "videobutton_click"/> <shell: applicationbariconbutton X: name = "webbrowserbutton" iconuri = "/icons/appbar.feature.search.rest.png" text = "Browser" Click = "webbrowserbutton_click"/> <shell: ApplicationBar. menuitems> <shell: applicationbarmenuitem X: Name = "ebookbuttom" text = "" Click = "ebookbuttom_click"/> <shell: applicationbarmenuitem X: name = "musicbutton" text = "Music" Click = "musicbutton_click"/> </shell: ApplicationBar. menuitems> </shell: ApplicationBar> </Phone: phoneapplicationpage. applicationBar>

In addition, you can use expression blend to design the ApplicationBar.

Click (...) A menu item is displayed, as shown in.

Menu item View:

For the application column, we put two icons in the value. Up to four.

2. Use the C # code to implement the application bar

First, add the following namespace:

using Microsoft.Phone.Shell;

Then add the following code to the page constructor:

ApplicationBar = new ApplicationBar (); // declare an ApplicationBar. isvisible = true; // set ApplicationBar to be visible in the application bar. ismenuenabled = true; // you can set the menu item applicationbariconbutton button1 = new applicationbariconbutton (New uri ("/icons/appbar.feature.video.rest.png", urikind. relative); // declare a button and set its icon strength. Button1.text = "video"; // The name displayed by the icon is video button1.click + = new eventhandler (button#click ); // register the Click Event applicationbariconbutton button2 = new applicationbariconbutton (New uri ("/icons/appbar.feature.search.rest.png", urikind. relative); button2.text = "Search"; button2.click + = new eventhandler (button2_click); ApplicationBar. buttons. add (button1); // Add the button to the application bar so that the button can be used. ApplicationBar. buttons. add (button2); applicationbarmenuitem menuitem1 = new applicationbarmenuitem (""); // declare a menuitem and set the display text to applicationbarmenuitem menuitem2 = new applicationbarmenuitem ("Music "); menuitem1.click + = new eventhandler (menuitem1_click); // register menuitemitem's Click Event menuitem2.click + = new eventhandler (menuitem2_click); ApplicationBar. menuitems. add (menuitem1); // Add menuitem to the menu bar, so that you can use this me Nuitem. ApplicationBar. menuitems. Add (menuitem2 );

After the preceding code is successfully added, you also need to implement the click response function for each button and menuitem. When you register each click event, double-click the tab key to automatically add the click response function, as shown below:

Void menuitem2_click (Object sender, eventargs e) {navigationservice. navigate (New uri ("musics", urikind. Relative); // This code is self-written, the same below. } Void menuitem1_click (Object sender, eventargs e) {navigationservice. navigate (New uri ("ebook", urikind. relative);} void button2_click (Object sender, eventargs e) {navigationservice. navigate (New uri ("surferinternet", urikind. relative);} void button#click (Object sender, eventargs e) {navigationservice. navigate (New uri ("Movies", urikind. relative ));}

In this way, you can add the application bar and menu bar by using the C # code, and navigate to different pages by clicking the click event.

The final view result is the same as the preceding one.