如何在Windows 8.1中创建类似于内置应用程序的Top AppBar?

时间:2013-11-13 14:03:52

标签: xaml microsoft-metro windows-8.1 appbar

内置的Windows 8.1应用程序,如体育旅行等,使用酷炫的顶级多级AppBar。它几乎看起来像是在任何应用程序中使用的某种标准UserControl,但我没有找到任何指南,如何在我的应用程序中添加它。
这真的是某种通用appbar,还是仅在Microsoft应用中使用的自定义AppBar?基本的CommandBar没有我所知道的这种样式。

Top AppBar

2 个答案:

答案 0 :(得分:0)

WP 8.1中有AppBar控件,但您可能需要设置其布局和样式。但您可以从默认样式开始。考虑下面的应用栏示例,我添加了几个主命令和一个辅助命令

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Left" Margin="471,258,0,0" TextWrapping="Wrap" Text="Demo AppBar" FontSize="32" VerticalAlignment="Top" Height="64" Width="314"/>

    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="Accept" Label="Save"/>
                <AppBarButton Icon="Cancel" Label="Cancel"/>
                <AppBarSeparator />
                <AppBarButton Icon="Add" Label="Add New" />
            </CommandBar.PrimaryCommands>

            <CommandBar.SecondaryCommands>
                <AppBarButton Label="About">
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="/Assets/Logo.scale-100.png" />
                    </AppBarButton.Icon>
                </AppBarButton>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

您可以查看Windows 8.1 app bar sample

答案 1 :(得分:0)

还在尝试,但我想这是让它看起来像内置应用程序的解决方案: Tutorial for a Top AppBar / NavigationBar

你可以在opf中放置你想要的任何GUI元素“AppBar”,甚至可以在右键单击推出的AppBars。所以你必须右键单击它2次以获得所有菜单。

它看起来完全一样,因为MS在它自己的工作室中完成了所有工作。我不认为有任何来源,因为功能是可能的,但外观应该不同。他们明确地建议以不同的方式设计AppBar,以便在他们的风格指南中创建一个很棒的应用程序。