UWP databinding Object to UserControl

Question

I'm new to UWP programming. I'd want to bind an object to a UserControl (not just a property of an object), so that when I manipulate the MyModel object in the MainPage it is updated in the UserControl. I gather that XAML databinding has evolved from the WPF era to now using precompiled x:Bind. The examples I've read seem complex are mixing techniques from different era's, or involve behind the scenes magic. I'd like to boil down the databinding to its essentials using x:Bind, avoiding MVVM, Collections, Bindings, Datacontext etc. if possible. What are the minimum changes required in the code to make the Usercontrol display the updated MyProperty as I click the button?

MainPage.xaml

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:MyApp.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <controls:MyUserControl MyModel="{x:Bind MyModel}"/>
        <Button Click="Button_Click"/>
    </Grid>
</Page>

MainPage.xaml.cs

using MyApp.Models;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyApp
{
     public sealed partial class MainPage : Page
    {
        public MyModel MyModel = new MyModel();
        public MainPage() { this.InitializeComponent(); }
        private void Button_Click(object sender, RoutedEventArgs e)
        { MyModel.MyProperty += 1; }
    }
}

MyModel.cs

namespace MyApp.Models
{
    public class MyModel 
    { public int MyProperty { get; set; } }    
}

MyUserControl.xaml

<UserControl
    x:Class="MyApp.Controls.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">    
   <TextBlock Text="{x:Bind  MyModel.MyProperty}"/>    
</UserControl>

MyUserControl.xaml.cs

using MyApp.Models;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyApp.Controls
{
    public sealed partial class MyUserControl : UserControl 
    {
        public MyModel MyModel
        {
            get { return (MyModel)GetValue(MyModelProperty); }
            set { SetValue(MyModelProperty, value); }
        }

        public static readonly DependencyProperty MyModelProperty =
            DependencyProperty.Register("MyModel", typeof(MyModel), typeof(MyUserControl), new PropertyMetadata(0));

          public MyUserControl()
        { this.InitializeComponent(); }       
    }
}

Note that when I set MyModel.MyProperty in the MainPage constructor the UserControl does display the value. I've tried using the INotifypropertyChanged interface in the MyModel class, the PropertyChanged event does fire upon button click, but the UserControl does not update. (So maybe my question is how to make the MyUsercontrol listen and respond to the propertyChanged event in MyModel?)

My "real" project is obviously much more complex, so if possible I'd like to adhere to the current project structure (namespaces).

Thanks in advance for your time and patience! Have a nice day :-)

Vignesh Vignesh · Accepted Answer · 2018-12-06T17:14:25

Here are the changes i made in your files. First change your binding modes into TwoWay and change your model which implements INotifyPropertyChanged to trigger the changes to your UI Element.

Mainpage.xaml

<controls:MyUserControl MyModel="{x:Bind MyModel,Mode=TwoWay}"/>

MyUserControl.xaml

<TextBlock Text="{x:Bind  MyModel.MyProperty,Mode=TwoWay}"/>

MyModel.cs

public class MyModel : INotifyPropertyChanged
    {
        private int _MyProperty;
        public int MyProperty
        {

            get { return _MyProperty; }
            set
            {
                if (value != _MyProperty)
                {
                    _MyProperty = value;
                    NotifyPropertyChanged();
                }
            }
        }
        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

UWP databinding Object to UserControl

1 Answers