How to write data binding between code and xaml in WPF
The most example of data binding is about binding between WPF controls. For example, it is data binding between value of slider and font size of textbox. But after knowing this, we want to know how to declare data binding between code and xaml.
In this article, we will see one of most simple example of data binding between code and xaml. Through this example, you can take first look about data binding between code and xaml.
Before reading this article, you must understand basic of data binding, like DataContext, Path.
The data binding between code and xaml is following.
First, Create new Project file and add new class named "Data".
[##_1C|9770339687.png|width="600" height="359" alt="Create Data class"|This Class is used for handling data which will be binded into xaml._##]
// Data.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
namespace EasyDataBinding
{
public class Data : DependencyObject
{
public double FontSize
{
get { return (double)GetValue(FontSizeProperty); }
set { SetValue(FontSizeProperty, value); }
}
// Using a DependencyProperty as the backing store for FontSize. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FontSizeProperty = DependencyProperty.Register("FontSize", typeof(double), typeof(Data), new UIPropertyMetadata(10.0));
}
}
Newly added codes are painted with Red color. Dependency property supports two-way data binding naturally, so using dependency property is easy for data binding. For using dependency property, Data class is derived from DependencyObject.
Second, connect the Data object into DataContext in the codes of main window.
// Window1.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace EasyDataBinding
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.DataContext = new Data(); // connect the data object into the datacontext of the window
}
}
}
Third, Let's declare data binding in xaml.
<Window x:Class="EasyDataBinding.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Slider Grid.Row="0" Value="{Binding Path=FontSize}" Minimum="10" Maximum="50"></Slider>
<TextBlock Grid.Row="1" Text="Hi, My name is SunKwon Kim" FontSize="{Binding Path=FontSize}"></TextBlock>
</Grid>
</Window>
[##_1C|5593786112.png|width="300" height="300" alt="User image"|_##][##_1C|1762542081.png|width="300" height="300" alt="User image"|_##]
