<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>

/* * 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;                }            }        }    }}

<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>

/* * 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;        }    }}