與眾不同 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
[源碼下載]