Windows 8.1 应用程序中的左侧导航窗格答案

【问题标题】：Left navigation pane in a Windows 8.1 appWindows 8.1 应用程序中的左侧导航窗格
【发布时间】：2013-11-18 13:42:13
【问题描述】：

我想在我的 Windows 8.1 应用程序中创建一个与 Xbox Music 应用程序大致相似的 UI，因为左侧会有一个导航窗格，其中的按钮可以在应用程序内的不同视图（页面）之间切换。

我应该如何构建它？我是否应该有一个嵌入了导航窗格的“主”页面，然后在运行时，当单击导航按钮时，将各种不同的页面加载为 UserControls（因此每个单独的页面实际上都是一个用户控件）。

或者每个页面都应该是不同的并且是一个真正的页面。每个页面都将导航窗格引用为用户控件（因此在这种情况下，导航栏将是用户控件中的导航栏）。

另外，我想创建一个顶部导航栏，当应用程序处于 320 像素（停靠）并且左侧导航栏消失时出现 - 不同用户控件之间的两个不同导航栏是否应该？还是仅通过视觉状态转换在视觉上操纵它会更好吗？你有什么推荐的？

非常感谢

【问题讨论】：

说实话，这取决于你，但我相信你可以通过Frames 做到这一点。创建您的主外部页面并在树中的某处创建一个Frame 作为子控件。然后，使用Frame.Navigate 并传入他们请求的Page 类型。我相信这就是 Samples 通常的做法。

标签： c# xaml windows-runtime winrt-xaml windows-8.1

【解决方案1】：

由于这不是 WinJS 问题，所以让我给你一个 XAML 答案。

一个简单的Grid 就可以完成这项工作。假设您有一个视图模型；所以，是这样的：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Rectangle Fill="SteelBlue" />
    <StackPanel Grid.Column="0">
        <TextBlock 
            Margin="20"
            Text="Playlists"
            Style="{StaticResource SubheaderTextBlockStyle}" />
        <ListView
            Margin="20,0,0,0"
            SelectionMode="Single"
            SelectedItem="{Binding SelectedPlaylist, Mode=TwoWay}"
            ItemsSource="{Binding Playlists}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border Height="25" Width="25" Background="White" />
                        <TextBlock 
                            Margin="10,0,0,0" LineHeight="0" FontWeight="Light"
                            Text="{Binding Title, FallbackValue='Sample Playlist Title'}"
                            VerticalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
            <x:String>Test</x:String>
        </ListView>
    </StackPanel>

    <Rectangle Grid.Column="1" Fill="LightSteelBlue" />
    <ContentControl Grid.Column="1" Content="{Binding SelectedPlaylist}">
        <ContentControl.ContentTemplate>
            <DataTemplate>
                <TextBlock 
                    Margin="40,60,0,0" 
                    Style="{StaticResource HeaderTextBlockStyle}"
                    Text="{Binding Title, FallbackValue='Sample Playlist Title'}" />
                <!-- TODO: -->
            </DataTemplate>
        </ContentControl.ContentTemplate>
    </ContentControl>

</Grid>

看起来像这样：

祝你好运！

【讨论】：

【解决方案2】：

我建议您使用带有 NavBar 的 windows 8.1 的平面布局模式 (http://msdn.microsoft.com/en-us/library/windows/apps/dn263196.aspx)。

然后将NavBarContainer.layout属性设置为垂直（http://msdn.microsoft.com/en-us/library/windows/apps/dn301873.aspx）

【讨论】：

问题是针对 WIndows 8.1 XAML 的。您如何为 C#/ XAML 执行 NavBarContainer.layout？