C# uwp change "Splitview.Content" in MVVM

Question

To be honest I somehow have a hard time with MVVM. To be more exact I have a hard time with creating/changing pages in MVVM.

This is my MainPage containing my SplitView:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!--#region Splitview-->
    <Grid.RowDefinitions >
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <RelativePanel >
        <Button 
                FontFamily="Segoe MDL2 Assets" 
                Content="&#xE700;" 
                FontSize="30"/>
    </RelativePanel>
    <SplitView Grid.Row="1"
               x:Name="SplitView" 
               DisplayMode="CompactOverlay"
               IsPaneOpen="False" 
               CompactPaneLength="49" 
               OpenPaneLength="160"
               PaneBackground="DarkGray"
               >
        <SplitView.Pane>
            <StackPanel>
                <ListBox SelectionMode="Single"
                         x:Name="lbHamburgerMenue"
                         Background="Gray"
                         HorizontalAlignment="Left">
                    <ListBoxItem Margin="0,5,0,2.5"
                                 Background="DarkGray">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE72D;"
                                       FontSize="30"
                                       VerticalAlignment="Center"/>
                            <TextBlock Margin="15,0,0,0"
                                       Text="Home" 
                                       FontSize="20" 
                                       VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Margin="0,2.5,0,2.5"
                                 Background="DarkGray">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE72D;"
                                       FontSize="30"
                                       VerticalAlignment="Center"/>
                            <TextBlock Margin="15,0,0,0" 
                                       Text="New Movie" 
                                       FontSize="20" 
                                       VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>

            <!--#endregion-->
            <!--#region  content area-->
            <Grid Grid.Row="1" Grid.Column="1" >
            </Grid>
        </SplitView.Content>
    </SplitView>
</Grid>

For the Content I am kinda lost. How do I get a View displayed when another ListBox.Item gets selected? I know I need a Frame and inside that Frame the View has to be, but I would like some help in that regard because I am stuck here. (or with views in MVVM in general).

Answer 1

Yes, you are correct on your first assumption. You need to replace your GridView in the SplitView.Content section with a Frame. Then when you want to navigate to a particular view, you call Frame.Navigate.

For MVVM to keep your main page ViewModel from having intimate knowledge of your views, you can define a NavigationService that encapsulates page and view structure and the view types.

Here is a good article about the basics of MVVM and building a NavigationService: https://msdn.microsoft.com/en-us/magazine/jj651572.aspx (go to 'Setting up Navigation' section).

Another great description from StackOverflow: Navigating to a new page from the View Model in Windows Phone 8.1 universal app.