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="True" IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton x:Name="appbarRewindButton" IconUri="/Images/appbar.transport.rew.rest.png" Text="重置" IsEnabled="False" Click="appbarRewindButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarPlayButton" IconUri="/Images/appbar.transport.play.rest.png" Text="開始"  IsEnabled="False" Click="appbarPlayButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarPauseButton" IconUri="/Images/appbar.transport.pause.rest.png" Text="暫定"  IsEnabled="False" Click="appbarPauseButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarEndButton" IconUri="/Images/appbar.transport.ff.rest.png" Text="結束"  IsEnabled="False" Click="appbarEndButton_Click"/>
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

從上面代碼中可以看到ApplicationBar有一個Buttons屬性，該屬性是該類的內容屬性，所以該屬性不是必須出現的，Buttons集合最 多可以包含四個ApplicationBarIconButton 對象，每個ApplicationBarIconButton 對象可以設置ICONURI，X：Name和Text，其中ICONURI表示路徑，Text表示說明文字；當你按下一個圖標時，該圖標會產生一定的偏 移，作爲操作反饋，如果按下省略號，則會把Text設置的文字進行顯示

如果你不希望ApplicationBar在開始時進行顯示，可以設置

<shell:ApplicationBar IsVisible="False">

ApplicationBar 也定義了前景色和背景色，如果改變了手機的主題顏色，那麼默認的ApplicationBar 顏色也會有改變

ApplicationBar 還可以設置Opacity屬性，默認情況下是1，此時ApplicationBar佔用頁面內容區域之外的區域空間，如果設置爲其他值比如0.5，此時 ApplicationBar則與頁面的其他內容共享空間，但是圖標總是在最前端顯示，文檔建議設置值爲1,0.5,0

 

<shell:ApplicationBar IsVisible="True" Opacity="0.5">

效果：

 

 

 從上面代碼中可以看到每個圖標都是被禁用的IsEnabled="False"，那麼怎麼從隱藏文件代碼設置禁用那，前面說過ApplicationBarIconButton 是在buttons集合中的所以我們可以用索引的形式獲得某個圖標，並設置屬性，比如最後一個圖標禁用可以這樣寫

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

 同理可以在隱藏代碼中設置其他的屬性值

 

下面是示例的主要代碼

xaml文件代碼：

 

View Code  <!--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" Background="DarkCyan">
            <MediaElement Name="mediaElement" Source="http://www.charlespetzold.com/Media/Walrus.wmv"
             AutoPlay="False" MediaFailed="mediaElement_MediaFailed" MediaOpened="mediaElement_MediaOpened"
             CurrentStateChanged="mediaElement_CurrentStateChanged"
             ></MediaElement>
            <!--顯示狀態-->
            <TextBlock x:Name="statusText" HorizontalAlignment="Left" VerticalAlignment="Bottom"></TextBlock>
            <!--顯示錯誤信息-->
            <TextBlock x:Name="errorText" HorizontalAlignment="Right" VerticalAlignment="Bottom" TextWrapping="Wrap"></TextBlock>
        </Grid>
    </Grid>

    <!--演示 ApplicationBar 用法的示例代碼-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton x:Name="appbarRewindButton" IconUri="/Images/appbar.transport.rew.rest.png" Text="重置" IsEnabled="False" Click="appbarRewindButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarPlayButton" IconUri="/Images/appbar.transport.play.rest.png" Text="開始"  IsEnabled="False" Click="appbarPlayButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarPauseButton" IconUri="/Images/appbar.transport.pause.rest.png" Text="暫定"  IsEnabled="False" Click="appbarPauseButton_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarEndButton" IconUri="/Images/appbar.transport.ff.rest.png" Text="結束"  IsEnabled="False" Click="appbarEndButton_Click"/>
            </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[3];
            appbarPauseButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons[2];
            appbarPlayButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons[1];
            appbarRewindButton = (ApplicationBarIconButton)this.ApplicationBar.Buttons[0];

        }
        /// <summary>
        /// 失敗時發生
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void mediaElement_MediaFailed(object sender, ExceptionRoutedEventArgs e)
        {
            eerrorText.Text = e.ErrorException.Message;
        }
        /// <summary>
        /// 打開時發生
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void mediaElement_MediaOpened(object sender, RoutedEventArgs e)
        {
            appbarRewindButton.IsEnabled = true;
            appbarEndButton.IsEnabled = true;

        }
        /// <summary>
        /// 狀態更改是發生
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></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;
        }
    }
}

效果圖：