MVVM 中的 C# uwp 更改 "Splitview.Content"

Question

老实说，我在 MVVM 上遇到了一些困难。更确切地说，我很难在 MVVM 中使用 creating/changing 个页面。

这是包含我的 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>

对于内容我有点迷茫。如何在选择另一个 ListBox.Item 时显示视图？我知道我需要一个框架，并且视图必须在该框架内，但我需要这方面的帮助，因为我被困在这里。（或一般在 MVVM 中的视图）。

Answer 1

是的，您的第一个假设是正确的。您需要将 SplitView.Content 部分中的 GridView 替换为框架。然后当你想导航到特定视图时，你调用 Frame.Navigate.

为了让 MVVM 不让您的主页 ViewModel 深入了解您的视图，您可以定义一个封装页面和视图结构以及视图类型的 NavigationService。

这是一篇关于 MVVM 基础知识和构建 NavigationService 的好文章：https://msdn.microsoft.com/en-us/magazine/jj651572.aspx（转到 'Setting up Navigation' 部分）。

Whosebug 的另一个精彩描述：Navigating to a new page from the View Model in Windows Phone 8.1 universal app。

Answer 2

由于 "not understanding everything quite right" 我最终得到了 "bad" 解决方案 - 工作正常，但应该少得多 code/work.

This 帮助我理解了视图之间的切换！我最终使用了它。

遗憾的是，我找不到一个很好的教程来更改 <SplitView.Content>，所以我在每个视图上都 "Copy & Paste"。

MVVM 中的 C# uwp 更改 "Splitview.Content"

C# uwp change "Splitview.Content" in MVVM

c#

listbox

mvvm

splitview

uwp