重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar

本文轉載自查看原文 2014-05-05 08:31 3232 Windows Store Apps

作者：webabcd

介紹
重新想象 Windows 8.1 Store Apps 之新增控件

AppBar - 應用程序欄控件（新增了 AppBarButton, AppBarToggleButton, AppBarSeparator）
CommandBar - 應用程序欄控件（AppBar 簡化版）

示例
1、演示 AppBar 的應用
AppBarDemo.xaml

<Page
    x:Class="Windows81.Controls.AppBarDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <CheckBox Name="chkIsCompact" Content="IsCompact" IsChecked="False" Checked="chkIsCompact_Checked" Unchecked="chkIsCompact_Unchecked" />

            <Button Name="btnOpen" Content="打開 AppBar" Click="btnOpen_Click" Margin="0 10 0 0" />
            <Button Name="btnClose" Content="關閉 AppBar" Click="btnClose_Click" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>

    <!--
        AppBar 的 win8 時代的用法參見：http://www.cnblogs.com/webabcd/archive/2013/01/14/2859153.html
        其用法很怪異，到了 win8.1 時代終於正常了，以下會介紹 AppBar 在 win8.1 時代的用法
    
        在 win8.1 時代我們需要指定 AppBar 的按鈕的圖標和文本，系統會自動在圖標外面加個圈圈
    -->
    <Page.BottomAppBar>
        <AppBar x:Name="appBar" IsSticky="True" Padding="10,0">
            <StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Left">
                 
                <!--
                    AppBarButton - AppBar 中的 Button
                        Icon - 按鈕的圖標（可以指定一個圖片，也可以指定一個 Symbol enumeration）
                        Label - 按鈕的文本
                -->
                
                <!--
                    Icon 來自 Symbol enumeration，參見本文件夾中的 Symbol enumeration (Windows).mht 文件
                -->
                <AppBarButton Icon="Play" Label="SymbolIcon" />

                <!--
                    Icon 來自一個圖片
                -->
                <AppBarButton Label="BitmapIcon" >
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="ms-appx:///Assets/Logo.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>


                <!--
                    AppBarSeparator - AppBar 中的 分隔符
                -->
                <AppBarSeparator />


                <!--
                    AppBarToggleButton - AppBar 中的 ToggleButton
                        Icon - 按鈕的圖標（可以指定為一個 FontIcon 或 PathIcon）
                        Label - 按鈕的文本
                -->

                <!--
                    Icon 來自 FontIcon
                -->
                <AppBarToggleButton Label="FontIcon" >
                    <AppBarToggleButton.Icon>
                        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <!--
                    Icon 來自 PathIcon
                -->
                <AppBarToggleButton Label="PathIcon" >
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>
                
                <!--
                    AppBarButton, AppBarToggleButton, AppBarSeparator 有一個屬性：IsCompact - 是否使用緊湊按鈕，即是否隱藏按鈕文本（true - 只顯示按鈕圖標；false - 顯示按鈕圖標和按鈕文本）
                -->
                
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>
</Page>

AppBarDemo.xaml.cs

