Simple Data Binding in WPF

Here we look an example of simple data binding in WPF. In this example I use a class for Data Binding. Here we look at the program.

Step1: First we create a Grid in our project:

<Grid x:Name="StuInfo">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" MinWidth="77"></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

</Grid>

Step2: After that we create two TextBlocks and Two TextBoxes in our program and we also create a Button (Next) to see the Next Record according to the program.

<TextBlock Text="First Name" Margin="10"></TextBlock>

<TextBlock Text="Last Name" Margin="10" Grid.Row="1"></TextBlock>

<TextBox Text="{Binding fname}" Margin="10" Grid.Column="1"></TextBox>

<TextBox Text="{Binding lname}" Margin="10" Grid.Column="1" Grid.Row="1"></TextBox>

<Button HorizontalAlignment="Left" Margin="0,12,0,9" Name="button1" Width="75" Grid.Column="1" Grid.Row="2">Next</Button>



Step3: Now we add a Loaded Event handler in the .cs page. This event will be called when the client wants to load the application:

public partial class Window1 : Window

{
public Window1()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

}

}

Step4: Now we add a class to our program:

public class Stu
{
public string fname { get; set; }
public string lname { get; set; }
}

Step5: Now we write the following code in the Loded Event Handler:

void Page_Loaded(object sender, RoutedEventArgs e)

{

Stu s = new Stu();

{

s.fname = "Mahak";

s.lname = "Garg";

};

this.StuInfo.DataContext = s;

}

As we mention Binding in TextBox in .xaml page :

<TextBox Text="{Binding fname}" Margin="10" Grid.Column="1"></TextBox>

<TextBox Text="{Binding lname}" Margin="10" Grid.Column="1" Grid.Row="1"></TextBox>

The output will be:

Step6: Now we add another Event Handler, which is for the Next Button:

public Window1()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

this.button1.Click += new RoutedEventHandler(button1_Click);

}
void button1_Click(object sender, RoutedEventArgs e)

{

Stu s = new Stu();

{

s.fname = "Juhi";

s.lname = "Gupta";

};

this.StuInfo.DataContext = s;

}

Here we add another data in our program. When we click on the Next Button, the output will be: