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

Question

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

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

或者每个页面都应该是不同的并且是一个骨头页面。 每个页面都将导航窗格作为用户控件引用（因此在此实例中，导航栏将是用户控件中的导航栏）。

此外，我想创建一个顶部导航栏，当应用程序处于320px（停靠）并且左侧导航栏消失时出现 - 如果不同用户控件之间的两个不同的导航栏？ 或者通过视觉状态转换直观地操纵一个会更好吗？ 您有什么推荐的吗？

非常感谢

Answer 1

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

一个简单的Grid将完成这项工作。 我们假设你有一个viewmodel; 所以，像这样：

<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>

这看起来像这样：

祝你好运！

Answer 2

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

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