原文:与众不同 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
[源码下载]

与众不同 windows phone (3) - Application Bar（应用程序栏）的更多相关文章

  1. Windows Phone 8.1 新特性 - 控件之应用程序栏

    2014年4月3日的微软Build 2014 大会上,Windows Phone 8.1 正式发布.相较于Windows Phone 8,不论从用户还是开发者的角度,都产生了很大的变化.接下来我们会用 ...

  2. Windows Phone 8.1 新功能 - 应用栏控件

    2014年4月3日的微软Build 2014 大会上.Windows Phone 8.1 正式公布. 相较于Windows Phone 8.不论从用户还是开发人员的角度,都产生了非常大的变化. 接下来 ...

  3. 与众不同 windows phone (16) - Media（媒体）之编辑图片, 保存图片到相册, 与图片的上下文菜单“应用程序...”和“共享...”关联, 与 Windows Phone 的图片中心集成

    原文:与众不同 windows phone (16) - Media(媒体)之编辑图片, 保存图片到相册, 与图片的上下文菜单"应用程序..."和"共享..." ...

  4. 与众不同 windows phone (27) - Feature（特性）之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏

    原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...

  5. 与众不同 windows phone (28) - Feature（特性）之手机方向, 本地化, 应用程序的试用体验, 系统主题资源, 本地数据的加密解密

    原文:与众不同 windows phone (28) - Feature(特性)之手机方向, 本地化, 应用程序的试用体验, 系统主题资源, 本地数据的加密解密 [索引页][源码下载] 与众不同 wi ...

  6. 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件

    [源码下载] 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件 作者:w ...

  7. 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议

    [源码下载] 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议 作者:webabcd 介绍与众不同 windows ...

  8. 与众不同 windows phone (15) - Media（媒体）之后台播放音频

    原文:与众不同 windows phone (15) - Media(媒体)之后台播放音频 [索引页][源码下载] 与众不同 windows phone (15) - Media(媒体)之后台播放音频 ...

  9. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

随机推荐

  1. 用Swift完成不同View Controller之间的切换

    之前用objective-c开发时,页面之间的切换很容易.其实用swift没有很大的变化,如果你是用storyboard完成的界面,基本上是同样的方式,只不过在代码部分写成swift风格的就行了. 今 ...

  2. AsyncTask使用须知

    AsyncTask的实现原理就是封装了的线程池,详细见AsyncTask实现原理. 在1.5中初始引入的时候, AsyncTask 运行( AsyncTask.execute() )起来是顺序的,当同 ...

  3. PHP - 将HTML代码转义

    代码: 页面显示: 页面源码:

  4. svn： keywords

    在文件头里面加入下面的关键字: $Date$ $ID$ $Revision$ $Author$ 代码在svn提交时,先选中这几个关键字再提交. Date可能出现中文乱码: 在Control Panel ...

  5. DeDeCMS中如何实现下拉菜单

    在5.7版本,已经有比较简单的方法实现下拉菜单,我们可以用它已有方法,也可以用我写的第二种方法来实现 1. 在需要下拉菜单的地方加入以下代码 <div id="navMenu" ...

  6. ZOJ 3609 求逆元

    Modular Inverse Time Limit: 2 Seconds      Memory Limit: 65536 KB The modular modular multiplicative ...

  7. Swift 初见

    http://numbbbbb.gitbooks.io/-the-swift-programming-language-/chapter1/02_a_swift_tour.html 本页内容包括: 简 ...

  8. Android NumberPicker和DatePicker分割线颜色设置

    NumberPicker /** * * 设置选择器的分割线颜色 * * @param numberPicker */ private void setDatePickerDividerColor(N ...

  9. WCF技术剖析之二十五: 元数据（Metadata）架构体系全景展现[元数据描述篇]

    原文:WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇] 在[WS标准篇]中我花了很大的篇幅介绍了WS-MEX以及与它相关的WS规范:WS-Policy.WS-Tra ...

  10. 基于visual Studio2013解决算法导论之001插入排序

     题目 插入排序 解决代码及点评 #include <stdio.h> #include <time.h> #include <stdlib.h> void ...