Bind XAML elements to entities TwoWay

Question

I want to bind an entity property (say Salary) to a property of a XAML element (like a TextBox.Text) and use this binding to save Text of TextBox to salary field which is bound as a entity property to 'Text' of some TextBox.

Something like the following :

<Grid DataContext="Employee">
    <TextBox Text="{Binding Path=Salary, Mode=TwoWay}"/>
</Grid>

Answer 1

XAML Two-Way Binding, 'Windows Universal' style, step-by-step

In Visual Studio 2017, create a Visual C# blank app (Universal Windows). Name it 'MyProject'.

Add a class Employee to it, and then modify boilerplate code as follows:

// Employee.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace MyProject
{
    public class Employee : INotifyPropertyChanged
    {
        private string salary;
        public string Salary
        {
            get
            {
                return this.salary;
            }
            set
            {

                if (value != this.salary)
                {
                    this.salary = value;
                    NotifyPropertyChanged();
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        // This method MUST BE called by the Set accessor of each property for TwoWay binding to work.
        // The CallerMemberName attribute that is applied to the optional propertyName
        // parameter causes the property name of the caller to be substituted as an argument.
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        // Constructor with one parameter
        public Employee(string annualSalary) { salary = annualSalary; }
    }
}

Notice that class Employee implements the INotifyPropertyChanged Interface.

Add class EmployeeViewModel to project, and modify boilerplate code as follows:

// EmployeeViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyProject
{
    public class EmployeeViewModel
    {
        private Employee defaultEmployee = new Employee("50000");

        public Employee DefaultEmployee { get { return this.defaultEmployee; } }

    }
}

Modify MainPage.xaml.cs boilerplate code as follows

//MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace MyProject
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.ViewModel = new EmployeeViewModel();


        }
        public EmployeeViewModel ViewModel { get; set; }
    }
}

Modify MainPage.xaml boilerplate code as follows:

<Page
    x:Class="MyProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!--TextBlock will provide visual feedback that the two-way binding is working-->
        <TextBlock x:Name="Control" Text="{x:Bind ViewModel.DefaultEmployee.Salary, Mode=OneWay}" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>

        <!--TextBox has two-way binding-->
        <TextBox x:Name="Input" Text="{x:Bind ViewModel.DefaultEmployee.Salary, Mode=TwoWay}" Margin="10" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center"/>

        <!--Button does nothing other than allow TextBox to lose focus-->
        <Button x:Name="btn1" Content="Hello" Grid.Column="1" Grid.Row="3"
          Foreground="Green"
          HorizontalAlignment="Center"/>

    </Grid>
</Page>

Notice, both 'Input' TextBox and 'Control' TextBlock are bound to the same Salary property of DefaultEmployee. The idea is that you edit and change the salary in the 'Input' TextBox, and then you can visually see the Two-Way binding at work, because the 'Control' TextBlock will update. This happens when the 'Input' TextBox loses focus (it is to allow the change of focus, for instance after pressing TAB key, that the 'Hello' button was added - the button in itself does absolutely nothing).

Build and Run. Modify salary, and either TAB or click button:

Answer 2

you just can bind Properties in xaml - so your salary have to be a property and not a field. if your Employee is the class with the salary you can set datacontext to an instance of it. you can do it in xaml or codebehind or with binding.

public class Employee //implement INotifyPropertyChanged to get the power of binding :)
{
    public decimal Salary {get;set}
}

view.xaml

<Grid>
 <Grid.DataContext>
        <local:Employee/>
  </Grid.DataContext>
   <TextBox Text="{Binding Path=Salary, Mode=TwoWay}"/>
 </Grid>

you can set the datacontext in many ways

Answer 3

No you cant do like that. You cant Set the Class name to the DataContext. It should be the instance of Employee class.