How to list the data using ItemsControl and set element binding in SilverLight?

How to list the data in Silverlight using ItemsControl?

ItemsControl is one of the control that is similar to ListBox except it doesn’t provide selection facility. In case we just need to list the records from the collection, we can use ItemsControl.

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.

Code

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<!-- ItemControl binding-->
<ItemsControl ItemsSource="{Binding}" DisplayMemberPath="FirstName"/>
<Rectangle Height="20" Width="200" Fill="Bisque"/>
<!-- ItemControl binding with template -->
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text=" "/>
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>

In the above code snippet, we have an ItemsControl with ItemsSource as Binding with DisplayMemberPath as “FirstName”. As its ItemsSource is Binding so it can inherit the data source of its parent element’s data context. In this we have not specified any Template so by default the FirstName value of its source will be listed one after another.

In the second ItemsControl we have specified a DataTemplate that list the FirstName and LastName in the stack panel. This template is almost similar to ListBox. Similarly we can also specify the ItemsPaneel template.

Code behind

void OtherBindings_Loaded(object sender, RoutedEventArgs e)
{
IList<Person> list = new List<Person>();
 
Person p = new Person
{
Age = 1,
FirstName = "Joe",
LastName = "Elan",
IsActive = true
};
Person p1 = new Person
{
Age = 15,
FirstName = "Mike",
LastName = "Bull",
IsActive = true
};
Person p2 = new Person
{
Age = 51,
FirstName = "Mukul",
LastName = "Alwa",
IsActive = true
};
Person p3 = new Person
{
Age = 31,
FirstName = "Sheo",
LastName = "Narayan",
IsActive = true
};
list.Add(p);
list.Add(p1);
list.Add(p2);
list.Add(p3);
LayoutRoot.DataContext = list;
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public bool IsActive { get; set; }
}

In the above code we have set the DataContext of the Grid to the collection.

Output

In the above output you can see that first ItemsControl is listing only FirstName of the data source as DisplayMemberPath was set to FirstName. In the second ItemsSource control we had set the DataTemplate with FirstName and LastName so we both are appearing as output.

How to set element to element binding in Silverlight?

In case we want to bind an element with other element so that changes in one element affect other element, we can follow this approach.

Code

<Canvas>
<TextBlock Text="Write here" Canvas.Top="30" Canvas.Left="5"/>
<TextBox x:Name="LastName1" Canvas.Top="30" Canvas.Left="100" Width="150"/>
<TextBlock Text="Appears here" Canvas.Top="60" Canvas.Left="20"/>
<TextBox x:Name="LastName" IsEnabled="False" Text="{Binding ElementName=LastName1, Path=Text}" Width="150" Canvas.Top="60" Canvas.Left="100" />
</Canvas>
 

In the above code snippet we have two TextBoxes. In the second TextBox we have set Text property as Binding with ElementName as “LastName1” and Path as “Text”, this binds the second text box to the Text property of the First text box so when the First text box text property changes, the second text box text property also changes.

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.