C# and XAML within a Silverlight 2 context?

In the previous article how does C# code behind interact with an XAML interface within a Silverlight 2 context? - Binding process: Part II, I gave an example of how to use the code behind objects within XAML context. Now, I will do the inverse, I mean, we deal from within the C# code behind.

We still continue with the object Person which has been introduced in the previous article and that was defined as follow:

public class Person
{
public Person()
{ }
public Person(string FirstName, string LastName, string PseudoName)
{
this.FirstName = FirstName;
this.LastName = LastName;
this.PseudoName = PseudoName;
}
public string FirstName
{
get; set;
}
public string LastName
{
get; set;
}
public string PseudoName
{
get; set;
}
}

We should remember that a parameter less constructor has to be defined and the object has to be declared as public, otherwise, runtime error will be raised.

First thing that it should be done is to add the System.Windows.Data namespace. Then we define three Binding objects, one for the first name, one for the last name and one for the pseudo name.

Binding FirstNameBind;
Binding LastNameBind;
Binding PseudoNameBind;

A person object should also be declared

Person oPerson;

Then the person object should be instantiated

//The person is defined in the C# side this once

oPerson = new Person("Bejaoui","Bechir","Yougethen");

Now, each binding object should be tied to its corresponding person property as follow:

FirstNameBind = new Binding("FirstName");
LastNameBind = new Binding("LastName");
PseudoNameBind = new Binding("PseudoName");

Then the source of each binding object must be set. I this case, oPerson is the source

FirstNameBind.Source = oPerson;
LastNameBind.Source = oPerson;
PseudoNameBind.Source = oPerson;

Now, to tie the binding objects to the TextBlocks, we should define them first at the XAML editor level, there is which I suppose as an elegant way to do that:

First, we define the XAML and we give our container a name <Grid x:Name="LayoutRoot"..,

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="Silverlight.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:code="clr-namespace:Silverlight" Width="300" Height="300">
<Grid x:Name="LayoutRoot" Background="Azure" >
<Grid.Resources>
<code:Person x:Name="me"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0">
First name
</TextBlock>
<TextBlock Grid.Column="1"
Grid.Row="0">
Last name
</TextBlock>
<TextBlock Grid.Column="2"
Grid.Row="0">
Pseudo name
</TextBlock>
<TextBlock x:Name="txtFirstName"
Grid.Column="0"
Grid.Row="1" />
<TextBlock x:Name="txtLastName"
Grid.Column="1"
Grid.Row="1" />
<TextBlock x:Name="txtPseudoName"
Grid.Column="2"
Grid.Row="1" />
</Grid>
</UserControl>

And then it will be easy to get all the children controls in a collection as follow:
UIElementCollection TextBlocks = LayoutRoot.Children;
In this case, the TextBlocks will be defined as bellow:

Index	Value
0	FirstName
1	LastName
2	PseudoName
3	- (the first name value issued from the binding)
4	- (the last name value issued from the binding)
5	- (The pseudo name value issued from the binding)

Then, here is how to get the TextBlocks one by one

TextBlock txtFirstName = TextBlocks[3] as TextBlock;
TextBlock txtLastName = TextBlocks[4] as TextBlock;
TextBlock txtPseudoName = TextBlocks[5] as TextBlock;

Since the first, the second and the third textblocks are used as labels, we should start by the fourth element that means the 3 indexed element as the collection is 0 based.

Then let's bind each of the binding objects to the corresponding dependency property of each textBlock as follow:

txtFirstName.SetBinding(TextBlock.TextProperty, FirstNameBind);
txtLastName.SetBinding(TextBlock.TextProperty, LastNameBind);
txtPseudoName.SetBinding(TextBlock.TextProperty, PseudoNameBind);

The resulting code should look like this:

using System.Windows.Data;
namespace Silverlight
{
public partial class Page : UserControl
{

Binding FirstNameBind;
Binding LastNameBind;
Binding PseudoNameBind;
Person oPerson;
public Page()
{
InitializeComponent();
BindingIssue();
}

public void BindingIssue()
{
//The person is defined in the C# side this once
oPerson = new Person("Bejaoui","Bechir","Yougethen");

/* Initiate the Binding value and set them each one to
* it's appropriate peoperty */

FirstNameBind = new Binding("FirstName");
LastNameBind = new Binding("LastName");
PseudoNameBind = new Binding("PseudoName");

/* Set the source of each binding source to
* the person instance */

FirstNameBind.Source = oPerson;
LastNameBind.Source = oPerson;
PseudoNameBind.Source = oPerson;
//Get the collection of the textblocs
UIElementCollection TextBlocks = LayoutRoot.Children;

/* As 0,1 and 2 are reserved to the labels, namely first name
, last namr and pseudo name, we should start from index 3*/

TextBlock txtFirstName = TextBlocks[3] as TextBlock;
TextBlock txtLastName = TextBlocks[4] as TextBlock;
TextBlock txtPseudoName = TextBlocks[5] as TextBlock;

/* The SetBinding enables tie the dependency property
* to the Binding object*/
txtFirstName.SetBinding(TextBlock.TextProperty, FirstNameBind);
txtLastName.SetBinding(TextBlock.TextProperty, LastNameBind);
txtPseudoName.SetBinding(TextBlock.TextProperty, PseudoNameBind);
}

}
public class Person
{
public Person() { }
public Person(string FirstName, string LastName, string PseudoName)
{
this.FirstName = FirstName;
this.LastName = LastName;
this.PseudoName = PseudoName;

}
public string FirstName { get; set; }
public string LastName { get; set; }
public string PseudoName { get; set; }
}
}

Now comes the ultimate phase, if we run the application, the result will be as expected

That's it

Good Dotneting!!!

Continue to next part >>