Reader Level:

Business App using WCF RIA Services: Part 2

By Mahadesh Mahalingappa on Aug 27, 2011
In this article we would be using all the concept we discussed in the 4 parts of the series Silverlight 5 WCF RIA Service and build a complete Business Application .

Part 1

We will continue to design our Business application . Lets continue with the Payroll view .

Creating remaining Views and adding Transition effects .

Lets add another user control in the Views folder as Payroll.

I follow the same steps as I did for the Author.xaml .

The Final xaml code for Payroll.xaml would look like :

<Grid x:Name="LayoutRoot" Background="White">
        <riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Payroll, CreateList=true}" Height="0" LoadedData="payrollDomainDataSource_LoadedData" Name="payrollDomainDataSource" QueryName="GetPayrollsQuery" Width="0">
                <my:DataDomainContext />
        <sdk:DataGrid AutoGenerateColumns="False" Height="200" HorizontalAlignment="Left" ItemsSource="{Binding ElementName=payrollDomainDataSource, Path=Data}" Margin="0,50,0,0" Name="payrollDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="400" >
                <sdk:DataGridTextColumn Binding="{Binding Path=AuthorID}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Binding="{Binding Path=PayrollID}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Binding="{Binding Path=Salary}"></sdk:DataGridTextColumn>

Comment the Author View placed in the Mainpage.xaml.cs and drag and drop payroll view now.

Build and Run.


Lets also add the Article View .

I would be using Slide In Transition effects in our example to add the effects . For reference

Add references to the Blend Dlls as shown in the Diagram below :


Added the following code to MainPage.xaml.cs .

Do add the namespaces as well .


        <!-- Visual State Created -->

            <VisualStateGroup x:Name="PageTrans">

                    <VisualTransition GeneratedDuration="0:0:1">
                            <CubicEase EasingMode="EaseInOut"/>

                <VisualState x:Name="Start"/>

                <VisualState x:Name="New"/>


        <!-- Visual State End-->

In order to swap between the states add the following code to MainPage constructor . This would create a nice sliding animation when the page loads .

// Swapping Between the states - This code creates a nice Slide In Transition
            if (state = state ^ true)
                VisualStateManager.GoToState(this, "Start", true);
                VisualStateManager.GoToState(this, "New", true);

Lets run the code the Page opens with a nice animation .

Now lets try some different transition effects .

Lets open our solution in Blend and see what we can do .

The project opens up as shown below :


Check out the States Panel - It would look like below :



The default would be Slide In . Lets go and modify it .


Lets change it to say Fade .


You could also play around with the Easing Function as shown below :


Run and check out the animation .

In this post we have covered the Payroll View and we checked out few animations . Thanks . Happy Coding

Mahadesh Mahalingappa
Mahadesh Mahalingappa

I am a C# developer interested in coding in Latest Microsoft Technolgies like Silverlight , WPF and WCF. I am very much interested in advanced concepts like MEF , MVVM, AOP .



Spire.Doc - Free .NET Word API
Use Spire.Doc to create, read, write, print, and convert word documents to OpenXML, RTF, TXT, XPS, EPUB, EMF, HTML, Image and PDF.
Infragistics jQuery Controls

Trending up