How to move my 2-way Data Binding from Code-Behind to XAML

Question

Relatively new to WFP and C# (longtime PHP programmer)...

I successfully set up 2-WAY data binding between a TextBox and a Property of an Object. I was able to establish the binding in the Code-Behind, but not do it in the XAML instead.

I would like to learn how to do the BINDING in the XAML instead. That is, in the example below, how to move the line myTestPanel.DataContext = CURRENT_NETWORK; from the Code-Behind to the XAML?

I looked at tutorials, examples, etc., but none helped... They seem to want me to bind the TextBox (or parent object) to a CLASS, not to an OBJECT. Some examples suggest binding to a class with suitable constructors. But I do not want to do that. I want to bind to an EXISTING OBJECT that may have existed for some time. I can do it just fine in the Code-Behind... But how to do it in the XAML instead?

Here's my Code Behind:

namespace net
{
    public class network
    {
        public int ID { get; set; }   // Property bound to TextBox
    }

   public partial class MainWindow : Window
   {
        network CURRENT_NETWORK = new network();   // My OBJECT (which could have been around for a while)

        public MainWindow()
        {
            InitializeComponent();

            CURRENT_NETWORK.ID = 123;   // The object gets set up...

            // ** Below is the line I want to learn how to move to XAML **
            myTestPanel.DataContext = CURRENT_NETWORK;  // <- CRITICAL LINE
        }
    }
}

and here's a snippet of the XAML:

<Window x:Class="net.MainWindow"
    // some lines omitted
    xmlns:local="clr-namespace:net"
>

<DockPanel Name="myTestPanel" >
    <TextBox Text="{Binding Path=ID, Mode=TwoWay}"></TextBox>
</DockPanel>

The 2-way binding works like a dream :) I can see in the TextBox the value in the object's ID Property, and conversely if I edit the number in the TextBox, the object is correctly modified. (I observed that with a button bringing up a message box, not shown in my code snippet.)

BUT how do I move that critical binding between TextBox and EXISTING OBJECT (i.e. the line myTestPanel.DataContext = CURRENT_NETWORK;) from the Code-Behind to the XAML? THANKS!

PS: why do I want to do the binding in the XAML? Partially just for learning, and partially because I think it'd be more elegant/readable, since the XAML already contains the name of the Property. I.e., I'd like to do all the bindings in the XAML rather than some there and some in the Code-Behind.

You have different options. One of them is to set the DataContext directly in the window. Something like: <Window .... DataContext = "{Binding}" > this way all the objects in Window will have this DataContext until another one is setted (ex: when using ItemsSource with ItemTemplate in a list) — sexta13
Yes, I looked at several MVVM tutorials, thanks. As far setting the DataContext directly in the window, I learned that "whenever you declare a control in XAML you are instantiating a class." What confuses me is: how do I access that instantiated class from the code-behind? — Julian - BrainAnnex.org

Davy Davy · Accepted Answer · 2016-03-23T05:49:10

Sorry I could not able to add comment, so posting it as answer. What I am suggesting you is just have separate class as your ViewModel e.g. NetWorkViewModel and inside your ViewModel create a property of your EXISTING OBJECT type and change the bindings in XAML as well.

public class NetworkViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private Network _model;
    public Network Model
    {
        get { return _model; }
        set
        {
            _model = value;
            OnPropertyChanged("Model");
        }
    }

    private void OnPropertyChanged(string propertyName) 
    {  }
}

public class Network : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private int _id;
    public int Id
    {
        get { return _id; }
        set
        {
            _id = value;
            OnPropertyChanged("Id");
        }
    }

    private void OnPropertyChanged(string propertyName)
    { }
}

In your Xaml

xmlns:vm="clr-namespace:net"
...
<Window.DataContext>
  <vm:NetworkViewModel />
</Window.DataContext>
...
<DockPanel Name="myTestPanel" >
    <TextBox Text="{Binding Path=Model.Id, Mode=TwoWay}"></TextBox>
</DockPanel>

This is one way of doing. Read some MVVM tutorial you will get some other ideas.

How to move my 2-way Data Binding from Code-Behind to XAML

1 Answers