背水一戰 Windows 10 之 控制項（導航類）: AppBar, CommandBar ...
背水一戰 Windows 10 (40) - 控制項（導航類）: AppBar, CommandBar
作者：webabcd
介紹
背水一戰 Windows 10 之 控制項（導航類）
- AppBar
- CommandBar
示例
1、AppBar 的示例
Controls/NavigationControl/AppBarDemo.xaml
<Page x:Class="Windows10.Controls.NavigationControl.AppBarDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.NavigationControl" 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="10 0 10 10"> <CheckBox Name="chkIsSticky" Margin="5" Content="IsSticky" IsChecked="False" Checked="chkIsSticky_Checked" Unchecked="chkIsSticky_Unchecked" /> <CheckBox Name="chkIsCompact" Margin="5" Content="IsCompact" IsChecked="False" Checked="chkIsCompact_Checked" Unchecked="chkIsCompact_Unchecked" /> <StackPanel Margin="5" Orientation="Horizontal"> <RadioButton Name="radioButtonMinimal" GroupName="myGroup" IsChecked="True" Content="AppBarClosedDisplayMode.Minimal" Checked="radioButtonMinimal_Checked" /> <RadioButton Name="radioButtonHidden" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Hidden" Checked="radioButtonHidden_Checked" /> <RadioButton Name="radioButtonCompact" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Compact" Checked="radioButtonCompact_Checked" /> </StackPanel> <Button Name="btnOpen" Margin="5" Content="打開 AppBar" Click="btnOpen_Click" /> <Button Name="btnClose" Margin="5" Content="關閉 AppBar" Click="btnClose_Click" /> </StackPanel> </Grid> <!-- Page.BottomAppBar - 下方應用程式欄控制項 Page.TopAppBar - 上方應用程式欄控制項 AppBar - 應用程式欄控制項 IsOpen - 是否打開 AppBar IsSticky - 是否是粘性的 AppBar（即在點擊非 AppBar 區域時，是否不會關閉 AppBar），預設值 false ClosedDisplayMode - 應用程式欄關閉狀態下的顯示模式 Minimal - 最小化模式，只顯示省略號，此值為預設值（CommandBar 的 ClosedDisplayMode 的預設值為 Compact） Hidden - 隱藏 Compact - 顯示 icon，但是不會給 label 留出位置 Opening, Opened, Closing, Closed - 幾個事件，不解釋 --> <Page.BottomAppBar> <AppBar x:Name="appBar"> <StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Left"> <!-- 關於 AppBarButton 請參見 /Controls/ButtonControl/AppBarButtonDemo.xaml 關於 AppBarToggleButton 請參見 /Controls/ButtonControl/AppBarToggleButtonDemo.xaml --> <AppBarButton Icon="Play" Label="SymbolIcon" /> <AppBarSeparator /> <AppBarToggleButton Label="BitmapIcon" > <AppBarToggleButton.Icon> <BitmapIcon UriSource="ms-appx:///Assets/StoreLogo.png"/> </AppBarToggleButton.Icon> </AppBarToggleButton> <AppBarSeparator /> <!-- AppBarButton 是支持 Flyout 的 --> <AppBarButton Icon="Add" Label="Add"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="MenuFlyout Item 1"/> <MenuFlyoutItem Text="MenuFlyout Item 2"/> <MenuFlyoutItem Text="MenuFlyout Item 3"/> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> <AppBarSeparator /> <!-- AppBar 內可以包含任意元素 --> <TextBlock Text="abc" /> </StackPanel> </AppBar> </Page.BottomAppBar> </Page>
Controls/NavigationControl/AppBarDemo.xaml.cs
/* * AppBar - 應用程式欄控制項（繼承自 ContentControl, 請參見 /Controls/BaseControl/ContentControlDemo/） * * * 註： * 1、當應用程式欄只有實現了 ICommandBarElement 介面（AppBarButton, AppBarToggleButton, AppBarSeparator）的控制項的時候建議使用 CommandBar（文檔推薦在 uwp 中使用 CommandBar） * 文檔說 uwp 中的 CommandBar 內可以包含非 ICommandBarElement 介面的控制項，但是實測發現並不可以 * 2、如果除了實現了 ICommandBarElement 介面（AppBarButton, AppBarToggleButton, AppBarSeparator）的控制項之外，應用程式欄還需要其他元素，則需要使用 AppBar */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.NavigationControl { 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 chkIsSticky_Checked(object sender, RoutedEventArgs e) { // 點擊非 AppBar 區域時，不會關閉 AppBar appBar.IsSticky = true; } private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e) { // 點擊非 AppBar 區域時，關閉 AppBar appBar.IsSticky = 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 - 只顯示按鈕圖標 // false - 顯示按鈕圖標和按鈕文本 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; } } } private void radioButtonMinimal_Checked(object sender, RoutedEventArgs e) { if (appBar != null) appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal; } private void radioButtonHidden_Checked(object sender, RoutedEventArgs e) { if (appBar != null) appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden; } private void radioButtonCompact_Checked(object sender, RoutedEventArgs e) { if (appBar != null) appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact; } } }
2、CommandBar 的示例
Controls/NavigationControl/CommandBarDemo.xaml
<Page x:Class="Windows10.Controls.NavigationControl.CommandBarDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.NavigationControl" 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="10 0 10 10"> <CheckBox Name="chkIsSticky" Margin="5" Content="IsSticky" IsChecked="False" Checked="chkIsSticky_Checked" Unchecked="chkIsSticky_Unchecked" /> <StackPanel Margin="5" Orientation="Horizontal"> <RadioButton Name="radioButtonMinimal" GroupName="myGroup" Content="AppBarClosedDisplayMode.Minimal" Checked="radioButtonMinimal_Checked" /> <RadioButton Name="radioButtonHidden" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Hidden" Checked="radioButtonHidden_Checked" /> <RadioButton Name="radioButtonCompact" GroupName="myGroup" Margin="10 0 0 0" IsChecked="True" Content="AppBarClosedDisplayMode.Compact" Checked="radioButtonCompact_Checked" /> </StackPanel> <Button Name="btnOpen" Margin="5" Content="打開 CommandBar" Click="btnOpen_Click" /> <Button Name="btnClose" Margin="5" Content="關閉 CommandBar" Click="btnClose_Click" /> </StackPanel> </Grid> <!-- Page.BottomAppBar - 下方應用程式欄控制項 Page.TopAppBar - 上方應用程式欄控制項 CommandBar - 應用程式欄控制項。相對於 AppBar 來說， CommandBar 易用性強，擴展性弱（在 CommandBar 內只能包含 AppBarButton, AppBarToggleButton, AppBarSeparator）。CommandBar 繼承自 AppBar IsOpen - 是否打開 CommandBar IsSticky - 是否是粘性的 CommandBar（即在點擊非 CommandBar 區域時，是否不會關閉 CommandBar），預設值 false ClosedDisplayMode - 應用程式欄關閉狀態下的顯示模式 Minimal - 最小化模式，只顯示省略號 Hidden - 隱藏 Compact - 顯示 PrimaryCommands 中的按鈕的 icon，但不顯示其 label，且 SecondaryCommands 中的按鈕不會顯示，此值為預設值（AppBar 的 ClosedDisplayMode 的預設值為 Minimal） Opening, Opened, Closing, Closed - 幾個事件，不解釋 註：無法手動設置 CommandBar 中的 AppBarButton, AppBarToggleButton, AppBarSeparator 的 IsCompact 屬性，其如何設置由系統自己決定（比如 Compact 模式的關閉狀態的 CommandBar 會隱藏 label，打開狀態的 CommandBar 會顯示 label） --> <Page.BottomAppBar> <CommandBar x:Name="commandBar"> <!-- 關於 AppBarButton 請參見 /Controls/ButtonControl/AppBarButtonDemo.xaml 關於 AppBarToggleButton 請參見 /Controls/ButtonControl/AppBarToggleButtonDemo.xaml --> <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" /> <AppBarSeparator/> <!-- AppBarButton 是支持 Flyout 的 --> <AppBarButton Icon="Add" Label="Add"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="MenuFlyout Item 1"/> <MenuFlyoutItem Text="MenuFlyout Item 2"/> <MenuFlyoutItem Text="MenuFlyout Item 3"/> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> <!-- CommandBar.PrimaryCommands - 其內的按鈕會顯示在 CommandBar 內部的右側（[ContentProperty(Name = "PrimaryCommands")]） CommandBar.SecondaryCommands - 其內的按鈕會顯示在 CommandBar 的上部（只顯示 label，不顯示 icon） --> <CommandBar.SecondaryCommands> <AppBarButton Icon="Like" Label="Like" /> <AppBarButton Icon="Dislike" Label="Dislike" /> </CommandBar.SecondaryCommands> <!-- 設置 CommandBar 或 AppBar 的 Style 自然是通過 AppBar.Style 那麼如何設置 CommandBar.SecondaryCommands 的樣式呢？可以通過 CommandBar.CommandBarOverflowPresenterStyle --> <CommandBar.CommandBarOverflowPresenterStyle> <Style TargetType="CommandBarOverflowPresenter"> <Setter Property="Background" Value="Black" /> </Style> </CommandBar.CommandBarOverflowPresenterStyle> </CommandBar> </Page.BottomAppBar> </Page>
Controls/NavigationControl/CommandBarDemo.xaml.cs
/* * CommandBar - 應用程式欄控制項。相對於 AppBar 來說， CommandBar 易用性強，擴展性弱（繼承自 AppBar, 請參見 /Controls/NavigationControl/AppBarDemo.xaml） * * 註： * 1、當應用程式欄只有實現了 ICommandBarElement 介面（AppBarButton, AppBarToggleButton, AppBarSeparator）的控制項的時候建議使用 CommandBar（文檔推薦在 uwp 中使用 CommandBar） * 文檔說 uwp 中的 CommandBar 內可以包含非 ICommandBarElement 介面的控制項，但是實測發現並不可以 * 2、如果除了實現了 ICommandBarElement 介面（AppBarButton, AppBarToggleButton, AppBarSeparator）的控制項之外，應用程式欄還需要其他元素，則需要使用 AppBar */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.NavigationControl { 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; } private void chkIsSticky_Checked(object sender, RoutedEventArgs e) { // 點擊非 CommandBar 區域時，不會關閉 CommandBar commandBar.IsSticky = true; } private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e) { // 點擊非 CommandBar 區域時，關閉 CommandBar commandBar.IsSticky = false; } private void radioButtonMinimal_Checked(object sender, RoutedEventArgs e) { if (commandBar != null) commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal; } private void radioButtonHidden_Checked(object sender, RoutedEventArgs e) { if (commandBar != null) commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden; } private void radioButtonCompact_Checked(object sender, RoutedEventArgs e) { if (commandBar != null) commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact; } } }
3、AppBarButton 的示例
Controls/ButtonControl/AppBarButtonDemo.xaml
<Page x:Class="Windows10.Controls.ButtonControl.AppBarButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> <!-- AppBarButton - 程式欄按鈕控制項（關於此控制項的應用場景請參見：/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml） Label - 顯示的文本 Icon - 顯示的圖標（IconElement 類型，關於 IconElement 請參見 /Controls/IconControl/IconElementDemo.xaml） IsCompact - 是否是緊湊模式，即是否不顯示 Label 指定的文本（預設值 false） --> <!-- 直接指定 Icon 為一個 Symbol 枚舉值，此時所設置的是 SymbolIcon --> <AppBarButton Name="appBarButton1" Icon="Accept" Label="accept" Margin="5" /> <!-- 需要設置 Icon 為一個 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 類型的話，可以這樣設置 --> <AppBarButton Name="appBarButton2" Label="find" IsCompact="True" Margin="5"> <AppBarButton.Icon> <FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="✓" /> </AppBarButton.Icon> </AppBarButton> <!-- AppBarButton 是支持 Flyout 的 --> <AppBarButton Icon="Add" Label="Add" Margin="5"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="MenuFlyout Item 1"/> <MenuFlyoutItem Text="MenuFlyout Item 2"/> <MenuFlyoutItem Text="MenuFlyout Item 3"/> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> </StackPanel> </Grid> </Page>
4、AppBarToggleButton 的示例
Controls/ButtonControl/AppBarToggleButtonDemo.xaml
<Page x:Class="Windows10.Controls.ButtonControl.AppBarToggleButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> <!-- AppBarToggleButton - 程式欄可切換狀態的按鈕控制項（關於此控制項的應用場景請參見：/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml） Label - 顯示的文本 Icon - 顯示的圖標（IconElement 類型，關於 IconElement 請參見 /Controls/IconControl/IconElementDemo.xaml） IsCompact - 是否是緊湊模式，即是否不顯示 Label 指定的文本（預設值 false） --> <!-- 直接指定 Icon 為一個 Symbol 枚舉值，此時所設置的是 SymbolIcon --> <AppBarToggleButton Name="appBarToggleButton1" Icon="Accept" Label="accept" Margin="5" /> <!-- 需要設置 Icon 為一個 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 類型的話，可以這樣設置 --> <AppBarToggleButton Name="appBarToggleButton2" Label="find" IsCompact="True" Margin="5"> <AppBarToggleButton.Icon> <FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="✓" /> </AppBarToggleButton.Icon> </AppBarToggleButton> </StackPanel> </Grid> </Page>
OK
[源碼下載]
