Windows phone7 Study Notes 07-system tray and application bar

　　System Tray

The System Tray only shows the status of some systems. Sometimes we need to hide it and use the following code:

this.SetValue(SystemTray.IsVisibleProperty，！(bool)this.GetValue(SystemTray.IsVisibleProperty))；

Do not forget to introduce the Microsoft. Phone. Shell namespace.

Application bar

1. Use XAML to generate the application bar

The page template that comes with the Windows Phone SDK contains the XAML in the commented out sample application bar. Uncomment The XAML to create the application bar. For example:

<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>

You can use the added, deleted, and modified content. You must modify the attribute of the referenced image to the content.

2. Use C # To generate the application bar

Sometimes the application bar needs to change some settings of the application bar based on user operations, so that the application bar generated through XAML won't work, so the application bar needs to be generated through C.

(1) Add Microsoft. Phone. shell to the top of the Code.

using Microsoft.Phone.Shell;

(2) In the page constructor, add the following code after calling initializecomponent. This code initializes a new ApplicationBar object and assigns it to the ApplicationBar attribute on the page.

ApplicationBar = new ApplicationBar();

(3) set the properties of the application bar.

ApplicationBar.Mode = ApplicationBarMode.Default;
ApplicationBar.Opacity = 1.0; 
ApplicationBar.IsVisible = true;
ApplicationBar.IsMenuEnabled = true;

(4) create one or more applicationbariconbutton objects as needed. Set the icon image and button text, and then add them to the application bar. If you do not set the button text, a running exception occurs.

ApplicationBarIconButton button1 = new ApplicationBarIconButton();
button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
button1.Text = "button 1";
ApplicationBar.Buttons.Add(button1);

(5) menu items are optional. Create one or more applicationbarmenuitem objects as needed. Set text and add them to the application bar.

ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
menuItem1.Text = "menu item 1";
ApplicationBar.MenuItems.Add(menuItem1);

(6) The following is an example of a completed application bar.

public MainPage()
{
    InitializeComponent();

    ApplicationBar = new ApplicationBar();

    ApplicationBar.Mode = ApplicationBarMode.Default;
    ApplicationBar.Opacity = 1.0; 
    ApplicationBar.IsVisible = true;
    ApplicationBar.IsMenuEnabled = true;

    ApplicationBarIconButton button1 = new ApplicationBarIconButton();
    button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
    button1.Text = "button 1";
    ApplicationBar.Buttons.Add(button1);

    ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
    menuItem1.Text = "menu item 1";
    ApplicationBar.MenuItems.Add(menuItem1);
}

(7) For each icon button and menu item, determine the event to be called when the user clicks. The following is an example of the application bar that confirms the click event from the previous process.

ApplicationBarIconButton button1 = new ApplicationBarIconButton();
button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
button1.Text = "button 1";
ApplicationBar.Buttons.Add(button1);
button1.Click += new EventHandler(button1_Click);

ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
menuItem1.Text = "menu item 1";
ApplicationBar.MenuItems.Add(menuItem1);
menuItem1.Click += new EventHandler(menuItem1_Click);

(8) For each icon button and menu item, add the event to be called when the user clicks. Add code to the page class. The following is an example of a click event from the application bar of the previous process.

private void button1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button 1 works!");
//Do work for your application here.
}

private void menuItem1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Menu item 1 works!");
//Do work for your application here.
}

3. Transparency

Transparency can be set to 0 to 1, but 0, 0.5, or 1 is recommended. For example:

shell：ApplicationBar IsVisible=“True” IsMenuEnabled=“True” Opacity=“0.5”

4. Use expression blend to create the application bar

(1) unbind the annotated ApplicationBar first;

(2) Right-click the page and use expression blend to open it;

　　

 

(3) open this page and you will see the objects and Timeline panel on the left side of expression blend;

　　

 

(4) For the content of the above panel, Microsoft adds two applicationbariconbutton (up to four) and two applicationbarmenuitem for us by default. Edit the content of the four nodes below, and add click events and image content for it. Click the first applicationbarmenuitem. The display chart in the middle is automatically located and displayed, as shown in:

　　

 

(5) Move the Angle of View to the upper right corner, and select the first tab: element attribute. There are two selection icons on the far right of the Panel. As shown in, the basic attributes of the Blue Arrow code element (including name and text. Other UIS have more attributes, which are not described here). The red arrow represents the event of the element;

　　

 

(6) Now I understand some basic principles. Let's change the name to "aboutapplicationbar ". Then, change the corresponding text to "about ". Go to the Event Panel and double-click it. It will automatically generate an event handle in the CS code, like this:

　　

 

(7) change the following applicationbarmenuitem to the "view image" menu based on the preceding operations. The following is the applicationbariconbutton. The specific operation is the same as above. The only difference is that applicationbariconbutton requires an image resource. You can easily add image resources for it using expresssion blend, these image resources are all images recommended by Microsoft. When applicationbariconbutton is selected, you will see that the Panel attribute has one more attribute than the preceding menuitem. For example, this attribute is an image address, and it is a drop-down box that allows us to choose from. Let's take a look at the figure:

　　

　　

PS: these images are located at c: \ Program Files \ microsoft sdks \Windows Phone\ V7.0 \ icons directory.

　Supplement: (1)Because the application bar is not a Silverlight control and does not inherit from frameworkelement, the application bar does not support some common control functions, such as data binding. This means that you cannot change the icon buttons and menu items by using the name attribute in the XAML format. If you want to dynamically Modify text or icons at runtime, you should use C # Or Visual Basic to create the application bar. For details, refer to the above section for generating the application bar through C.

(2)In some cases, we need to provide general functions across the entire application. In this way, if the ApplicationBar is displayed one by one, the efficiency is very low, so we can write a general ApplicationBar, provided for the entire application.

Because it is provided for the whole application, You need to register in APP. XAML, such:

<! -- Register the application bar -->
<Shell: ApplicationBar X: Key = "mainappbar" isvisible = "true">
<! -- Menu item abou -->
<Shell: ApplicationBar. menuitems>
<Shell: applicationbarmenuitem text = "about" Click = "applicationbarmenuitem_click"/>
</Shell: ApplicationBar. menuitems>

<! -- Application bar button -->
<Shell: ApplicationBar. Buttons>
<Shell: applicationbariconbutton text = "Web" iconuri = "ie_icon.png" Click = "applicationbariconbutton_click"/>
<Shell: applicationbariconbutton text = "Images" iconuri = "pictures_icon.png" Click = "imageevent_click"/>
</Shell: ApplicationBar. Buttons>
</Shell: ApplicationBar>

Go to app. XAML. cs. In the automatically generated event, type the Code:

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            PhoneApplicationFrame root = Application.Current.RootVisual as PhoneApplicationFrame;
            root.Navigate(new Uri("/About", UriKind.Relative));
        }

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {

        }

private void ImageEvent_Click(object sender, EventArgs e)
        {
            PhoneApplicationFrame root = Application.Current.RootVisual as PhoneApplicationFrame;
            root.Navigate(new Uri("/Pictures",UriKind.Relative));
        }

In this way, the ApplicationBar has been registered. On the phone: phoneapplicationpage node on the page where the application bar needs to be displayed, specify the ApplicationBar source. For example, the method specified in this article:

<phone:PhoneApplicationPage 
    x:Class="DataBind.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    ApplicationBar="{StaticResource MainAppBar}"
    >

Okay. I have finished sorting it out. Please try again...

Reference: http://terryblog.blog.51cto.com/1764499/461551