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:

View Code
 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:

View Code
 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类的定义:

View Code
 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的使用,可以参考以下链接:

如何跨页面共享应用栏

如何将上下文命令添加到应用栏

如何将菜单添加到应用栏

posted @ 2013-04-02 17:31  Allen Li  阅读(2043)  评论(1编辑  收藏  举报