Business App using WCF RIA Services: Part 2

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">
            <riaControls:DomainDataSource.DomainContext>
                <my:DataDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
        <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:DataGrid.Columns>
                <sdk:DataGridTextColumn Binding="{Binding Path=AuthorID}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Binding="{Binding Path=PayrollID}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Binding="{Binding Path=Salary}"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>

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 http://www.c-sharpcorner.com/UploadFile/Mahadesh/8886/

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 .

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

        <!-- Visual State Created -->
        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="PageTrans">

                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:1">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                        <VisualTransition.GeneratedEasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>

                <VisualState x:Name="Start"/>

                <VisualState x:Name="New"/>
            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>

        <!-- 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);
            }
 
            else
            {
                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