Friday, 24 February 2012

Simple Data binding from code behind in WPF..

A TextBlock control in .NET 3.5 provides a lightweight control for displaying small amounts of flow content and A ListBox control hosts a collection of ListBoxItem.
We'll create and use these controls to understand clearly.
I have set of strings in my code behind(c# file , now i will bind each string to the Textblock control and then i will add these Textblock controls to the Listbox.
Means , the Textblocks here are Listboxitems.
XAML code for TextBlock creation :
<TextBlock x:Name="txtblkname" Height="40" Text="This is TextBlock."
Foreground="Red">
</
TextBlock>

XAMLcode for ListBox creation:
<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"
         VerticalAlignment="Top" Width="194" Height="200">
     <ListBoxItem Content="Coffie"></ListBoxItem>
    <ListBoxItem Content="Tea"></ListBoxItem>
    <ListBoxItem Content="Orange Juice"></ListBoxItem>
    <ListBoxItem Content="Milk"></ListBoxItem>
    <ListBoxItem Content="Iced Tea"></ListBoxItem>
    <ListBoxItem Content="Mango Shake"></ListBoxItem>
</ListBox
Now, i would like to create an implicit DataTemplate that works on an array (or IEnumerable) of my class. This way i have a template that describes how to render a bunch of items instead of just one.
<StackPanel Width="300" Height="300">
  <ListBox x:Name="lisbx" Width="150" Height="150" >
        <ListBox.ItemTemplate>            
                <DataTemplate>                    
                    <StackPanel>                        
                        <TextBlock Height="50" Width="100"/>                         
                    </StackPanel>                    
            </DataTemplate>            
        </ListBox.ItemTemplate>
   </ListBox
 </StackPanel>
 Now i will create array of strings in my code behind file in the window loaded event because i have used window.We can bind the data in any event like button_click based on the requirement.
My Code Behind code looks like this:
private void Window_Loaded(object sender, RoutedEventArgs e)
  { 
      string[] names = {"Text","Text1","Text2","Text3","Text4"};
      lisbx.ItemsSource = names;
  }
Here we have to bind these Text's to the textblock and add those to the listbox as listbox items.
My XAML code looks like this with Binding:
<StackPanel Width="300" Height="300">
  <ListBox x:Name="lisbx" Width="150" Height="150" >
        <ListBox.ItemTemplate>            
                <DataTemplate>                    
                    <StackPanel>                        
                        <TextBlock Height="50" Width="100" Text="{Binding}"/>                        
                    </StackPanel>                    
            </DataTemplate>            
        </ListBox.ItemTemplate>
   </ListBox
 </StackPanel>

Here the textblock is created dynamically and the text is binded to it from code behind file in the window loaded event.
And these textblock is added to the listbox as a listboxitem.



This is about simple Data binding from code behind with example in WPF.

Thursday, 23 February 2012

Data Binding in WPF(Windows Presentation Foundation).



WPF introduced data binding concept which provides simple and easy way to represent data in application.

Data binding, in the context of .NET, is the method by which controls on a user interface (UI) of a client application are configured to fetch from, or update data into, a data source such as a database or XML document.

Prior to .NET, data binding models limited access to databases. Hence many DBMSs (database management systems) could access the data source indirectly through their API (application programming interface) without any flexibility in controlling the data binding process. This problem is addressed in .NET by providing fine control of how the data is bound and the behavior of UI with Windows Forms and ADO.NET classes in the Framework. The development of web applications is simplified by providing data binding capability to web pages using .NET server-side web controls. 


Data binding establish link between source and target.

As illustrated in the diagram, Binding establish link between source object and target object. When source object updates it notifies target object and when target object updates it notifies source object if binding is set to two way.

Binding object has four major components :
  •   Source object, 
  •   Target object,
  •   Source Property,
  •   Path.
We can specify other properties of binding like Binding Mode, Name etc. 
While binding target property must be a Dependency property.  Almost all UI elements/controls are derived from Dependency object so you can set an element's property as target property of data binding. You can define Binding in XAML file as well in code behind.

Sample code for Binding:
<StackPanel>
   <TextBox Name="txtname" Width="150" Height="35" Text="" />
   <Label Content="{Binding ElementName=txtname, Path=Text}"
          Width="150" Height="35" />
</StackPanel>



Here both properties are dependency properties.  In above example TextBox’s Text property is source of data and Label’s content property is target. Whenever users types something in textbox it will automatically update label’s content.



This is about simple Data binding in WPF.

Happy Binding.