WP7之Application Bar控件

  Microsoft.Phone.Shell命名空间中定义了ApplicationBar及其相关类（ApplicationBarIconButton和ApplicationBarMenuItem），这些类派生自Object,并完全独立于常规Silverlight编程中的DependencyObject,UIElement和FrameworkElement类层次结构。ApplicationBar最多能包含4个按钮，包含的图片通常是PNG文件，位图本身的宽高都是48像素，通常是透明的，实际图片应该是白色，在位图中间显示，是一个宽高均为26像素的正方形。

eg:

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.rew.rest.png" Text="上一首"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.play.rest.png" Text="播放"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.pause.rest.png" Text="暂停"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.ff.rest.png" Text="下一首"/>

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

这里非常重要的步骤是，需要将Images目录中的每一个位图文件的属性的Build Action 字段设置为Content，默认是Resource,如果是默认情况下，ApplicationBar无法智能地找到这些图像。

效果图：

当你点击省略号的时候，出现如下效果：

 

在这里，我们可以通过将ApplicationBarIconButton的IsEnabled属性设为false，从而禁用该按钮。

 

上面的2张图的第一个ApplicationBarIconButton的图片放错了。 

 

一般情况下，我们要访问这些按钮可以如下做：

(this.ApplicationBar.Button[2] as ApplicationBarIconButton).IsEnabled=true or false

 

我们改造前面的demo来实现一个播放网络视频的案例来进一步的学习ApplicationBar的使用。

 

 

XAML文件：

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

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="电影播放" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="恐怖片" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
         
            <MediaElement Name="mediaElement" Source="http://www.charlespetzold.com/Media/Walrus.wmv" AutoPlay="False" MediaOpened="onMediaElementOpened" MediaFailed="onMediaElementFailed" CurrentStateChanged="onMediaElementCurrentStateChanged"/>
           
            <TextBlock Name="statusText" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
            <TextBlock Name="errorText" HorizontalAlignment="Right" VerticalAlignment="Bottom" TextWrapping="Wrap"/>
        </Grid>
    </Grid>
 
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.rew.rest.png" Text="重置"    Click="onAppbarRewindClick" x:Name="appbarRewind" IsEnabled="False"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.play.rest.png" Text="播放" Click="onAppbarPlayClick" x:Name="appBarPlay" />
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.pause.rest.png" Text="暂停" Click="onAppbarPauseClick" x:Name="appBarPause" IsEnabled="False"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.ff.rest.png" Text="结束" Click="onAppbarEndClick" x:Name="appbarEnd" IsEnabled="False"/>

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

</phone:PhoneApplicationPage>

 

代码：

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 PhoneApp3
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();

            appbarRewind = this.ApplicationBar.Buttons[0] as ApplicationBarIconButton;
            appBarPlay = this.ApplicationBar.Buttons[1] as ApplicationBarIconButton;
            appBarPause = this.ApplicationBar.Buttons[2] as ApplicationBarIconButton;
            appbarEnd = this.ApplicationBar.Buttons[3] as ApplicationBarIconButton;
        }

        void onAppbarRewindClick(object sender, EventArgs args)
        {
            mediaElement.Position = TimeSpan.Zero;
        }

        void onAppbarPlayClick(object sender,EventArgs args) {

            mediaElement.Play();
        }

        void onAppbarPauseClick(object sender, EventArgs args)
        {

            mediaElement.Pause();
        }

        void onAppbarEndClick(object sender,EventArgs args) {
            mediaElement.Position = mediaElement.NaturalDuration.TimeSpan;
        }

        void onMediaElementFailed(object sender,ExceptionRoutedEventArgs args)
        {
            errorText.Text = args.ErrorException.Message;
        }

        void onMediaElementOpened(object sender, RoutedEventArgs args)
        {
            appbarEnd.IsEnabled = true;
            appbarRewind.IsEnabled = true;
        }

        void onMediaElementCurrentStateChanged(object sender, RoutedEventArgs ars)
        {
            statusText.Text = mediaElement.CurrentState.ToString();

            if (mediaElement.CurrentState == MediaElementState.Stopped || mediaElement.CurrentState == MediaElementState.Paused)
            {
                appBarPlay.IsEnabled = true;
                appBarPause.IsEnabled = false;

            }
            else if(mediaElement.CurrentState==MediaElementState.Playing)
            {
                appBarPause.IsEnabled = true;
                appBarPlay.IsEnabled = false;
            }

        }
    
    }
}

 

Enjoy yourself.