Simple data binding in WPF

Data binding in WPF is how you pass data between your code and user interface. The simplest way to bind some data is to use DataContext property. Each element has its own DataContext property, which if not set, inherits its value from parent element. In the example below all elements are gonna inherit DataContext from MainWindow.

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new Location();
        }
    }

    public class Location
    {
        public string Country { get; set; }
        public string State { get; set; }
        public string City { get; set; }

        public Location()
        {
            Country = "Russian Federation";
            State = "Sverdlovsk";
            City = "Yekaterinburg";
        }
    }
}

<Window x:Class="WpfApp.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:WpfApp"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
    <Grid>
      <Label Content="Country:"
        HorizontalAlignment="Left"
        Margin="29,21,0,0"
        VerticalAlignment="Top"/>

       <Label Content="State:"
         HorizontalAlignment="Left"
         Margin="29,70,0,0"
         VerticalAlignment="Top"/>

       <Label Content="City:"
         HorizontalAlignment="Left"
         Margin="29,125,0,0"
         VerticalAlignment="Top"/>
     
        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,49,0,0"
          TextWrapping="Wrap"
          Text="{Binding Country, Mode=OneWay}"
          VerticalAlignment="Top"
          Width="120"/>

        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,99,0,0"
          TextWrapping="Wrap"
          Text="{Binding State, Mode=OneWay}"
          VerticalAlignment="Top"
          Width="120"/>

        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,154,0,0"
          TextWrapping="Wrap"
          Text="{Binding City, Mode=OneWay}"
          VerticalAlignment="Top"
          Width="120"/>
    </Grid>
</Window>

Ok, now all texboxes have text field set to corresponding Location property's value. But what if we also wanna set whatever user enters in textbox to corresponding Location property's value? We can easily do this by simply changing binding mode from OneWay to TwoWay.

<Window x:Class="WpfApp.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:WpfApp"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
    <Grid>
      <Label Content="Country:"
        HorizontalAlignment="Left"
        Margin="29,21,0,0"
        VerticalAlignment="Top"/>

       <Label Content="State:"
         HorizontalAlignment="Left"
         Margin="29,70,0,0"
         VerticalAlignment="Top"/>

       <Label Content="City:"
         HorizontalAlignment="Left"
         Margin="29,125,0,0"
         VerticalAlignment="Top"/>
     
        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,49,0,0"
          TextWrapping="Wrap"
          Text="{Binding Country, Mode=TwoWay}"
          VerticalAlignment="Top"
          Width="120"/>

        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,99,0,0"
          TextWrapping="Wrap"
          Text="{Binding State, Mode=TwoWay}"
          VerticalAlignment="Top"
          Width="120"/>

        <TextBox HorizontalAlignment="Left"
          Height="23"
          Margin="29,154,0,0"
          TextWrapping="Wrap"
          Text="{Binding City, Mode=TwoWay}"
          VerticalAlignment="Top"
          Width="120"/>
    </Grid>
</Window>