Windows 8 应用开发 - 应用栏

     通过应用栏(AppBar)可以在需要时向用户显示各种应用命令。应用栏提供与用户当前页面或当前选定的内容相关的各种命令。默认情况下,应用栏处于隐藏状态。当用户沿屏幕边缘从顶部或底部用手指划动时会显示应用栏,还可以通过单击鼠标右键显示。在用户启动命令、点击应用界面或重复划动手势后,应用栏会自动消失。如果需要进行多选命令操作时,也可以以让应用栏始终可见。

IC561717

新建应用栏

以下边栏(BottomAppBar)为例,利用AppBar 控件编写一个具有文本编辑功能的应用栏。

<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Click="Edit_Button_Click"/>
                <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}"/>
                <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}"/>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

     从上面代码可以看出编写应用栏本身并没有什么复杂之处,而且应用栏中使用按键的风格在Win8 应用中也都提供了。在项目工程Common 文件夹中找到StandardStyles.xaml 里面有很多注释掉的ButtonStyle,在里面找到你需要的提出来即可。

编辑应用栏

     接下来,我们在应用界面中添加两个CheckBox:一个用来将应用栏固定,另一个用来新增或删除应用栏按键。

<StackPanel Orientation="Vertical" Grid.Row="1" Margin="120,50,0,0">
    <CheckBox x:Name="IsSticky" Content="IsSticky" Click="IsSticky_Click" />
    <CheckBox x:Name="AddHelpButton" Content="Add Help Button" Click="AddHelpButton_Click" />
</StackPanel>

image

     两个CheckBox 点击事件代码如下,当应用栏IsSticky 属性激活后,只能通过划动下边屏幕或鼠标右键将取消显示。

private void IsSticky_Click(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    AppBar ap = pageRoot.FindName("BottomAppBar") as AppBar;
    if (ap != null)
    {
        ap.IsSticky = (bool)cb.IsChecked;
    }
}

private void AddHelpButton_Click(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if ((bool)cb.IsChecked)
    {
        Button helpButton = new Button();
        helpButton.Name = "Help";
        helpButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
        RightPanel.Children.Add(helpButton);
    }
    else
    {
        RightPanel.Children.RemoveAt(1);
    }
}

screenshot_11132012_230534

源码下载

http://sdrv.ms/SSPQM2

posted @ 2012-11-13 23:11 Gnie 阅读(...) 评论(...) 编辑 收藏
Copyright © 2010 Gnie