AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

快速构建Windows 8风格应用24-App Bar构建

2017-11-16 953
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

本篇博文主要介绍构建AppBar基本步骤、如何构建AppBar、如何在AppBar中构建上下文命令、如何在AppBar中构建菜单、如何构建页面间共享AppBar。

构建应用栏的目的的显示导航、命令和始终隐藏不需要的使用的工具。我们可以把应用栏放在页面顶部或底部或同时存在顶部和底部。

默认情况在AppBar是隐藏的，当用户单击右键、按下Win+Z、或从屏幕的顶部或底部边缘轻松时可显示或关闭AppBar。当然我们也可以通过编程的方式将AppBar设置为当用户做选择或与应用交互时显示。

 

构建AppBar基本步骤

通常我们构建一个应用的AppBar，只需要三步就可以完成：

1

如何构建AppBar

应用中添加AppBar,需要将AppBar控件指定给Page的TopAppBar或BottomAppBar属性。

XAML代码可如下：

<Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource EditAppBarButtonStyle}" />
                    <Button Style="{StaticResource RemoveAppBarButtonStyle}" />
                    <Button Style="{StaticResource AddAppBarButtonStyle}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource RefreshAppBarButtonStyle}" />
                    <Button Style="{StaticResource HelpAppBarButtonStyle}" />
                </StackPanel>
            </Grid>
        </AppBar>
</Page.BottomAppBar>

XAML代码中引用的资源样式可以在应用程序解决方案的Common文件夹中StandardStyles.xaml文件中找到。

运行效果：

2

若我们想在加载页面时打开AppBar，可以在XAML代码中将AppBar控件的IsOpen属性值设置为true，也可以在C#代码中控制打开AppBar。

private void OpenButton_Click(object sender, RoutedEventArgs e)
{
    topAppBar.IsOpen = true;
}

 

当用户在应用的AppBar以外任何位置进行交互时，默认情况会解除AppBar进行隐藏。我们可以将IsSticky属性值设置为true来改变解除模式。

此时用户只有右击、按下Win+Z、或从屏幕的顶部或底部边缘轻扫时才会隐藏AppBar。

private void StickyButton_Click(object sender, RoutedEventArgs e)
{
    bottomAppBar.IsSticky = true;
}

如何在AppBar中构建上下文命令 

我们可能有一些图像编辑命令，并且这些命令只有在图像选中时才有用。或者我们可能有一个全局AppBar,其中某些命令尽在相关页面中显示。这时就需要我们控制上下文命令了。

首先在应用的页面中用户可选择控制上下文命令的方式。具体步骤如下：

1）向应用中添加AppBar；

2）为要显示或隐藏的命令或组进行命名。

XAML代码可如下：

<AppBar IsOpen="True" IsSticky="True">
    <Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <StackPanel x:Name="pinCommands" Orientation="Horizontal"
                        Visibility="Collapsed">
                <Button Style="{StaticResource UnpinAppBarButtonStyle}" 
                        Click="Button_Click"/>
                <Button Style="{StaticResource PinAppBarButtonStyle}" 
                        Click="Button_Click"/>
                <Rectangle Height="50" Width="2" Fill="LightGray"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button Style="{StaticResource FavoriteAppBarButtonStyle}" 
                        Click="Button_Click"/>
                <Button Style="{StaticResource SearchAppBarButtonStyle}" 
                        Click="Button_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</AppBar>

 

然后可以在C#代码中通过命令或组的Visibility属性进行控制显示或隐藏。

pinCommands.Visibility = Visibility.Visible;
或
pinCommands.Visibility = Visibility.Collapsed;

 

另外我们也可以通过编程的方式向AppBar中添加命令。通常在页面之间共享AppBar并且具有仅应用与某一特定页面时，才这样做。

首先我们可以添加一个底部AppBar：

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True">
        <Grid>
            <StackPanel x:Name="rightPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource AppBarButtonStyle}" 
                        Content="&#xE174;" 
                        AutomationProperties.Name="Sort"
                        AutomationProperties.AutomationId="SortButton"
                        Click="SortMenuButton_Click" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

 

我们需要在C#代码中控制的是当页面OnNavigatedTo方法执行的时将Button添加在AppBar中，OnNavigatingFrom方法执行时将Button从AppBar中删除。

Button addButton = null;
 
protected override void OnNavigatedTo(NavigationEventArgs e)
{  
    if (rightPanel != null)
    {
        addButton = new Button();
       
        addButton.Style = (Style)App.Current.Resources["AddAppBarButtonStyle"];
       
        addButton.Click += Button_Click;
     
        rightPanel.Children.Add(addButton);
    }
}
 
private void Button_Click(object sender, RoutedEventArgs e)
{
    
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (rightPanel != null)
    {      
        addButton.Click -= Button_Click;
       
        rightPanel.Children.Remove(addButton);
    }
}

如何在AppBar中构建菜单

将多个命令添加到AppBar中时，我们可以考虑构建菜单来提供更多选项。例如：

3

我们如何构建这种菜单效果呢？

1）应用中添加AppBar，其中包含一个用于显示菜单的按钮。

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True">
        <Grid>
            <StackPanel x:Name="rightPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource AppBarButtonStyle}" 
                        Content="&#xE174;" 
                        AutomationProperties.Name="Sort"
                        AutomationProperties.AutomationId="SortButton"
                        Click="SortMenuButton_Click" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

 

2）页面C#代码，SortMenuButton_Click方法中创建一个Popup来放置菜单。

Popup popUp = new Popup();

将Popup.IsLightDismissEnabled属性设置为true，实现用户与应用其他部分交互时，Popup会自动隐藏。

