导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

演练:在 Windows Phone 的普通页面上创建应用栏

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

在本演练中,您继续生成在演练:为 Windows Phone 创建应用栏测试应用主题中启动的应用程序。

本主题包括以下部分。

若要完成本演练,您必须完成演练:为 Windows Phone 创建应用栏测试应用主题中的过程。

在普通页面上创建应用程序栏的步骤

  1. “解决方案资源管理器”中,双击 PlainPage.xaml 以在设计器中打开它。

  2. 在 XAML 代码中,找到名为 TitlePanel 的 STACKPANEL 元素。将其替换为以下代码。该代码设置应用程序和页面标题。

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="App Bar Tester" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="plain page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    
  3. 找到默认情况下添加到您的页面的示例应用程序栏元素。该元素位于底部,已被注释掉。

  4. 将此示例应用程序栏元素替换为以下代码。该代码将创建应用程序栏。该代码创建四个按钮并使用您之前添加的图像作为图标。还创建两个菜单项。

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" Opacity="1.0" >
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save" Click="Button1_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/delete.png" Text="delete" Click="Button2_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/help.png" Text="help" Click="Button3_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings" Click="Button4_Click" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="get default size value" Click="MenuItem1_Click" />
                <shell:ApplicationBarMenuItem Text="get mini size value" Click="MenuItem2_Click" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  5. 找到名为 ContentPanel 的 GRID 元素并将其替换为以下代码。

    警告说明警告:

    请注意,不要删除后面紧跟 ContentPanel GRID 元素的 LayoutRoot GRID 元素的结尾标记。

    该代码创建应用程序的用户界面。它包含每个应用程序栏属性的单选按钮。当您单击单选按钮时,应用程序栏会动态更改,从而允许您测试不同的属性以及彼此之间的交互。

    <ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
    
            <TextBlock Text="foreground color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ForeColorChanged" Name="ForeNormal" Content="normal" />
                <RadioButton Checked="ForeColorChanged" Name="ForeAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="background color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="BackColorChanged" Name="BackNormal" Content="normal" />
                <RadioButton Checked="BackColorChanged" Name="BackAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="opacity" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="OpacityChanged" Name="One" Content="1.0" />
                <RadioButton Checked="OpacityChanged" Name="Half" Content="0.5" />
                <RadioButton Checked="OpacityChanged" Name="Zero" Content="0.0" />
            </StackPanel>
    
            <TextBlock Text="size mode (NEW PROPERTY!)" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ModeChanged" Name="DefaultSize" Content="default" />
                <RadioButton Checked="ModeChanged" Name="Mini" Content="mini" />
            </StackPanel>
    
            <TextBlock Text="menu items" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="MenuEnabledChanged" Name="Enabled" Content="enabled" />
                <RadioButton Checked="MenuEnabledChanged" Name="Disabled" Content="disabled" />
            </StackPanel>
    
            <TextBlock Text="visibility" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="VisibilityChanged" Name="Visible" Content="visible" />
                <RadioButton Checked="VisibilityChanged" Name="Hidden" Content="hidden" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
    
  6. 打开您页面的代码隐藏文件。在顶部,添加以下语句。

    using Microsoft.Phone.Shell;
    
  7. 在页面构造函数中,在对 InitializeComponent 的调用之后,添加以下代码。该代码设置应用程序栏属性的初始值。

    //Set the initial values for the Application Bar properties by checking the radio buttons.
    ForeNormal.IsChecked = true;
    BackNormal.IsChecked = true; 
    One.IsChecked = true;
    DefaultSize.IsChecked = true;
    Visible.IsChecked = true;
    Enabled.IsChecked = true;
    
  8. 在页面构造函数之后,添加下面的代码。这些是单选按钮单击事件处理程序。当您单击单选按钮时,该代码动态更改应用程序栏的属性。

    private void ForeColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "ForeNormal":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneForegroundColor"];
                break;
    
            case "ForeAccent":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
    
    private void BackColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "BackNormal":
                ApplicationBar.BackgroundColor = new Color() {A=0, R=0, G=0, B=0};
                break;
    
            case "BackAccent":
                ApplicationBar.BackgroundColor= (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
            
    private void OpacityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "One":
                ApplicationBar.Opacity = 1.0;
                break;
    
            case "Half":
                ApplicationBar.Opacity = 0.5;
                break;
    
            case "Zero":
                ApplicationBar.Opacity = 0.0;
                break;
        }
    }
    
    private void ModeChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "DefaultSize":
                ApplicationBar.Mode = ApplicationBarMode.Default;
                break;
    
            case "Mini":
                ApplicationBar.Mode = ApplicationBarMode.Minimized;
                break;
        }
    }
    
    private void VisibilityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Visible":
                ApplicationBar.IsVisible = true;
                break;
    
            case "Hidden":
                ApplicationBar.IsVisible = false;
                break;
        }
    }
    
    private void MenuEnabledChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Enabled":
                ApplicationBar.IsMenuEnabled = true;
                break;
    
            case "Disabled":
                ApplicationBar.IsMenuEnabled = false;
                break;
        }
    }
    
  9. 向页面中添加以下代码。这些是应用程序栏按钮和菜单项的单击事件处理程序。在该测试应用程序中,按钮和菜单项显示消息框。在实际的应用程序中,按钮和菜单项都将执行有用的工作。

    private void Button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 1 works!  Do something useful in your application.");
    }
    
    private void Button2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 2 works!  Do something useful in your application.");
    }
    
    private void Button3_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 3 works!  Do something useful in your application.");
    }
    
    private void Button4_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 4 works!  Do something useful in your application.");
    }
    
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The default Application Bar size is " + ApplicationBar.DefaultSize + " pixels.");
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The mini Application Bar size is " + ApplicationBar.MiniSize + " pixels.");
    }
    

在此过程中,您运行此应用程序以测试普通页面上的应用程序栏。

测试应用程序

  1. 在模拟器中启动您的应用程序。如有必要,使用第一个检查点中的说明。

    此应用程序会在模拟器中启动,并且显示主页面。

  2. 单击“普通页面”链接以导航到您刚刚创建的页面。

  3. 通过单击单选按钮试验不同的属性。某些属性更便于一起测试。例如,通过将背景属性设置为“个性色“即可测试不透明度属性。

  4. 通过单击每个图标按钮并确认显示消息框来测试图标按钮。

  5. 通过单击每个菜单项并确认显示消息框来测试菜单项。

  6. “调试”菜单上,单击“停止调试”。(F5)

若要继续生成此应用程序,请完成下面的一个或多个可选主题中的过程。不必按顺序完成这些过程。

您可以采用以下方式展开应用程序的功能。

显示:
© 2014 Microsoft