Introducing Two-Way Data Binding using Silverlight 2.0, WCF and LINQ to SQL - Developing a Silverlight 2.0 page to demonstrate Add functionality: Using two-way binding
(Page 4 of 5 )
In previous sections, we used controls which are not really bound to any of our business objects (such as the "Emp" class or any of its properties). I managed to create my own "Emp" object in the code behind and assigned all properties with textbox values.
We can also achieve the same result by directly binding the controls to our business objects. The "One-Way" binding simply fills controls with properties information related to the business object. However, the values in the controls will not be assigned back to the properties of the business object. The "Two-way" binding works in both directions (properties to controls and vice versa).
All of this will happen in the presentation layer (Silverlight application). For this, we need not modify any of our existing WCF Service or LINQ to SQL.
Add a new "Silverlight User control" (Page3.xaml) and modify the code as follows:
<UserControl x:Class="DemoSL.Page3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="0.133*"/>
<RowDefinition Height="0.137*"/>
<RowDefinition Height="0.14*"/>
<RowDefinition Height="0.143*"/>
<RowDefinition Height="0.147*"/>
<RowDefinition Height="0.3*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.35*"/>
<ColumnDefinition Width="0.55*"/>
</Grid.ColumnDefinitions>
<TextBox Margin="8,8,46,8" Grid.Column="1" Text="{Binding Empno, Mode=TwoWay }" TextWrapping="Wrap" x:Name="txtEmpno" />
<TextBox Margin="8,8,46,8" Text="{Binding Ename, Mode=TwoWay }" TextWrapping="Wrap" Height="23.9" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="1" x:Name="txtEname"/>
<TextBox Margin="8,8,46,8" Text="{Binding Sal, Mode=TwoWay }" TextWrapping="Wrap" Height="23.9" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="2" x:Name="txtSal"/>
<TextBox Margin="8,8,46,8" Text="{Binding Deptno, Mode=TwoWay }" TextWrapping="Wrap" Height="23.9" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="3" x:Name="txtDeptno"/>
<TextBlock Margin="17,8,43,8" Text="Empno:" TextWrapping="Wrap" x:Name="lblEmpno"/>
<TextBlock Margin="17,8,43,8" Text="Ename:" TextWrapping="Wrap" Grid.Row="1" x:Name="lblEname"/>
<TextBlock Margin="17,8,43,8" Text="Salary:" TextWrapping="Wrap" Height="23.9" VerticalAlignment="Stretch" Grid.Row="2" x:Name="lblSal"/>
<TextBlock Margin="17,8,43,9.5" Text="Deptno:" TextWrapping="Wrap" Height="23.9" VerticalAlignment="Stretch" Grid.Row="3" x:Name="lblDeptno"/>
<TextBlock Margin="8,8,64,0" Text="" TextWrapping="Wrap" Height="23.9" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="5" x:Name="lblMsg"/>
<Button HorizontalAlignment="Stretch" Margin="8,8,90,8" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="4" Content="Add Employee" x:Name="btnAdd"/>
</Grid>
</UserControl>
You must observe "Binding" specifications for textbox controls in the above XAML. Modify the code behind as follows:
Partial Public Class Page3
Inherits UserControl
Private objEmp As EmpService.Emp
Public Sub New()
InitializeComponent()
objEmp = New EmpService.Emp
Me.LayoutRoot.DataContext = objEmp
End Sub
Private Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnAdd.Click
Me.lblMsg.Text = "Communicating..."
Dim objService As New EmpService.EmpServiceClient
AddHandler objService.AddCompleted, AddressOf AddEmployeeCompleted
objService.AddAsync(objEmp)
End Sub
Private Sub AddEmployeeCompleted(ByVal sender As Object, ByVal e As System.ComponentModel.AsyncCompletedEventArgs)
Me.lblMsg.Text = "Added Successfully!"
End Sub
End Class
You must observe the "DataContext" property which is being set to the "LayoutRoot" control. Make sure to modify "App.xaml" as follows so that it will start Page3 as the root.
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
Me.RootVisual = New Page3()
End Sub
Next: Explaining two-way binding >>
More Windows Scripting Articles
More By Jagadish Chaterjee
