Silverlight 4.0 Data Manipulation and Navigation using CollectionViewSource with WCF RIA Services

(Page 1 of 4 )

This article explains the navigation features available in “CollectionViewSource.” We will also cover CRUD (Create, Read, Update and Delete) operations using “CollectionViewSource.”

My previous article introduced “CollectionViewSource” in Silverlight 4.0. You can check it out here.

To make this article simple, I managed to create a simple Silverlight 4.0 application which consumes a WCF RIA Service created using the WCF RIA Service Library. If you are not familiar with developing applications using the WCF RIA Service Library and Silverlight 4.0, check out a beginner’s article.

The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 on Windows 7 Ultimate edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.

Navigating through data using CollectionViewSource in Silverlight: screen design

Way back in Visual Basic 6.0, we used to have RecordSet. It used to have the following methods: MoveNext, MovePrevious, MoveLast and MoveFirst. Those methods are mainly used to maintain the “current” object in memory so that it could be bound to controls on the form. We can use “CollectionViewSource” to make use of such functionality.

Let us consider the following:

<UserControl x:Class="SLBusinessAppWithRiaLib.CvsNavigation"

 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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" Width="500" Height="500">

 <UserControl.Resources>

 <CollectionViewSource x:Key="cvsEmp"/>

 </UserControl.Resources>

 

 <Grid x:Name="LayoutRoot" Background="White">

 <Grid.RowDefinitions>

 <RowDefinition Height="Auto" />

 <RowDefinition Height="Auto" />

 <RowDefinition Height="*" />

 </Grid.RowDefinitions>

 <Grid x:Name="lytEmpForm" Margin="8" DataContext="{Binding Source={StaticResource cvsEmp}}">

 <Grid.RowDefinitions>

 <RowDefinition Height="Auto"/>

 <RowDefinition Height="Auto"/>

 <RowDefinition Height="Auto"/>

 <RowDefinition Height="Auto"/>

 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>

 <ColumnDefinition Width="0.20*"/>

 <ColumnDefinition Width="0.50*"/>

 <ColumnDefinition Width="0.30*"/>

 </Grid.ColumnDefinitions>

 <sdk:Label x:Name="lblEmpno" Margin="8" Content="Empno:"/>

 <sdk:Label x:Name="lblEname" Margin="8" Content="Ename:" Grid.Row="1"/>

 <sdk:Label x:Name="lblSal" Margin="8" Content="Salary:" Grid.Row="2"/>

 <sdk:Label x:Name="lblDeptno" Margin="8" Content="Deptno:" Grid.Row="3"/>

 <TextBox x:Name="txtEmpno" Grid.Column="1" Margin="8" Height="24" Text="{Binding Path=empno, Mode=TwoWay}"/>

 <TextBox x:Name="txtEname" Grid.Column="1" Margin="8" Grid.Row="1" Height="24" Text="{Binding Path=ename, Mode=TwoWay}"/>

 <TextBox x:Name="txtSal" Grid.Column="1" Margin="8" Grid.Row="2" Height="24" Text="{Binding Path=sal, Mode=TwoWay}"/>

 <TextBox x:Name="txtDeptno" Grid.Column="1" Margin="8" Grid.Row="3" Height="24" Text="{Binding Path=deptno, Mode=TwoWay}"/>

 </Grid>

 <StackPanel x:Name="lytBtns" Margin="8" Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Left">

 <Button x:Name="btnFirst" Content="First" Margin="0,0,8,0" Width="35" Height="25"/>

 <Button x:Name="btnPrevious" Content="Previous" Margin="0,0,8,0" Width="60" Height="25"/>

 <Button x:Name="btnNext" Content="Next" Margin="0,0,8,0" Width="45" Height="25"/>

 <Button x:Name="btnLast" Content="Last" Margin="0,0,8,0" Width="45" Height="25"/>

 </StackPanel>

 <sdk:DataGrid 

 x:Name="dgEmp"

 Margin="8" Grid.Row="2" MinHeight="200" IsReadOnly="True"

 ItemsSource="{Binding Source={StaticResource cvsEmp}}"/>

 

 </Grid>

</UserControl>

The screen design would look similar to the following:

I will explain the above code in upcoming sections.

Next: Explanation of screen design >>
 

More Silverlight Articles
More By Jagadish Chaterjee

Comments On: Silverlight 4.0 Data Manipulation and Navigation using CollectionViewSource with WCF RIA Services

· Hi guys, This is my next article on Silverlight 4.0 focusing on manipulating...   >>> Post your comment now!