通用 Windows 应用上的 ViewModel (MVVM) 绑定页面答案

【问题标题】：Binding Page with ViewModel (MVVM) on Universal Windows App通用 Windows 应用上的 ViewModel (MVVM) 绑定页面
【发布时间】：2018-09-16 04:57:10
【问题描述】：

我需要在 Xaml wpf 页面中的 Frame 控件上绑定一个页面。我的 xaml 页面：

<Page
x:Class="MyPro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyPro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewmodel="using:MyPro.ViewModel"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x1="using:System"
mc:Ignorable="d">
<Page.DataContext>
    <viewmodel:PagerViewModel x:Name="PagerViewModel"></viewmodel:PagerViewModel>
</Page.DataContext>
<Frame 
       VerticalContentAlignment="Stretch"
       HorizontalContentAlignment="Stretch"
       Name="frameMainPage"
       DataContext="{Binding Source=Pager.Page, Mode=TwoWay}">        
</Frame>

我试过用这个（但我不知道它是否正确）：

DataContext="{Binding Source=Pager.Page, Mode=TwoWay}"

但不起作用。

我的视图模型，我调用 Pager 来设置新的 Page：

class PagerViewModel
{
    public PagerViewModel()
    {
        m_pager = new Pager();
    }

    public static Pager m_pager;  
    public Pager Pager
    {
        get
        {
            return m_pager;
        }
        set
        {
            m_pager = value;
        }
    }
}

和我的模型，我这样设置页面模式：

public class Pager : INotifyPropertyChanged
{
    private Page m_page;
    public Page Page
    {
        get
        {
            return m_page;
        }
        set
        {
            m_page = value;
            OnPropertyChanged("Page");
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion
}

我需要从代码中的每个部分更改这样的页面：

PagerViewModel.m_pager.Page = new MyPage();

如何在通用 Windows 应用 UWP 上执行此操作？

【问题讨论】：

你不需要Pager上的OnPropertyChanged吗？
我还没有测试过，但是绑定框架的content属性而不是datacontextproperty不是更好吗？
我不知道是否更好地绑定内容或数据上下文，我需要一个解决方案并且我对所有想法持开放态度。但我知道，如果我绑定内容...在我的视图中，我会找到 String 格式的 Pager.page，背景为白色。

标签： c# wpf mvvm uwp

【解决方案1】：

我是这样解决的：

DataContext="{Binding Path=Pager.Page, Mode=TwoWay}"

你必须在 UWP 上的通用应用程序中使用 Path 而不是 Source

【讨论】：

【解决方案2】：

绑定到Frame 的DataContext 不会执行任何操作。 DataContext 基本上只是告诉控件其绑定的相对路径指的是什么，但不会导致任何行为（或者至少这适用于内置控件）。

在您的情况下，您需要绑定到Frame 控件的Content 属性：

<Frame Content="{Binding Pager.Page}" />

这对我有用，我已经用你的代码和主页上的一个附加按钮在一个空白解决方案上对其进行了测试：

XAML

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:PagerViewModel x:Name="PagerViewModel"></local:PagerViewModel>
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame Width="500" Height="500" Content="{Binding Pager.Page}" />
        <Button Click="ButtonBase_OnClick">Click</Button>
    </Grid>
</Page>

代码隐藏

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        ((PagerViewModel)DataContext).Pager.Page = new SecondPage();
    }
}

SecondPage 是一个空白页面，我将其设置为蓝色背景，以便能够清楚地看到它显示在Frame 中。

【讨论】：