Discussion on Windows Phone 7 development on the 31st day -- 6th: Toolbar

By Jeff Blankenburg

This article is about Windows Phone 7 development on the 31st day"6th day of the series.

Yesterday, we discussed the system topic and how to use expression blend to set the system value. Today, let's look at another theme that can be easily implemented using expression blend. If you see apps that have been shown in various places, such as YouTube (or my personal website, blankensoft ),ProgramYou will find that they basically use a beautiful toolbar.

The toolbar for Windows Phone 7 is a row of circular icons at the bottom of the application. The following is a tool bar demonstration in the tapscotch game I created.

As shown in the preceding example, four icons are placed for interaction with users. Play, best times, badges, and help. Click any one of them in the program at any time to jump to the corresponding page. So how can we implement it?

Add Toolbar

If you open a new project, some sections are commented out in the mainpage. XAML file.Code. If you delete the comment, the toolbar code looks like this:

Code < Phone: phoneapplicationpage. ApplicationBar >

<Shell: ApplicationBarIsvisible= "True"Ismenuenabled= "True">

<Shell: applicationbariconbuttonIconuri= "/Images/appbar_button1.png"Text= "Button 1"/>

<Shell: applicationbariconbuttonIconuri= "/Images/appbar_button2.png"Text= "Button 2"/>

<Shell: ApplicationBar. menuitems>

<Shell: applicationbarmenuitemText= "Menuitem 1"/>

<Shell: applicationbarmenuitemText= "Menuitem 2"/>

</Shell: ApplicationBar. menuitems>

</Shell: ApplicationBar>

</Phone: phoneapplicationpage. ApplicationBar>

If you have deleted the XML namespace in the header of the page, that is, the Code (Make Sure You Have not deleted the reference to the Assembly ):

Xmlns: Phone = "CLR-namespace: Microsoft. Phone. controls; Assembly = Microsoft. Phone"
Xmlns: shell = "CLR-namespace: Microsoft. Phone. Shell; Assembly = Microsoft. Phone"

Once you add a toolbar to the program, you can see that Visual Studio intelligently adjusts the design height attribute of the program to 72 pixels. That is the height of the toolbar. Now let's talk about the system tray.

Windows PhoneSystem Tray

You may have noticed that when you run the program, you can see the clock, Wi-Fi signal strength, battery life, and so on. This is because the system tray is opened by default. If you don't pay attention to the information (or you need the 32-pixel space), you can set its isvisible attribute to false.

Shell: systemtray. isvisible = "false"

 

Add an icon to the toolbar

If you have read the toolbar code, you may notice that it points to two images that are not currently in your project. If you run the program, you will see that each applicationbariconbutton displays an X icon. We can create several images for each button, add them to the project, and reference them in those codes, right? Of course. But there is another simpler method, expression blend. Open your project in expression blend and navigate to the "objects and timeline" tree until you find those applicationbariconbutton objects.

When you select any applicationbariconbutton, check the attribute tag. You will see a simple way to set each icon and text. As follows:

If you open the iconuri drop-down box, you will see many standard icons that can be used in the program. Unless you have a set of custom icons, you must do not need them. These icons can meet most of your needs (of course you can create your own icons and manually add them ). After you select one, it automatically adds the white version to your project. "Jeff, why only white ?" Good question. I will talk about it right away. If you do not perform a drill in blend, you can refer to the one-mark list (forgive me for being too long ).

Why only white icons exist?

The Windows Phone product group makes your life so simple. You only need to create a version icon, and others will be automatically processed. Therefore, when you provide a white icon for a dark topic, it automatically converts it to black when you use a light icon. You can give it a try! Select an icon in the list to view your project structure. Now there is only one image in your project. The operating system automatically changes the white icon to black when you need it.

Make these buttons really valid

Now, you have beautiful buttons in your program, but it won't do anything when you click them. At this time, they are the same as other things in your XAML file. You need to add a click event and an event handler in The Post code to them. Below is the code for the XAML and C # Of this simple program:

XAML

Code < Shell: applicationbariconbutton X: Name = "Addbutton" Iconuri = "/Icons/appbar.add.rest.png" Text = "Add" Click = "Addbutton_click" />
< Shell: applicationbariconbutton X: Name = "Subtractbutton" Iconuri = "/Icons/appbar.minus.rest.png" Text = "Subtract" Click = "Subtractbutton_click" />  

C #

Code Private   Void Addbutton_click ( Object Sender, eventargs E)

{

Counter. Text=(Int32.parse (counter. Text. tostring ())+ 1). Tostring ();

}

Private VoidSubtractbutton_click (ObjectSender, eventargs E)

{

Counter. Text=(Int32.parse (counter. Text. tostring ())- 1). Tostring ();

}

What are the menu items with text?

Another good question. If you run the program, you may find that when you click the ellipsis icon, the toolbar expands and displays some menu options. If you use the default code above, you can write "menuitem 1" and "menuitem 2 ". They work in a similar way as the icon button. When you click a button, the event handler is triggered. The following figure shows how the toolbar is expanded in the example Program (under two themes ):

Download Sample Code

Let's take a look at the complete sample program. Download it hereSource code. Add or subtract 1 to 0 in the center of the screen. The zoom-in and zoom-in buttons increase or decrease the font size of the number. I believe this example of how to create a toolbar in Windows Phone 7 will be very helpful.

Address: http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-6-Application-Bar.aspx