Left navigation pane in a Windows 8.1 app

Question

I would like to create a UI in my Windows 8.1 app which loosely resembles the Xbox Music app, in that there will be a navigation pane on the left with buttons that toggle between different views (pages) within the app.

How should I structure it? Should I have a "master" page with the navigation pane embedded within it and then at runtime, when a nav button is clicked, load up the various different pages as UserControls (so each individual page is actually a user control).

Or should each page be distinct and a bone-fide page. Each page would reference the navigation pane as a usercontrol (so in this instance, the nav bar would be the one in the user control).

Also, I would like to create a top nav bar which appears when the app is at 320px (docked) and the left nav bar disappears - should the two different nav bars between different user controls? Or would it be better to just manipulate the one visually with a visual state transition? What do you recommend?

Many thanks

Answer 1

Since this is NOT a WinJS question, let me give you a XAML answer.

A simple Grid will get this done. Let's assume you have a viewmodel; so, something like this:

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

This would look like this:

Best of luck!

Answer 2

I suggest you use the flat layout pattern (http://msdn.microsoft.com/en-us/library/windows/apps/dn263196.aspx) for windows 8.1 with a NavBar.

Then set the NavBarContainer.layout property to vertical (http://msdn.microsoft.com/en-us/library/windows/apps/dn301873.aspx)