Silverlight 5 WCF RIA Services: Part 2

As we saw in our prevoius example WCF Ria Services provide us with a clean and simple way of binding our control to our data model .

Now lets go one step further I would like to design a Complete User Page using WCF Ria Services .

Lets get started . Create a new page NewPage.xaml .

Go to the Data Source.




Select the Associated Control as ComboBox .



Click ok . and the icon changes to combo box as shown below :



Simply Drag and Drop the Article Id on to the NewPage.xaml . The Design Page should now look as below :



Modify the App.xaml to make the NewPage.xaml as the start up and give it a run .



Now go back to the Data Source . select Title and customize .



Select the Associated Control as TextBlock .



Click Ok and the icon changes to TextBlock .



Drag and Drop both to the designer area .



Build and Run it . Title and Body corresponding to the article id are displayed .



Modify the article Id .



Title and Body are modified as shown below :



Behind the scene this was the code that was generated . Wow now that would have been tough . Thanks to WCF Ria Services we were saved . All the Binding work was taken care for you by Ria services Support .

<UserControl x:Class="SLWCFRiaServices.NewPage"
    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" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" xmlns:my="clr-namespace:SLWCFRiaServices.Web" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Article, CreateList=true}" Height="0" LoadedData="articleDomainDataSource_LoadedData" Name="articleDomainDataSource" QueryName="GetArticlesQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DataDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
        <Grid DataContext="{Binding ElementName=articleDomainDataSource, Path=Data}" HorizontalAlignment="Left" Margin="56,29,0,0" Name="grid1" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <sdk:Label Content="Article ID:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />
            <ComboBox DisplayMemberPath="ArticleID" Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" ItemsSource="{Binding Mode=OneWay}" Margin="3" Name="articleIDComboBox" VerticalAlignment="Center" Width="120">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
        </Grid>
        <Grid DataContext="{Binding ElementName=articleDomainDataSource, Path=Data}" HorizontalAlignment="Left" Margin="56,95,0,0" Name="grid2" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <sdk:Label Content="Title:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />
            <TextBlock Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="3" Name="titleTextBlock" Text="{Binding Path=Title, Mode=TwoWay}" VerticalAlignment="Center" />
        </Grid>
        <Grid DataContext="{Binding ElementName=articleDomainDataSource, Path=Data}" HorizontalAlignment="Left" Margin="60,162,0,0" Name="grid3" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <sdk:Label Content="Body:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />
            <TextBlock Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="3" Name="bodyTextBlock" Text="{Binding Path=Body, Mode=TwoWay}" VerticalAlignment="Center" />
        </Grid>
    </Grid>
</UserControl>

In the next post we will learn about some advanced features of WCF RIA Services . Till Then . Happy Coding .