适用于 Windows 8 应用程序的 XAML 中的持久导航栏

Question

如何实现持久导航栏。基本上是一个应用栏，即使通过右键单击操作也无法关闭。 MS 在本文 (https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx) 中讨论计算器应用程序中的平面导航时以及在此处 (http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/) 在查看 Windows 8.1 中对 windows 商店应用程序的更改时提到了这一点。

Answer 1

这就是你的做法。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
        <Button Content="Home" />
        <Button Content="Products" />
        <Button Content="Contact" />
    </StackPanel>
    <Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>

祝你好运！

Answer 2

阅读您的问题后，我开始使用谷歌搜索，但找不到任何可用的应用栏。据我所知，没有什么能比得上持久的 App Bar。 IsSticky 属性在一定程度上确实有帮助，但仍然可以通过右键单击来解除。

但你仍然可以自己定制……

例如。你在你的问题中提到了this page。

你可以自己实现。

这是我的实现，只是为了让你开始......

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

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="120"/>
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="Green">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Orientation="Horizontal">
                <Rectangle Width="80" Height="80">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="Assets/windows-image.jpg" />    
                    </Rectangle.Fill>
                </Rectangle>

                <TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </StackPanel>
            <TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Rectangle Grid.Column="0" Width="110" Height="110">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="Assets/back.png" />
                </Rectangle.Fill>
            </Rectangle>

            <TextBlock  Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Grid>

        <Grid Grid.Row="2" >
            <TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
        </Grid>

    </Grid>
</Page>

它产生以下输出：

我还没有研究过相应的事件处理程序，我希望你能根据你的需要去做。

基本建议：不要尝试对已经可用的设计模板进行太多更改。坚持他们并只应用所需的更改。