C# uwp 在 MVVM 中更改“Splitview.Content”答案

【问题标题】：C# uwp change "Splitview.Content" in MVVMC# uwp 在 MVVM 中更改“Splitview.Content”
【发布时间】：2017-03-31 10:38:52
【问题描述】：

老实说，我在使用 MVVM 时遇到了一些困难。更准确地说，我很难在 MVVM 中创建/更改页面。

这是包含我的 SplitView 的 MainPage：

<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 中使用视图）。

【问题讨论】：

标签： c# mvvm listbox uwp splitview

【解决方案1】：

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

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

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

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

【讨论】：

刚刚找到时间回到我的问题。对不起，迟到的答案。我得到的是，我有 2 个视图，每个 Button 都通向另一个视图 - 但是如果我的 ListBox 中的 SelectedItem 发生更改，我怎样才能让 Frame 更改其内容。

【解决方案2】：

由于“没有完全正确理解所有内容”，我最终得到了一个“糟糕”的解决方案 - 工作正常，但代码/工作应该少得多。

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

遗憾的是，我找不到一个好的教程来更改 <SplitView.Content>，所以我在每个视图上“复制并粘贴”它。

【讨论】：