Microsoft Silverlight - SPLessons

Microsoft Silverlight Data Binding

Home > Lesson > Chapter 2
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Microsoft Silverlight Data Binding

Microsoft Silverlight Data Binding

shape Description

In Silverlight data binding is a part of an application that gives a straightforward and simple path for Windows Runtime applications utilizing incomplete classes to show and cooperate with information. Data binding permits the stream of information among UI components and the information object on client network.The administration of information is isolated completely, from the way information is shown in this system. Data binding can be classified into 2 types:

One way data binding

shape Description

Here the information is constrained from its authority to its objective.

shape Examples

Below is the example that describe the one way data binding [c]<UserControl x:Class = "DataBinding.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "400"> <Grid x:Name = "LayoutRoot" Background = "White"> <Grid.RowDefinitions> <RowDefinition Height = "Auto" /> <RowDefinition Height = "Auto" /> <RowDefinition Height = "*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width = "Auto" /> <ColumnDefinition Width = "200" /> </Grid.ColumnDefinitions> <TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock> <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" Text = "{Binding Name, Mode=OneWay}"/> <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock> <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin="2" Text = "{Binding Age, Mode = OneWay}"/> <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> <Button Content = "_Show..." Click = "Button_Click" /> </StackPanel> </Grid> </UserControl>[/c] Here in the above example,just entered the person details like name,age etc.And entering the values of a particular person will be shown by executing the below example. [c]using System.Windows; using System.Windows.Controls; namespace DataBinding { public partial class MainPage : UserControl { Person person = new Person { Name = "Salman", Age = 26 }; public MainPage() { InitializeComponent(); this.DataContext = person; } private void Button_Click(object sender, RoutedEventArgs e) { string message = person.Name + " is " + person.Age; MessageBox.Show(message); } } public class Person { private string nameValue; public string Name { get { return nameValue; } set { nameValue = value; } } private double ageValue; public double Age { get { return ageValue; } set { if (value != ageValue) { ageValue = value; } } } } } [/c] After running the above execution will display the output as name and age of a person.And we can add another person name and age in the respectively fields.

Two way data binding

shape Description

Here the client can alter the information through the client components and have that information upgraded in the origin. On the off chance that the source alters while the client is taking a view at the perspective, you need the perspective to be redesigned.

shape Examples

The below example describes the two way data binding. [c]<UserControl x:Class = "DataBinding.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "400"> <Grid x:Name = "LayoutRoot" Background = "White"> <Grid.RowDefinitions> <RowDefinition Height = "Auto" /> <RowDefinition Height = "Auto" /> <RowDefinition Height = "*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width = "Auto" /> <ColumnDefinition Width = "200" /> </Grid.ColumnDefinitions> <TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock> <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" Text = "{Binding Name, Mode=TwoWay}"/> <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock> <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" Text = "{Binding Age, Mode = TwoWay}"/> <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> <Button Content = "_Show..." Click = "Button_Click" /> </StackPanel> </Grid> </UserControl>[/c] After performing the above execution it provides the output as name of the person and age in a single window insted of displaying them in different dialogue box.

Summary

shape Points

  • Microsoft Silverlight Data Binding - Data binding is a part of an application for displaying a specific result. One Way Data Binding - Constrained from its authority objectives. Two Way Data Binding - In which one can alter the information from the client components.