13719654321 发表于 2018-6-27 10:14:29

windows phone (26) ApplicationBar应用程序栏


  在应用程序中,如果需要几个按钮或者菜单来执行一些普通的命令,就应该考虑使用ApplicationBar,因为silverlight并没有定义任何常用的菜单或者工具,我们通常称ApplicationBar为应用程序栏,该类定义在命名空间Microsoft.Phone.Shell中, 在改命名空间中还定义了ApplicationBarIconButton和ApplicationBarMenuItem,这些类都派生自Object 而非DeendecyObject,UIElement和FramworkElement类,严格的说ApplicationBar并不是可视化树的一部 分(未映射到xmlns),ApplicationBar对象在xaml文件中作为PhoneApplicationPage的ApplicationBar属性存 在,当手机水平放置或者垂直放置时都是一样的效果,且无法自定义ApplicationBar;ApplicationBar最多可以包含四个按钮,因为 一般使用图片进行设置按钮,这些按钮通常称之为图标,且图标一般为png格式,图标的宽和高都应为48像素,并通常是透明的;【作者:神舟龙】
  示例
  下面的示例就是实现一个简易的播放器,并且有播放,暂停,重新开始和转至结尾,四个功能图标,首先从新浪下载图标,参考书给的微软的下载地址已经删除 ,并在项目里建立一个Image文件,用于保存四个图片

  并 把每个图片的属性中的【生成操作】设置为内容,如果设置生成操作为Resource,ApplicationBar就无法智能的找到这些图像;因为 ApplicationBar不是标准的silverlight的一部分,因此XML命名空间声明需要将XML的“Shell”命名空间与.NET命名空 间Microsoft.Phone.Shell关联起来,标准的MainPage.xaml已经为我们做好了这些
  


[*]xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  

  下面就是设置这四个按钮,我们直接把IDE已经注释掉的部分重新启用,稍微改一下就ok
  


[*]<!--演示 ApplicationBar 用法的示例代码-->
[*]    <phone:PhoneApplicationPage.ApplicationBar>
[*]      <shell:ApplicationBar IsVisible=&quot;True&quot; IsMenuEnabled=&quot;True&quot;>
[*]            <shell:ApplicationBar.Buttons>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarRewindButton&quot; IconUri=&quot;/Images/appbar.transport.rew.rest.png&quot; Text=&quot;重置&quot; IsEnabled=&quot;False&quot; Click=&quot;appbarRewindButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarPlayButton&quot; IconUri=&quot;/Images/appbar.transport.play.rest.png&quot; Text=&quot;开始&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarPlayButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarPauseButton&quot; IconUri=&quot;/Images/appbar.transport.pause.rest.png&quot; Text=&quot;暂定&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarPauseButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarEndButton&quot; IconUri=&quot;/Images/appbar.transport.ff.rest.png&quot; Text=&quot;结束&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarEndButton_Click&quot;/>
[*]            </shell:ApplicationBar.Buttons>
[*]      </shell:ApplicationBar>
[*]    </phone:PhoneApplicationPage.ApplicationBar>
  

  从上面代码中可以看到ApplicationBar有一个Buttons属性,该属性是该类的内容属性,所以该属性不是必须出现的,Buttons集合最 多可以包含四个ApplicationBarIconButton 对象,每个ApplicationBarIconButton对象可以设置ICONURI,X:Name和Text,其中ICONURI表示路径,Text表示说明文字;当你按下一个图标时,该图标会产生一定的偏 移,作为操作反馈,如果按下省略号,则会把Text设置的文字进行显示
  

  
如果你不希望ApplicationBar在开始时进行显示,可以设置
  


[*]<shell:ApplicationBar IsVisible=&quot;False&quot;>
  

  ApplicationBar 也定义了前景色和背景色,如果改变了手机的主题颜色,那么默认的ApplicationBar 颜色也会有改变

ApplicationBar 还可以设置Opacity属性,默认情况下是1,此时ApplicationBar占用页面内容区域之外的区域空间,如果设置为其他值比如0.5,此时 ApplicationBar则与页面的其他内容共享空间,但是图标总是在最前端显示,文档建议设置值为1,0.5,0  


[*]<shell:ApplicationBar IsVisible=&quot;True&quot; Opacity=&quot;0.5&quot;>
  

  效果:

  从上面代码中可以看到每个图标都是被禁用的IsEnabled=&quot;False&quot;,那么怎么从隐藏文件代码设置禁用那,前面说过ApplicationBarIconButton 是在buttons集合中的所以我们可以用索引的形式获得某个图标,并设置属性,比如最后一个图标禁用可以这样写
  


[*]((ApplicationBarIconButton)this.ApplicationBar.Buttons).IsEnabled = false;
  

  同理可以在隐藏代码中设置其他的属性值
  下面是示例的主要代码
  xaml文件代码:
  


[*]View Code<!--LayoutRoot 是包含所有页面内容的根网格-->
[*]    <Grid x:Name=&quot;LayoutRoot&quot; Background=&quot;Transparent&quot;>
[*]      <Grid.RowDefinitions>
[*]            <RowDefinition Height=&quot;Auto&quot;/>
[*]            <RowDefinition Height=&quot;*&quot;/>
[*]      </Grid.RowDefinitions>
[*]
[*]      <!--TitlePanel 包含应用程序的名称和页标题-->
[*]      <StackPanel x:Name=&quot;TitlePanel&quot; Grid.Row=&quot;0&quot; Margin=&quot;12,17,0,28&quot;>
[*]            <TextBlock x:Name=&quot;ApplicationTitle&quot; Text=&quot;我的应用程序&quot; Style=&quot;{StaticResource PhoneTextNormalStyle}&quot;/>
[*]            <TextBlock x:Name=&quot;PageTitle&quot; Text=&quot;页面名称&quot; Margin=&quot;9,-7,0,0&quot; Style=&quot;{StaticResource PhoneTextTitle1Style}&quot;/>
[*]      </StackPanel>
[*]
[*]      <!--ContentPanel - 在此处放置其他内容-->
[*]      <Grid x:Name=&quot;ContentPanel&quot; Grid.Row=&quot;1&quot; Margin=&quot;12,0,12,0&quot; Background=&quot;DarkCyan&quot;>
[*]            <MediaElement Name=&quot;mediaElement&quot; Source=&quot;http://www.charlespetzold.com/Media/Walrus.wmv&quot;
[*]             AutoPlay=&quot;False&quot; MediaFailed=&quot;mediaElement_MediaFailed&quot; MediaOpened=&quot;mediaElement_MediaOpened&quot;
[*]             CurrentStateChanged=&quot;mediaElement_CurrentStateChanged&quot;
[*]             ></MediaElement>
[*]            <!--显示状态-->
[*]            <TextBlock x:Name=&quot;statusText&quot; HorizontalAlignment=&quot;Left&quot; VerticalAlignment=&quot;Bottom&quot;></TextBlock>
[*]            <!--显示错误信息-->
[*]            <TextBlock x:Name=&quot;errorText&quot; HorizontalAlignment=&quot;Right&quot; VerticalAlignment=&quot;Bottom&quot; TextWrapping=&quot;Wrap&quot;></TextBlock>
[*]      </Grid>
[*]    </Grid>
[*]
[*]    <!--演示 ApplicationBar 用法的示例代码-->
[*]    <phone:PhoneApplicationPage.ApplicationBar>
[*]      <shell:ApplicationBar IsVisible=&quot;True&quot;>
[*]            <shell:ApplicationBar.Buttons>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarRewindButton&quot; IconUri=&quot;/Images/appbar.transport.rew.rest.png&quot; Text=&quot;重置&quot; IsEnabled=&quot;False&quot; Click=&quot;appbarRewindButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarPlayButton&quot; IconUri=&quot;/Images/appbar.transport.play.rest.png&quot; Text=&quot;开始&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarPlayButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarPauseButton&quot; IconUri=&quot;/Images/appbar.transport.pause.rest.png&quot; Text=&quot;暂定&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarPauseButton_Click&quot;/>
[*]            <shell:ApplicationBarIconButton x:Name=&quot;appbarEndButton&quot; IconUri=&quot;/Images/appbar.transport.ff.rest.png&quot; Text=&quot;结束&quot;IsEnabled=&quot;False&quot; Click=&quot;appbarEndButton_Click&quot;/>
[*]            </shell:ApplicationBar.Buttons>
[*]      </shell:ApplicationBar>
[*]
[*]    </phone:PhoneApplicationPage.ApplicationBar>
  

  代码影藏文件,需要先引入命名空间
  


