Silverlight using vb.net

Question

Dear Experts, I am using VS2010, VB.NET, Silverlight 4. I need the code for 2 way data binding the UI controls with VB class .Please find the code which i am working

xaml

<Grid  x:Name="LayoutRoot" Background="White"   Width="300"  Height="300" Loaded="LayoutRoot_Loaded">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="200"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Rectangle  Fill="blue"   Width="100"  Height="10" Grid.ColumnSpan="2" Margin="152,26,148,28"></Rectangle>
    <TextBlock Text="Name" Grid.Row="1" Grid.Column="0"></TextBlock>
    <TextBlock Text="Address 1" Grid.Row="2" ></TextBlock>
    <TextBlock Text="Address 2" Grid.Row="3" Grid.Column="0"></TextBlock>
    <TextBlock Text="City" Grid.Row="4" Grid.Column="0"></TextBlock>
    <TextBlock Text="State" Grid.Row="5" Grid.Column="0"></TextBlock>
    <TextBlock Text="Zipcode" Grid.Row="6" Grid.Column="0"></TextBlock>
    <TextBox x:Name="txtName" Text="{Binding Name, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Height="20" Width="100"></TextBox>
    <TextBox x:Name="txtAddress1" Text="{Binding Address1, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Height="20" Width="100"></TextBox>
    <TextBox x:Name="txtAddress2" Text="{Binding Address2, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Height="20" Width="100"></TextBox>
    <TextBox x:Name="txtCity" Text="{Binding City, Mode=TwoWay}" Grid.Row="4" Grid.Column="1" Height="20" Width="100"></TextBox>
    <TextBox x:Name="txtState" Text="{Binding State, Mode=TwoWay}" Grid.Row="5" Grid.Column="1" Height="20" Width="100"></TextBox>
    <TextBox x:Name="txtZipcode" Text="{Binding Zipcode, Mode=TwoWay}" Grid.Row="6" Grid.Column="1" Height="20" Width="100"></TextBox>

    <Button Grid.Row="7" Grid.Column="0"  Width="50" Content="Save" x:Name="btnSave" Click="btnSave_Click"></Button>
    <Button Grid.Row="7" Grid.Column="1" Width="50" Content="Clear" x:Name="btnClear" Click="btnClear_Click"></Button>
</Grid>

VB code:

Partial Public Class MainPage Inherits UserControl

Dim address As Address

Public Sub New()
    address = New Address("nameit", "address1", "address2", "Alexandria", "VA", "22314")


    txtName.DataContext = address
    'txtAddress1.DataContext = address
    'txtAddress2.DataContext = address
    'txtCity.DataContext = address
    'txtState.DataContext = address
    'txtZipcode.DataContext = address
    'LayoutRoot.DataContext = address

    InitializeComponent()
End Sub

Private Sub btnSave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.Click
    MessageBox.Show(address.Name + " " + address.Address1 + " " + address.Address2 + " " + address.City + " " + address.State + " " + address.Zipcode)
End Sub

Private Sub btnClear_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClear.Click
    MessageBox.Show("click")
End Sub


Private Sub LayoutRoot_Loaded(ByVal sender As System.Object, ByVal e As RoutedEventArgs)
    'to focus on particular text box - System.Windows.Browser.HtmlPage.Plugin.Focus()   txt_Name.Focus()

End Sub

End Class

Address.vb

Imports System.ComponentModel

Public Class Address Implements INotifyPropertyChanged

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

Private _name As String
Private _address1 As String
Private _address2 As String
Private _city As String
Private _state As String
Private _zipcode As String

Public Sub OnPropertyChanged(ByVal e As PropertyChangedEventArgs)
    If PropertyChangedEvent IsNot Nothing Then
        RaiseEvent PropertyChanged(Me, e)
    End If
End Sub

Public Property Name() As String
    Get
        Return _name
    End Get
    Set(ByVal value As String)
        _name = value
        OnPropertyChanged(New PropertyChangedEventArgs("Name"))
    End Set
End Property

Public Property Address1() As String
    Get
        Return _address1
    End Get
    Set(ByVal value As String)
        _address1 = value
        OnPropertyChanged(New PropertyChangedEventArgs("Address1"))
    End Set
End Property

Public Property Address2() As String
    Get
        Return _address2
    End Get
    Set(ByVal value As String)
        _address2 = value
        OnPropertyChanged(New PropertyChangedEventArgs("Address2"))
    End Set
End Property

Public Property City() As String
    Get
        Return _city
    End Get
    Set(ByVal value As String)
        _city = value
        OnPropertyChanged(New PropertyChangedEventArgs("City"))
    End Set
End Property

Public Property State() As String
    Get
        Return _state
    End Get
    Set(ByVal value As String)
        _state = value
        OnPropertyChanged(New PropertyChangedEventArgs("State"))
    End Set
End Property

Public Property Zipcode() As String
    Get
        Return _zipcode
    End Get
    Set(ByVal value As String)
        _zipcode = value
        OnPropertyChanged(New PropertyChangedEventArgs("Zipcode"))
    End Set
End Property

Public Sub New(ByVal name As String, ByVal address1 As String, ByVal address2 As String, ByVal city As String, ByVal state As String, ByVal zipcode As String)
    Me.Name = name
    Me.Address1 = address1
    Me.Address2 = address2
    Me.City = city
    Me.State = state
    Me.Zipcode = zipcode

End Sub

End Class

Kind regards, Kumar

Answer 1

Set the datacontext attribute of LayoutRoot to you address. Then in your xaml do something like this:

<TextBox ... Text="{Binding Name}" />

Here is a simple example:

XAML of MAinPage

<UserControl x:Class="VBSLTest.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">
        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="TextBox1" VerticalAlignment="Top" Width="192" Text="{Binding Name}" />
    </Grid>
</UserControl>

VB Code Behind:

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        Dim address As Address
        Address = New Address()
        LayoutRoot.DataContext = address
    End Sub

End Class

VB Simple Address Class:

Public Class Address

    Private _name As String = "Some Text"

    Public Property Name() As String
        Get
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
        End Set
    End Property
End Class

Notice I am only setting DataContext once and that is for LayoutRoot.