Windows Phone 7 toolbar (ApplicationBar)

The toolbar (ApplicationBar) is defined in "Microsoft. phone. in the shell namespace, the toolbar buttons (applicationbariconbutton) and toolbar menu (applicationbarmenuitem) are used. Each ApplicationBar can have up to four applicationbariconbuttons, but the applicationbarmenuitem can have more than four.

Create a Windows Phone project and open mainpage. in XAML, the code is commented out, that is, the XAML code of ApplicationBar. Remove the annotation mark and enter the correct iconuri (which will be explained later). The Code is as follows:

<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="/Images/dark/appbar.check.rest.png" Text="cancel" Click="ApplicationBarIconButton_Click"/>            <shell:ApplicationBarIconButton IconUri="/Images/dark/appbar.cancel.rest.png" Text="ok"/>            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>

Running Effect

Applicationbariconbutton is the circle-style button, and applicationbarmenuitem is the vertical text menu.

Applicationbariconbutton

The two important attributes of applicationbariconbutton are text and iconuri. Text is the text format and string type, while iconuri is the URI type. Generally, it is a relative path pointing to an image resource. This image has strict requirements. The overall size is 48*48, and the central image area (for example, the right icon area) is 26*26. It is recommended that the image be transparent in Beijing and should be greater than 48*48, the display range of ApplicationBar is exceeded, and the image area is greater than 26*26, which is beyond the circle. The Ampersand and errors are icons, and the circle does not belong to the icon and is an element in ApplicationBar. As long as applicationbariconbutton is added to the ApplicationBar, the circle is displayed, however, whether the icon is displayed depends on whether the set iconuri is correct or not. If an error occurs, the default error icon is displayed. For example, the iconuri of "OK" applicationbariconbutton is a wrong path. The result is as follows:

If you only want to learn, you do not have to create the applicationbariconbutton icon by yourself. If you have installed and developed the Windows Phone 7.1sdk, some default icons will be copied to your computer and C: \ Program Files \ microsoft sdks \ Windows Phone \ v7.1 \ icons. Do you see the dark and light folders? These are the applicationbariconbutton icons that come with the system, applicable to the Dark and Light themes (set the topic: "set"-> "topic"-> "background ").

Create a new folder images in the project and create two subfolders Dark and Light under it, from c: \ Program Files \ microsoft sdks \ Windows Phone \ v7.1 \ Documents (two copies) copy the image to the Dark and Light folders in the project, add the image to the project, and set the property to content. Just like the above code, you can enter the correct path to display it. The above only uses images under the dark file frame, and does not use images under the light. If you switch to the light topic background, it seems that the button color is okay. This is just a coincidence. In the light background, the default foregroundcolor of ApplicationBar is black, and the icon in the light folder is black, the icons in the dark folder are transparent, and the transparency and black are black. Therefore, in the light background, no matter whether you use the pictures in the light or the dark Q & A folder, they are all black, now the iconuri is changed to the image in the light folder and displayed

Let's take a look at the following content.

You can not only declare ApplicationBar using XAML, but also use code to create

string darkRight = "/Images/dark/appbar.check.rest.png";ApplicationBarIconButton btn = new ApplicationBarIconButton(new Uri(darkRight, UriKind.Relative));            btn.Text = "ok";            btn.Click += new EventHandler(btn_Click);            this.ApplicationBar.Buttons.Add(btn);

<shell:ApplicationBarIconButton IconUri="/Images/light/appbar.check.rest.png" Text="cancel" Click="ApplicationBarIconButton_Click"/>

The effects of the two methods are the same. To operate ApplicationBar in the code, you must first obtain it. If you are using the aplicationbar element created by the code, you can directly operate the variable, for the XAML declaration, use the following method to obtain the first to fourth buttons: 0, 1, 2, and 3.

var appbtn = this.ApplicationBar.Buttons[0] as ApplicationBarIconButton;

Applicationbarmenuitem

Applicationbarmenuitem is equivalent to a menu and only displays text information. The operation is similar to applicationbariconbutton. The code creation and acquisition methods are as follows:

ApplicationBarMenuItem menu = new ApplicationBarMenuItem();            menu.Text = "menu from code";            menu.Click += new EventHandler(menu_Click);            this.ApplicationBar.MenuItems.Add(menu);            var getMenu = this.ApplicationBar.MenuItems[0] as ApplicationBarMenuItem;

Applicationbarmenuitem and applicationbariconbutton both have a clcik event, which is triggered when clicked. There is nothing to say about this event, just like the Click Event of the button control.

Main attributes and events of ApplicationBar

Only one event is statechanged. This event is triggered when the ApplicationBar status changes. Click the three dots similar to the ellipsis in the upper right corner of ApplicationBar to display or hide menuitem, the second parameter passed in this event is of the applicationbarstatechangedeventargs type. The parameter has only one attribute, ismenuvisible, and is of the bool type, indicating whether menuitem is displayed. We can do something by status. The sample code is as follows:

 private void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)        {            if (e.IsMenuVisible)                MessageBox.Show("opened");            else                MessageBox.Show("colsed");        }

The most interesting attributes of ApplicationBar are foregroundcolor and backgroundcolor. foregroundcolor is the color on the value button, and foregroundcolor is the background color of the entire ApplicationBar. Some people may say that this is unnecessary, I can only say that you have misunderstood, buddy. I cannot tell clearly, this must be used with iconbutton images, especially transparent images. Set foregroundcolor = "blue" backgroundcolor = "green" with the transparent image in the dark folder. The effect is as follows:

Finally, we can use the system resource "phonedarkthemevisibility" to determine whether to use the dark background after the topic background is changed. If not, it must be a light background, because WP7 only has these two backgrounds. If it is a dark background, set the image path under the dark folder to iconuri and the light background, and set it to the image path under the light folder. The Code is as follows:

string darkRight = "/Images/dark/appbar.check.rest.png";        string darkCancel = "/Images/dark/appbar.cancel.rest.png";        string lightRight = "/Images/light/appbar.check.rest.png";        string lightCancel = "/Images/light/appbar.cancel.rest.png";        void MainPage_Loaded(object sender, RoutedEventArgs e)        {            Visibility darkBackgroundVisibility =           (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];            if (darkBackgroundVisibility == System.Windows.Visibility.Visible)            {                (this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(darkRight, UriKind.Relative);                (this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(darkCancel, UriKind.Relative);            }            else            {                (this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(lightRight, UriKind.Relative);                (this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(lightCancel, UriKind.Relative);            }        }

The above is just a simple solution. The actual code is definitely not written in this way. It will use a standard declaration method or change the resource file (you will know if you pay attention to me later) this is just a reference, please forgive me. In addition, if you have made a lot of skin for the software, remember to change the backgroundcolor and foregroundcolor of ApplicationBar when you switch the skin.