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 .