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