/*
 * AppBar - 應用程序欄控件
 * win8.1 的 AppBar 相對於 win8 有了增強，即增加了對 AppBarButton, AppBarToggleButton, AppBarSeparator 的支持
 * 
 * 本例主要介紹 win8.1 中的 AppBar 改進的地方，原有 AppBar 的知識點參見：http://www.cnblogs.com/webabcd/archive/2013/01/14/2859153.html
 * 
 * 注：
 * 1、當應用程序欄只有 AppBarButton, AppBarToggleButton, AppBarSeparator 的時候建議使用 CommandBar
 * 2、如果除了 AppBarButton, AppBarToggleButton, AppBarSeparator 之外，應用程序欄還需要其他元素，則需要使用 AppBar
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
    public sealed partial class AppBarDemo : Page
    {
        public AppBarDemo()
        {
            this.InitializeComponent();
        }

        private void btnOpen_Click(object sender, RoutedEventArgs e)
        {
            // 打開 AppBar
            appBar.IsOpen = true;
        }

        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            // 關閉 AppBar
            appBar.IsOpen = false;
        }

        private void chkIsCompact_Checked(object sender, RoutedEventArgs e)
        {
            var elements = buttonPanel.Children;
            foreach (var element in elements)
            {
                var button = element as ICommandBarElement;
                if (button != null)
                {
                    // IsCompact - 是否使用緊湊按鈕，即是否隱藏按鈕文本（來自 ICommandBarElement 接口。AppBarButton, AppBarToggleButton, AppBarSeparator 均實現了此接口）
                    //     true - 只顯示按鈕圖標（如果是 AppBarSeparator 的話會相對短一點）
                    //     false - 顯示按鈕圖標和按鈕文本（如果是 AppBarSeparator 的話會相對長一點）
                    button.IsCompact = true;
                }
            }
        }

        private void chkIsCompact_Unchecked(object sender, RoutedEventArgs e)
        {
            var elements = buttonPanel.Children;
            foreach (var element in elements)
            {
                var button = element as ICommandBarElement;
                if (button != null)
                {
                    button.IsCompact = false;
                }
            }
        }
    }
}

2、演示 CommandBar 的應用
CommandBarDemo.xaml

<Page
    x:Class="Windows81.Controls.CommandBarDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button Name="btnOpen" Content="打開 CommandBar" Click="btnOpen_Click" Margin="0 10 0 0" />
            <Button Name="btnClose" Content="關閉 CommandBar" Click="btnClose_Click" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>

    <!--
        CommandBar 是 win8.1 新增的應用程序欄控件
        其內只能包含 AppBarButton, AppBarToggleButton, AppBarSeparator，詳細用法參見 AppBarDemo.xaml
    
        AppBarButton, AppBarToggleButton, AppBarSeparator 有一個屬性：IsCompact - 是否使用緊湊按鈕，即是否隱藏按鈕文本（true - 只顯示按鈕圖標；false - 顯示按鈕圖標和按鈕文本）
        注：無法手動設置 CommandBar 中的 AppBarButton, AppBarToggleButton, AppBarSeparator 的 IsCompact 屬性，系統會根據當前窗口的大小自動設置此屬性
    -->
    <Page.BottomAppBar>
        <CommandBar x:Name="commandBar" IsSticky="True" Padding="10,0">
            <AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
            <AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
            <AppBarSeparator/>
            <AppBarButton Icon="Back" Label="Back" />
            <AppBarButton Icon="Stop" Label="Stop" />
            <AppBarButton Icon="Play" Label="Play" />
            <AppBarButton Icon="Forward" Label="Forward" />

            <!--
                CommandBar.PrimaryCommands - 其內的按鈕會顯示在 CommandBar 的右側
                CommandBar.SecondaryCommands - 其內的按鈕會顯示在 CommandBar 的左側
            
                注：上面直接寫在 CommandBar 中的按鈕會自動添加進 CommandBar.PrimaryCommands
            -->
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="Like" Label="Like" IsCompact="True" />
                <AppBarButton Icon="Dislike" Label="Dislike" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

CommandBarDemo.xaml.cs

/*
 * CommandBar - 應用程序欄控件（AppBar 簡化版）
 *
 * 注：
 * 1、當應用程序欄只有 AppBarButton, AppBarToggleButton, AppBarSeparator 的時候建議使用 CommandBar
 * 2、如果除了 AppBarButton, AppBarToggleButton, AppBarSeparator 之外，應用程序欄還需要其他元素，則需要使用 AppBar
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
    public sealed partial class CommandBarDemo : Page
    {
        public CommandBarDemo()
        {
            this.InitializeComponent();
        }

        private void btnOpen_Click(object sender, RoutedEventArgs e)
        {
            // 打開 CommandBar
            commandBar.IsOpen = true;
        }

        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            // 關閉 CommandBar
            commandBar.IsOpen = false;
        }
    }
}

OK
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。