popUp.IsLightDismissEnabled = true;

 

将面板创建为菜单UI的根目录。

StackPanel panel = new StackPanel();
panel.Background = bottomAppBar.Background;
panel.Height = 140;
panel.Width = 180;

 

菜单UI中添加命令按钮。

Button byRatingButton = new Button();
byRatingButton.Content = "By rating";
byRatingButton.Style = (Style)App.Current.Resources["TextButtonStyle"];
byRatingButton.Margin = new Thickness(20, 5, 20, 5);
byRatingButton.Click += SortButton_Click;
panel.Children.Add(byRatingButton);

 

将菜单跟面板添加为Popup的内容。

popUp.Child = panel;

 

计算Popup弹出后的位置。

popUp.HorizontalOffset = Window.Current.CoreWindow.Bounds.Right - panel.Width - 4;
popUp.VerticalOffset = Window.Current.CoreWindow.Bounds.Bottom - bottomAppBar.ActualHeight - panel.Height - 4;

 

最后打开Popup。

popUp.IsOpen = true;

如何构建页面间共享AppBar

我们应用中可能通过顶部提供一个导航栏，进行页面之间的切换。因此我们希望每个页面中显示相同的导航栏而不是在每个页面中重新构建该导航栏，例如新浪微博中顶部导航栏效果：

4

那么是如何实现共享AppBar呢？

使用根页面来承载共享AppBar和一个Frame，其中Frame来承载用户导航到的应用页面。

<Page.TopAppBar>
    <AppBar x:Name="globalAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel x:Name="leftCommandPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="Back" Style="{StaticResource BackAppBarButtonStyle}"
                        AutomationProperties.Name="Back"  
                        Click="Back_Click"/>
            </StackPanel>
            <StackPanel x:Name="rightCommandPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button x:Name="page1Button" Content="1" 
                        Style="{StaticResource AppBarButtonStyle}"
                        AutomationProperties.Name="Page 1"  
                        Click="Page1Button_Click"/>
                <Button x:Name="page2Button" Content="2" 
                        Style="{StaticResource AppBarButtonStyle}"
                        AutomationProperties.Name="Page 2"  
                        Click="Page2Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.TopAppBar>

 

根页面中添加一个Frame。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Frame x:Name="frame1"/>
</Grid>

 

C#代码中添加用于在页面见导航的命令。

Page rootPage = null;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    rootPage = e.Parameter as Page;
    frame1.Navigate(typeof(Page1), this);
}
 
private void Back_Click(object sender, RoutedEventArgs e)
{
    if (frame1.CanGoBack)
    {
        frame1.GoBack();
    }
    else if (rootPage != null && rootPage.Frame.CanGoBack)
    {
        rootPage.Frame.GoBack();
    }
}
 
private void Page1Button_Click(object sender, RoutedEventArgs e)
{
    frame1.Navigate(typeof(Page1), this);
}
 
private void Page2Button_Click(object sender, RoutedEventArgs e)
{
    frame1.Navigate(typeof(Page2), this);
}

 

最后运行效果：

5

点击“Page3”按钮后跳转到Page3页面，点击“Page2”按钮后跳转到Page2页面。

相关AppBar示例代码可从该链接中下载：http://code.msdn.microsoft.com/windowsapps/XAML-AppBar-control-sample-2aa1cbb4/。





 本文转自 王祖康 51CTO博客，原文链接：http://blog.51cto.com/wzk89/1053296，如需转载请自行联系原作者


文章标签：
C#
Windows
关键词：
APP应用
Windows应用
APP Windows
Windows App
Windows构建
技术小胖子
目录
相关文章
前端徐徐
|
1天前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么？揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理，重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本，通过初始化、检查更新、下载更新、验证签名和安装更新等步骤，确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理，确保更新高效且安全。
前端徐徐
11 4
Windows Electron 应用更新的原理是什么？揭秘 NsisUpdater
前端徐徐
|
23天前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的？
本文首发于微信公众号“前端徐徐”，作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件，涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容，并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容，读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
前端徐徐
94 0
郑小健
|
1月前
|
监控 安全 Apache
构建安全的URL重定向策略：确保从Web到App平滑过渡的最佳实践
【10月更文挑战第2天】URL重定向是Web开发中常见的操作，它允许服务器根据请求的URL将用户重定向到另一个URL。然而，如果重定向过程没有得到妥善处理，可能会导致安全漏洞，如开放重定向攻击。因此，确保重定向过程的安全性至关重要。
郑小健
59 0
Codelinghu
|
1月前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
Codelinghu
40 0
土木林森
|
3月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞：解锁Windows Presentation Foundation应用新维度，探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实（AR）与虚拟现实（VR）技术正迅速改变生活和工作方式，在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation（WPF）环境中实现AR/VR功能，通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR，但借助第三方库如Unity、Vuforia或OpenVR，可实现沉浸式体验。例如，通过Unity和Vuforia在WPF中创建AR应用，或利用OpenVR在WPF中集成VR功能，从而提升用户体验并拓展应用功能边界。
土木林森
64 0
nomasp
|
存储 Windows 容器
Windows App开发之文件与数据
nomasp
1834 0
nomasp
|
Windows
【万里征程——Windows App开发】文件&amp;数据——文件选取器
nomasp
1371 0
nomasp
|
存储 Windows
【万里征程——Windows App开发】文件&amp;数据——写入与读取
nomasp
1564 0
nomasp
|
Windows
【万里征程——Windows App开发】文件&amp;数据——获取文件属性
nomasp
1242 0
nomasp
|
Windows
【万里征程——Windows App开发】文件&amp;数据——读取文件/文件夹名
nomasp
1450 0