[*]using Microsoft.Phone.Shell;
  

  隐藏文件全部代码如下
  


[*]View Code 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;
[*]//ApplicationBarIconButton用到
[*]using Microsoft.Phone.Shell;
[*]
[*]namespace MoviePlayer
[*]{
[*]    public partial class MainPage : PhoneApplicationPage
[*]    {
[*]      // 构造函数
[*]      public MainPage()
[*]      {
[*]            InitializeComponent();
[*]            appbarEndButton=(ApplicationBarIconButton)this.ApplicationBar.Buttons;
[*]            appbarPauseButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons;
[*]            appbarPlayButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons;
[*]            appbarRewindButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons;
[*]
[*]      }
[*]      /// <summary>
[*]      /// 失败时发生
[*]      /// </summary>
[*]      /// <param name=&quot;sender&quot;></param>
[*]      /// <param name=&quot;e&quot;></param>
[*]      private void mediaElement_MediaFailed(object sender, ExceptionRoutedEventArgs e)
[*]      {
[*]            eerrorText.Text = e.ErrorException.Message;
[*]      }
[*]      /// <summary>
[*]      /// 打开时发生
[*]      /// </summary>
[*]      /// <param name=&quot;sender&quot;></param>
[*]      /// <param name=&quot;e&quot;></param>
[*]      private void mediaElement_MediaOpened(object sender, RoutedEventArgs e)
[*]      {
[*]            appbarRewindButton.IsEnabled = true;
[*]            appbarEndButton.IsEnabled = true;
[*]
[*]      }
[*]      /// <summary>
[*]      /// 状态更改是发生
[*]      /// </summary>
[*]      /// <param name=&quot;sender&quot;></param>
[*]      /// <param name=&quot;e&quot;></param>
[*]      private void mediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
[*]      {
[*]            statusText.Text = mediaElement.CurrentState.ToString();
[*]            if (mediaElement.CurrentState==MediaElementState.Stopped||mediaElement.CurrentState==MediaElementState.Paused)
[*]            {
[*]                appbarPlayButton.IsEnabled = true;
[*]                appbarPauseButton.IsEnabled = false;
[*]            }
[*]            else if (mediaElement.CurrentState==MediaElementState.Playing)
[*]            {
[*]                appbarPlayButton.IsEnabled = false;
[*]                appbarPauseButton.IsEnabled = true;
[*]            }
[*]      }
[*]      //重置
[*]      private void appbarRewindButton_Click(object sender, EventArgs e)
[*]      {
[*]            mediaElement.Position = TimeSpan.Zero;
[*]      }
[*]      //播放
[*]      private void appbarPlayButton_Click(object sender, EventArgs e)
[*]      {
[*]            mediaElement.Play();
[*]      }
[*]      //暂定
[*]      private void appbarPauseButton_Click(object sender, EventArgs e)
[*]      {
[*]            mediaElement.Pause();
[*]      }
[*]      //结束
[*]      private void appbarEndButton_Click(object sender, EventArgs e)
[*]      {
[*]            mediaElementmediaElement.Position = mediaElement.NaturalDuration.TimeSpan;
[*]      }
[*]    }
[*]}
  

  效果图:
页: [1]
查看完整版本: windows phone (26) ApplicationBar应用程序栏