SilverLight Tutorials:Binding collection of items to a control using data template

 Binding will be useful to represent and to interact with the data . The important properties are:

Target Object: To which the data should be binded example : textbox with the property name of the student object.

Binding Source: The source from where the data is fetched from.

Path: The source value that we want to bind . By default the path value is Nothing.

TargetProperty: The Text property

Data Template:

The data template is useful when the items are binded to the item control like listboxes.

We can customize the data items that are bound  to a control using DataTemplate.A data template allows you to display list of  items in the required format.we can use  the content template of content control  or item template of item control to set the data template.

For example consider a ListBox which is a collection of list items we can set the Datatemplate for each item using item template porperty to a data template.

In this example we are going to use ObservableCollection, wich is  collection of students ,here we are going to create a wrapper class student.This students collection is bind to listbox .

Student.cs(wrapper class):

Contains two properties and one parameterized constructor

Walkthrough for creating new class

1.Solution explorer->add class->Name it as student.

  public class Student

    {

        public string Name{ get; set; }

        public int rollNumber { get; set; }

        public Student()

        {

        }

        public Student(string name, int rollnumber)

        {

            Name = name;

            rollNumber = rollnumber;

        }

    }

One you have done with Student class  let’s discuss about designing of UI whcih contains two textblocks and textboxes  to accept  student name ,rollnumber  and a button ,a listbox change their properties respectively.

Within  item template of the items control you can define the data template(Look) for each item.

Mainpage.xaml

    <Grid x:Name="ContentGrid" Grid.Row="1" Margin="0,0,0,330">

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="64,79,0,0" Name="textBlock1" Text="Name:" VerticalAlignment="Top" />

            <TextBox Height="72" HorizontalAlignment="Right" Margin="0,62,36,0" Name="txtName" Text="" VerticalAlignment="Top" Width="225"   />

            <Button Content="Add" Height="72" Margin="219,255,27,0" Name="btnBind" VerticalAlignment="Top" Click="btnBind_Click" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="219,153,0,0" Name="txtRollNumber" Text="" VerticalAlignment="Top" Width="225" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="64,172,0,0" Name="textBlock3" Text="Roll number:" VerticalAlignment="Top" />

        </Grid>

        <TextBlock Height="30" HorizontalAlignment="Left" Margin="64,418,0,0" Name="textBlock2" Text="Students:" VerticalAlignment="Top" Grid.Row="1" />

        <ListBox Grid.Row="1" Height="257" HorizontalAlignment="Stretch" Margin="162,397,0,0" Name="lstStudents" VerticalAlignment="Top" Width="282" ItemsSource="{Binding}" >

            <ItemsControl.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal" Margin="2" >

                        <TextBlock Text="{Binding Name}" Margin="2"></TextBlock>

                        <TextBlock Text="{Binding rollNumber}" Margin="2"></TextBlock>

                    </StackPanel>

                </DataTemplate>

            </ItemsControl.ItemTemplate> 

        </ListBox>

 

Mainpage.xaml.cs

Include below code in Mainpage.cs

//observable collection to store student details.

public ObservableCollection<Student> lstStudentsCollection = new ObservableCollection<Student>();

//on button click if the values are not empty then adding student details to collection and

Reset the controls , bind data context of the listbox to collection.

        private void btnBind_Click(object sender, RoutedEventArgs e)

        {

            if ((!String.IsNullOrEmpty(txtName.Text.Trim()) && (!String.IsNullOrEmpty(txtRollNumber.Text.Trim()))))

            {

                lstStudentsCollection.Add(new Student(txtName.Text, Convert.ToInt32(txtRollNumber.Text)));

                txtName.Text = "";

                txtRollNumber.Text = "";

            }

            else

            {

                MessageBox.Show("please enter name and roll number");

            }

            lstStudents.DataContext = lstStudentsCollection;

        }

  Get to know more about such things at bestdotnettraining;