ARTICLE

Simple Data Binding in WPF

Posted by Mahak Gupta Articles | WPF April 10, 2012
Here we look an example of simple data binding in WPF.
Reader Level:

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>

1.png

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:

 

2.png

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:


3.png

Login to add your contents and source code to this article
post comment
     

EDIT: nevermind

Posted by K May 07, 2013

@ Arjun The answer depends on the context actually.if its which objects we can bind to then it can be any FrameWork Element but the property must be a Dependency property.and furthermore the other context how we want to bind the data (I mean at compiletime or at runtime )then there is Static and Dynamic binding.actually binding in WPF is a huge topic but a very important one. I hope this may be small help to you.

Posted by tarun tripathi May 10, 2012

It's a very helpful for beginners keep it up. I have a question to you that what's the need of WPF when we have GDI, GDI+ and DirectX?

Posted by Shrutz Mhatz Apr 11, 2012

How many ways binding data in WPF?

Posted by Arjun Panwar Apr 10, 2012

We want to know how can be fetch data row by row from table in WPF?

Posted by Abhishek Dubey Apr 10, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter