在通用Windows应用程序上使用ViewModel(MVVM)绑定页面UWP

时间:2018-04-06 08:01:42

标签: c# wpf mvvm uwp

我需要在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来设置新的页面:

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();

如何在Universal windows app UWP上执行此操作。 感谢

2 个答案:

答案 0 :(得分:2)

我这样解决了:

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

您必须在UWP上的Universal App中使用Path而不是Source

答案 1 :(得分:0)

绑定到DataContext的{​​{1}}没有任何作用。 Frame基本上只告诉控件绑定的相对路径引用了什么,但不会导致任何行为(或者至少这适用于内置控件)。

在您的情况下,您需要绑定到DataContext控件的Content属性:

Frame

这对我有用,我已经使用您的代码和主页上的其他按钮在空白解决方案上进行了测试:

<强> XAML

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

<强>代码隐藏

<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中。