C# UWP MVVM 在另一个视图中注入一个视图

Posted 2023-03-25

【中文标题】C# UWP MVVM 在另一个视图中注入一个视图

【英文标题】：C# UWP MVVM inject a view inside another view

【发布时间】：2021-09-07 06:06:17

【问题描述】：

您好，我有一个 xaml 文件，其中有一个带有 NavigatioViewItems 的 NavigationView。在 NavigationView 中，我有一个 ScrollViewer，我想在其中注入一个视图。这是 xaml：

<Page
    x:Class="ToolBoxApp.Views.AudioHomeView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ToolBoxApp.Views"
    xmlns:viewmodels="using:ToolBoxApp.ViewModels"
    xmlns:mainview="clr-namespace:ToolBoxApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    mc:Ignorable="d"
    Background="ThemeResource ApplicationPageBackgroundThemeBrush">

    <!--<Page.DataContext>
        <viewmodels:AudioHomeViewModel/>
    </Page.DataContext>-->
    
    <Grid>
        <NavigationView x:Name="navigationViewControl" 
                        IsBackEnabled="true"
                        >

            <i:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="ItemInvoked">
                    <core:EventTriggerBehavior.Actions>
                        <core:InvokeCommandAction Command="Binding NavigateToTextToSpeechView" />
                    </core:EventTriggerBehavior.Actions>
                </core:EventTriggerBehavior>
            </i:Interaction.Behaviors>

            <NavigationView.MenuItems>
                <NavigationViewItem Icon="MusicInfo" Content="Text to Speech"/>
                <NavigationViewItem Icon="MusicInfo" Content="Youtube to Mp3"/>
            </NavigationView.MenuItems>

            <ScrollViewer>
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
    
        </NavigationView>
    </Grid>
</Page>

到目前为止，我有一个 NavigationService，我可以在其中导航到不同的视图：

    public class NavigationService : INavigationService
    
        public void GoBack()
        
            var frame = (Frame)Window.Current.Content;
            frame.GoBack();
        

        public void Navigate(Type sourcePage)
        
            var frame = (Frame)Window.Current.Content;
            frame.Navigate(sourcePage);    
        

        public void Navigate(Type sourcePage, object parameter)
        
            var frame = (Frame)Window.Current.Content;
            frame.Navigate(sourcePage, parameter);
        

        public void NavigateScrollViewer(Type sourcePage, Type injectPage)
        
            var frame = (Frame)Window.Current.Content;
            
            var page = frame.CurrentSourcePageType;
        
    

NavigatScrollViewer 方法应该以通用方式实现这一点，因为整个应用程序都会使用它。我将有不同的 Windows，例如上面的 xaml 文件，我想将视图注入到 ScrollViewer 框架中。有没有办法在代码中获取对此 ScrollViewer 的引用，然后将其 Frame 设置为我想通过 NavigationService 指定的视图？ 任何帮助表示赞赏。谢谢

【问题讨论】：

请检查以下，是否有效？

是的，它基本上可以工作，但绑定似乎不起作用，尽管我在设置器中有一个 OnPropertyChange 触发器。请参阅我的这个问题，我询问如何将不同的命令附加到不同的菜单项。在答案中，您可以看到我是如何解决的。在 OnItemInvoked 方法中，我不再使用 NavigationService，我只是将我的属性设置为相应的视图类型。当我调试它时，我可以看到绑定的属性发生了变化，但它没有反映在 UI 上。 ***.com/questions/68102232/…

确定已解决：需要使用 Mode=TwoWay。愚蠢的我现在要阅读这些东西的含义......

【参考方案1】：

C# UWP MVVM 在另一个视图中注入一个视图

如果你使用过 MVVM 设计，则需要将 FrameSourcePageType 属性与 ViewModel 的页面类型属性绑定。你只需要更新这个页面类型属性，Frame内容就会更新。

Here 是您可以参考的示例代码。

有没有办法在代码中获取对此 ScrollViewer 的引用，然后将其 Frame 设置为我想通过 NavigationService 指定的视图？

另一种方法是将ContentFrame 实例传递给NavigationService。首先，您需要为 NavigationService 类添加新的框架属性。然后用MyFrame替换你的代码框。

public class NavigationService

    private Frame MyFrame  get; set; 
    public NavigationService(Frame frame)
    
        MyFrame = frame;
    

Usgae

 var navService = new NavigationService(ContentFrame);

以上设计参考Windows Template StudioNavigationService，是完整的实现，可以在shell页面中找到NavigationService的初始化过程。

ViewModel.Initialize(shellFrame, navigationView, KeyboardAccelerators);

【讨论】：

你是最棒的！这实际上是我必须弄清楚的最后一块拼图。像魅力一样工作！