Binding data to the Silverlight control by hard coding in XAML file and programmatically from the code behind

Binding data to Silverlight elements

What is Data Binding?

As per MSDN

Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change. For example, if the user edits the value in aTextBox element, the underlying data value is automatically updated to reflect that change.For more visit here.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

Data binding in Silverlight can be done either programmatically to bind the data at run time or by hard coding in the XAML file.

Binding data to the Silverlight control by hard coding in XAML file

In case the data to be bound in the Silverlight page, we can use static binding where we specify the field/property to bind with the control.

Code

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<TextBox Text="{Binding FirstName}"/>
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</Grid>

In the above code we have a TextBox and TextBlock, both have their Text property set as Binding with FirstName and LastName respectively.

Code behind

void StaticBinding_Loaded(object sender, RoutedEventArgs e)
{
FillData();
}
private void FillData()
{
Person p = new Person
{
FirstName = "Joe",
LastName = "Elan",
};
LayoutRoot.DataContext = p;
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}

In the above code snippet, we have a FillData method that is being called on the load of the Silvelight page. In this method we are setting the LayoutRoot (The Grid’s).DataContext to the Person object. As our TextBox and TextBlock controls are inside this Grid so they by default inherent the data context of this Grid and use it to bind its data. DataContext is inherited from parent object tree so we do not need to explicitly set the data source for each children element.

Output

Binding data to the Silverlight control programmatically from the code behind in Silverlight

To bind the data programmatically from code behind, we can follow this approach.

Code

<Canvas>
<sdk:Label Content="First Name: " Canvas.Top="20" Canvas.Left="20" />
<TextBox x:Name="txtFirstName" Canvas.Top="20" Canvas.Left="90" Height="25" Width="150"/>
<sdk:Label Content="Last Name: " Canvas.Top="60" Canvas.Left="20" />
<TextBox x:Name="txtLastName" Canvas.Top="60" Canvas.Left="90" Height="25" Width="150"/>
<Button x:Name="btnSubmit" Canvas.Top="100" Canvas.Left="90" Height="25" Width="150" Content="Submit" />
<TextBlock FontSize="20" Canvas.Top="150" Canvas.Left="15" Text=": Binding from Code : "/>
</Canvas>

In the above code snippet, we have created a simple form with two textboxes, a button and few two label controls.

Code behind

void BindingFromCode_Loaded(object sender, RoutedEventArgs e)
{
Person p = new Person();
p.FirstName = "Sheo";
p.LastName = "Narayan";
// specify the bindings
Binding firstNameBinding = new Binding("FirstName");
firstNameBinding.Source = p;
Binding lastNameBinding = new Binding("LastName");
lastNameBinding.Source = p;
// now set the bindings
txtFirstName.SetBinding(TextBox.TextProperty, firstNameBinding);
txtLastName.SetBinding(TextBox.TextProperty, lastNameBinding);
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}

In the code behind, we have a Person class whose FirstName and LastName property set. Now first we are creating a Binding object with the “FirstName” and setting its Source as the Person object. Similarly, we are also creating another Binding object with “LastName” with source as the Person object.

Next to set the Binding we are using SetBinding method by passing the DependencyProperty and the binding name. In TextBox, the DependencyProperty is TextProperty.

Output

Hope this article was useful. Thanks for reading and hoping that you liked it.

Keep an eye on forth coming articles on Silverlight. To read my series of articles,click here.