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