Windows8应用开发学习(四)AppBar
什么是AppBar?
AppBar可以用来显示导航,命令等,可以放在页面的顶部或底部,默认情况下AppBar是隐藏的,用户可以通过鼠标右键,Win+z或用手指从屏幕顶端或底端划过来显示或隐藏AppBar.
这是Windows应用商店顶端的AppBar,顶端AppBar通常用来做导航:
这是Windows8自带应用 “人脉” 底端的AppBar,底端AppBar通常用来显示命令按钮:
下面创建一个简单的拥有AppBar的应用,打开VS2012,FILE -> New -> Project -> Windows Store -> Blank App(XAML) -> 命名项目为 “AppBarDemo” -> OK.
MainPage.xaml:
1 <Page 2 x:Class="AppBarDemo.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:AppBarDemo" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d"> 9 <!--顶端AppBar--> 10 <Page.TopAppBar> 11 <AppBar IsSticky="True"> 12 <StackPanel Orientation="Horizontal"> 13 <!--这个Button以及之后的Button的样式都包含在Common文件夹下的StandardStyles.xaml文件中,这个文件为我们提供了很多AppBar按钮的样式,我们可以直接使用,也可以修改下使用--> 14 <Button Name="ToPage2Button" Click="ToPage2Button_Click" Style="{StaticResource GoAppBarButtonStyle}"/> 15 </StackPanel> 16 </AppBar> 17 </Page.TopAppBar> 18 <!--底端AppBar--> 19 <Page.BottomAppBar> 20 <AppBar> 21 <!--AppBar中只能容纳一个元素,我们想要在AppBar中放两个StackPanel需要用要给Grid去容纳这两个StackPanel--> 22 <Grid> 23 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> 24 <Button Name="GetResultsButton" Click="GetResultsButton_Click" Style="{StaticResource ShowResultsAppBarButtonStyle}"/> 25 </StackPanel> 26 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> 27 <Button Name="AddButton" Click="AddButton_Click" Style="{StaticResource AddAppBarButtonStyle}"/> 28 <Button Name="RemoveButton" Click="RemoveButton_Click" Style="{StaticResource RemoveAppBarButtonStyle}"/> 29 </StackPanel> 30 </Grid> 31 </AppBar> 32 </Page.BottomAppBar> 33 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 34 <TextBlock Name="DisplayTextBlock" FontSize="50" Text="This is a AppBar demo" VerticalAlignment="Center" HorizontalAlignment="Center"/> 35 </Grid> 36 </Page>
MainPage.xaml.cs:
1 namespace AppBarDemo 2 { 3 /// <summary> 4 /// An empty page that can be used on its own or navigated to within a Frame. 5 /// </summary> 6 public sealed partial class MainPage : Page 7 { 8 public MainPage() 9 { 10 this.InitializeComponent(); 11 } 12 13 private void GetResultsButton_Click(object sender, RoutedEventArgs e) 14 { 15 DisplayTextBlock.Text += "\nShow results button is clicked!"; 16 } 17 18 private void AddButton_Click(object sender, RoutedEventArgs e) 19 { 20 DisplayTextBlock.Text += "\nAdd button is clicked!"; 21 } 22 23 private void RemoveButton_Click(object sender, RoutedEventArgs e) 24 { 25 DisplayTextBlock.Text += "\nRemove button is clicked!"; 26 } 27 } 28 }
按F5运行看下效果:
通过点击鼠标右键,Win+z或用手指从屏幕顶端或底端划过可使AppBar显示,点击AppBar中的按钮看下效果:
看下AppBar类的定义:
1 // Summary: 2 // Represents the container control that holds app UI components for commanding 3 // and experiences. 4 [MarshalingBehavior(MarshalingType.Agile)] 5 [Threading(ThreadingModel.Both)] 6 [Version(100794368)] 7 [WebHostHidden] 8 public class AppBar : ContentControl 9 { 10 // Summary: 11 // Initializes a new instance of the AppBar class. 12 public AppBar(); 13 14 // Summary: 15 // Gets or sets a value that indicates whether the AppBar is visible. 16 // 17 // Returns: 18 // True to display the AppBar and make it visible. False to hide the AppBar. 19 public bool IsOpen { get; set; } 20 // 21 // Summary: 22 // Identifies the IsOpen dependency property. 23 // 24 // Returns: 25 // The identifier for the IsOpen dependency property. 26 public static DependencyProperty IsOpenProperty { get; } 27 // 28 // Summary: 29 // Gets or sets a value that indicates whether the AppBar does not close on 30 // light dismiss. 31 // 32 // Returns: 33 // True if the AppBar does not close on light dismiss. False if the AppBar 34 // is hidden on light dismiss. 35 public bool IsSticky { get; set; } 36 // 37 // Summary: 38 // Identifies the IsSticky dependency property. 39 // 40 // Returns: 41 // The identifier for the IsSticky dependency property. 42 public static DependencyProperty IsStickyProperty { get; } 43 44 // Summary: 45 // Occurs when the AppBar changes from visible to hidden. 46 public event EventHandler<object> Closed; 47 // 48 // Summary: 49 // Occurs when the AppBar changes from hidden to visible. 50 public event EventHandler<object> Opened; 51 52 // Summary: 53 // Invoked when the AppBar changes from visible to hidden. 54 // 55 // Parameters: 56 // e: 57 // Event data for the event. 58 protected virtual void OnClosed(object e); 59 // 60 // Summary: 61 // Invoked when the AppBar changes from hidden to visible, or is first displayed. 62 // 63 // Parameters: 64 // e: 65 // Event data for the event. 66 protected virtual void OnOpened(object e); 67 }
可以看到有一个IsOpen和一个IsSticky属性,可以通过从后台代码中把IsOpen设置为true来打开AppBar. AppBar默认是在用户与AppBar以外的部分进行交互时,AppBar自动隐藏,例如当AppBar在打开状态时,用鼠标左键点击应用的非AppBar部分,AppBar则会自动关闭,但将IsStick属性设置为true时,除非用户显式地点击鼠标右键或按Win+z, 或用手指从屏幕顶端或底端划过才会隐藏,否则AppBar会一直显示。给TopAppBar设置一个IsSticky属性,再运行,点击鼠标右键调出AppBar,在应用的非AppBar位置用鼠标左键点击以下,会发现BottomAppBar隐藏了,而TopAppBar还在。
同时AppBar还有一个Opened和一个Closed事件,可以在其中做一些事情。
更多关于AppBar的使用,可以参考以下链接: