Advanced Dotnet Tutorial: Introduction to DataBinding in Silverlight

DataBinding is a link between a data source and a user interface. The data source provides data to the user interface. The data in the user interface may be changed by the user which will be updated to the source and could be saved back to the database.The data source could be business objects, collections, database tables or any other form of data that support data binding.

In this chapter, we will use a simple class called "Address" with the following properties:

1. Name
2. Address1
3. Address2
4. City
5. State
6. Zip code

Let us create a Silverlight control which accepts user's name and address. You can create a xaml control which has the following TextBlock elements:

1. Name
2. Address1
3. Address2
4. City
5. State
6. Zip code

Here is the XAML which defines a grid and places the appropraite controls for our sample:

<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="Name" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="Address 1" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="Address 2" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="City" Grid.Row="3" Grid.Column="0"></TextBlock>
        <TextBlock Text="State" Grid.Row="4" Grid.Column="0"></TextBlock>
        <TextBlock Text="Zipcode" Grid.Row="5" Grid.Column="0"></TextBlock>

        <TextBox x:Name="txtName" Text="{Binding Name, Mode=TwoWay}" Grid.Row="0" Grid.Column="1"></TextBox>
        <TextBox x:Name="txtAddress1" Text="{Binding Address1, Mode=TwoWay}" Grid.Row="1" Grid.Column="1"></TextBox>
        <TextBox x:Name="txtAddress2" Text="{Binding Address2, Mode=TwoWay}" Grid.Row="2" Grid.Column="1"></TextBox>
        <TextBox x:Name="txtCity" Text="{Binding City, Mode=TwoWay}" Grid.Row="3" Grid.Column="1"></TextBox>
        <TextBox x:Name="txtState" Text="{Binding State, Mode=TwoWay}" Grid.Row="4" Grid.Column="1"></TextBox>
        <TextBox x:Name="txtZipcode" Text="{Binding Zipcode, Mode=TwoWay}" Grid.Row="5" Grid.Column="1"></TextBox>
        
        <Button Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Width="50" Content="Save" x:Name="btnSave" Click="btnSave_Click"></Button>
    </Grid>

The above XAML defines a grid with 7 rows and 2 columns. The controls are places in appropriate rows and columns using the Grid.Row and Grid.Column property of individual controls. When placed in a web page, our Silverlight control will look like this: