与众不同 windows phone (3) - Application Bar（应用程序栏）

原文:与众不同 windows phone (3) - Application Bar（应用程序栏）

[索引页]
[源码下载]

与众不同 windows phone (3) - Application Bar（应用程序栏）

作者：webabcd

介绍
与众不同 windows phone 7.5 (sdk 7.1) 之应用程序栏

• 概述
• XAML 方式生成 AppBar
• Code 方式生成并更新 AppBar
• Resource 方式加载 AppBar

示例
1、AppBar 的 概述
Summary.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.ApplicationBarDemo.Summary"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <TextBlock TextWrapping="Wrap">
            <Run>AplicationBar 概述</Run>
            <LineBreak />
            <LineBreak />
            <Run>1、自带图标地址在类似如下的地址：C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\</Run>
            <LineBreak />
            <Run>2、ApBar 图标大小 48*48，核心图像 26*26 以便不与圆圈重叠（圆圈由系统自动绘制）</Run>
            <LineBreak />
            <Run>3、设计图标时注意：以白色为透明背景色，这样系统会对不同主题背景（现在有两种，深和浅）自动适应</Run>
            <LineBreak />
            <Run>4、DefaultSize 的 ApBar 高度为 72 像素；Minimized 的 ApBAr 高度为 30 像素</Run>
            <LineBreak />
            <Run>5、DefaultSize 的 ApBar 默认不会显示按钮的提示文本，需要单击右侧三个圆点后才会显示</Run>
        </TextBlock>

    </Grid>

</phone:PhoneApplicationPage>

2、演示 XAML 方式生成 AppBar
XAMLDemo.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.ApplicationBarDemo.XAMLDemo"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.ApplicationBar>

        <!--
            ApplicationBar - 应用程序栏
                Mode - 应用程序栏的样式。ApplicationBarMode.Default：默认（显示图标）；ApplicationBarMode.Minimized：最小化（右侧有3个圆点，用于提示单击可弹出 ApBar）
                IsVisible - 是否显示 ApBar
                IsMenuEnabled - 是否显示 ApBar 的 MenuItem
                BackgroundColor - AppBar 的背景色
                ForegroundColor - AppBar 的前景色

            ApplicationBarIconButton - ApBar 的 IconButon
                IconUri - 按钮图标的地址
                Text - 用于描述按钮功能的文本
                Click - 单击按钮后所触发的事件

            ApplicationBarMenuItem - ApBar 的 MenuItem
                Text - 菜单项的文本
                Click - 单击菜单项后所触发的事件
        -->        

        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="False" IsVisible="True" BackgroundColor="Blue" ForegroundColor="AntiqueWhite">

            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.add.rest.png" Text="添加" Click="ApplicationBarIconButton_Click" />
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.delete.rest.png" Text="删除" Click="ApplicationBarIconButton_Click" />
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.save.rest.png" Text="保存" Click="ApplicationBarIconButton_Click" />
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.download.rest.png" Text="下载" Click="ApplicationBarIconButton_Click" />

            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="menu item 1" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 2" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 3" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 4" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 5" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 6" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="menu item 7" Click="ApplicationBarMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

XAMLDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Demo.ApplicationBarDemo
{
    public partial class XAMLDemo : PhoneApplicationPage
    {
        public XAMLDemo()
        {
            InitializeComponent();
        }

        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("选择的 IconButton 是：" + ((ApplicationBarIconButton)sender).Text);
        }

        private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            MessageBox.Show("选择的 MenuItem 是：" + ((ApplicationBarMenuItem)sender).Text);
        }
    }
}

3、演示 Code 方式生成并更新 AppBar
CodeDemo.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.ApplicationBarDemo.CodeDemo"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <StackPanel Orientation="Vertical">

        <!--用于演示动态改变 ApBar 的 Mode-->
        <TextBlock Text="设置 ApplicationBarMode" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="ModeChanged" Name="btnDefaultSize" Content="DefaultSize 模式" />
            <RadioButton Checked="ModeChanged" Name="btnMinimized" Content="Minimized 模式" />
        </StackPanel>

        <!--用于演示动态改变 ApBar 的 IsVisible-->
        <TextBlock Text="是否显示" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="VisibilityChanged" Name="btnVisible" Content="显示" />
            <RadioButton Checked="VisibilityChanged" Name="btnHidden" Content="隐藏" />
        </StackPanel>

    </StackPanel>

</phone:PhoneApplicationPage>

CodeDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Demo.ApplicationBarDemo
{
    public partial class CodeDemo : PhoneApplicationPage
    {
        public CodeDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(CodeDemo_Loaded);
        }

        void CodeDemo_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * ApplicationBar - 应用程序栏
             *     Mode - 应用程序栏的样式。ApplicationBarMode.Default：默认（显示图标）；ApplicationBarMode.Minimized：最小化（右侧有3个圆点，用于提示单击可弹出 ApBar）
             *     IsVisible - 是否显示 ApBar
             *     IsMenuEnabled - 是否显示 ApBar 的 MenuItem
             *     BackgroundColor - AppBar 的背景色
             *     ForegroundColor - AppBar 的前景色
             *
             * ApplicationBarIconButton - ApBar 的 IconButon
             *     Buttons - IconButon 的集合
             *     IconUri - 按钮图标的地址
             *     Text - 用于描述按钮功能的文本
             *     Click - 单击按钮后所触发的事件
             *
             * ApplicationBarMenuItem - ApBar 的 MenuItem
             *     MenuItems - MenuItem 的集合
             *     Text - 菜单项的文本
             *     Click - 单击菜单项后所触发的事件
             */

            ApplicationBar = new ApplicationBar();

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

            ApplicationBarIconButton btnAdd = new ApplicationBarIconButton();
            btnAdd.IconUri = new Uri("/ApplicationBarDemo/Assets/appbar.add.rest.png", UriKind.Relative);
            btnAdd.Text = "添加";
            btnAdd.Click += delegate { MessageBox.Show("选择了 添加 按钮"); };
            ApplicationBar.Buttons.Add(btnAdd);

            ApplicationBarMenuItem item1 = new ApplicationBarMenuItem();
            item1.Text = "menu item 1";
            item1.Click += delegate { MessageBox.Show("选择了 menu item 1 菜单"); };
            ApplicationBar.MenuItems.Add(item1);

            btnDefaultSize.IsChecked = true;
            btnVisible.IsChecked = true;
        }

        // 动态修改该 AppBar 的 Mode
        private void ModeChanged(object sender, RoutedEventArgs e)
        {
            string option = ((RadioButton)sender).Name;
            switch (option)
            {
                case "btnDefaultSize":
                    ApplicationBar.Mode = ApplicationBarMode.Default;
                    break;
                case "btnMinimized":
                    ApplicationBar.Mode = ApplicationBarMode.Minimized;
                    break;
            }
        }

        // 动态修改该 AppBar 的 IsVisible
        private void VisibilityChanged(object sender, RoutedEventArgs e)
        {
            string option = ((RadioButton)sender).Name;
            switch (option)
            {
                case "btnVisible":
                    ApplicationBar.IsVisible = true;
                    break;
                case "btnHidden":
                    ApplicationBar.IsVisible = false;
                    break;
            }
        }
    }
}

4、演示 Resource 方式加载 AppBar
App.xaml

    <Application.Resources>

        <shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.add.rest.png" Text="添加" />
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.delete.rest.png" Text="删除" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1" />
                <shell:ApplicationBarMenuItem Text="MenuItem 2" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

        <shell:ApplicationBar x:Key="AppBar2" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.save.rest.png" Text="保存" />
            <shell:ApplicationBarIconButton IconUri="/ApplicationBarDemo/Assets/appbar.download.rest.png" Text="下载" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 3" />
                <shell:ApplicationBarMenuItem Text="MenuItem 4" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

    </Application.Resources>

ResourceDemo.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.ApplicationBarDemo.ResourceDemo"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"

    ApplicationBar = "{StaticResource AppBar1}">
    <!--以资源集合中的名为 AppBar1 的资源来配置此页的 AplicationBar（XAML 方式）-->

    <StackPanel Orientation="Vertical">
        <!--用资源集合中的资源来配置此页的 AplicationBar（Code 方式）-->
        <Button Name="btnAppBar1" Content="AppBar1" Click="btnAppBar1_Click" />
        <Button Name="btnAppBar2" Content="AppBar2" Click="btnAppBar2_Click" />
    </StackPanel>

</phone:PhoneApplicationPage>

ResourceDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Demo.ApplicationBarDemo
{
    public partial class ResourceDemo : PhoneApplicationPage
    {
        public ResourceDemo()
        {
            InitializeComponent();
        }

        private void btnAppBar1_Click(object sender, RoutedEventArgs e)
        {
            // 以资源集合中的名为 AppBar1 的资源来配置此页的 AplicationBar（Code 方式）
            ApplicationBar = ((ApplicationBar)Application.Current.Resources["AppBar1"]);
        }

        private void btnAppBar2_Click(object sender, RoutedEventArgs e)
        {
            // 以资源集合中的名为 AppBar2 的资源来配置此页的 AplicationBar（Code 方式）
            ApplicationBar = ((ApplicationBar)Application.Current.Resources["AppBar2"]);
        }
    }
}

OK
[源码下载]