The Telerik Rad Controls for Windows Phone 7 can be downloaded from http://www.telerik.com/products/windows-phone.aspx.
Question: What is RadAnimation?
In simple terms "It provides rich UI based Animation, where it grabs user attention in slicky way. Ex: Fade, Move, Resize and many more".
Let's get this implemented practically for a better idea on this!!
Step 1: The complete code of the IService1.cs looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Rad_WCF_Animation
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService1
{
[OperationContract]
double add(double a, double b);
[OperationContract]
double sub(double a, double b);
[OperationContract]
double mul(double a, double b);
[OperationContract]
double div(double a, double b);
}
}
Step 2: The complete code of the Service1.svc.cs looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Rad_WCF_Animation
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
public class Service1 : IService1
{
public double add(double a, double b)
{
return a + b;
}
public double sub(double a, double b)
{
return a - b;
}
public double mul(double a, double b)
{
return a * b;
}
public double div(double a, double b)
{
return a / b;
}
}
}
Step 3: The complete code of the Web.Config looks like this:
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior>
<!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->
<serviceMetadata httpGetEnabled="true"/>
<!-- To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information -->
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
Step 4: The complete code of the MainPage.xaml looks like this:
<phone:PhoneApplicationPage
x:Class="Rad_Animation_Application.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Rad Animation - WCF Application" FontFamily="Verdana" FontSize="22" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Windows 7 Phone" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30"
HorizontalAlignment="Left"
Margin="0,23,0,0"
Name="textBlock1"
Text="Please Enter First Number: "
FontFamily="Verdana"
FontSize="22"
VerticalAlignment="Top" />
<TextBlock Height="30"
Margin="6,0,0,370"
Name="textBlock2"
Text="Please Enter Second Number: "
FontFamily="Verdana"
FontSize="22" />
<TextBox Height="72"
HorizontalAlignment="Left"
Margin="325,84,0,0"
Name="textBox1"
VerticalAlignment="Top"
Width="131" />
<TextBox Height="72"
HorizontalAlignment="Left"
Margin="325,0,0,0"
Name="textBox2"
VerticalAlignment="Top"
Width="131" />
<TextBlock FontFamily="Verdana"
FontSize="22"
Foreground="Red"
Height="30"
HorizontalAlignment="Left"
Margin="71,153,0,0"
Name="textBlock3"
VerticalAlignment="Top" />
<Button Content="Addition"
FontFamily="Verdana"
FontSize="22"
Background="Red"
Height="72"
HorizontalAlignment="Left"
Margin="9,357,0,0"
Name="button1"
VerticalAlignment="Top"
Width="240"
Click="button1_Click"/>
<Button Content="Subtraction"
FontFamily="Verdana"
FontSize="22"
Background="Blue"
Height="72"
HorizontalAlignment="Left"
Margin="228,406,0,0"
Name="button2"
VerticalAlignment="Top"
Width="240"
Click="button2_Click"/>
<Button Content="Multiplication"
FontFamily="Verdana"
FontSize="22"
Background="Yellow"
Height="72"
HorizontalAlignment="Left"
Margin="12,463,0,0"
Name="button3"
VerticalAlignment="Top"
Width="240"
Click="button3_Click" />
<Button Content="Division"
FontFamily="Verdana"
FontSize="22"
Background="Green"
Height="72"
HorizontalAlignment="Left"
Margin="216,529,0,0"
Name="button4"
VerticalAlignment="Top"
Width="240"
Click="button4_Click"/>
<Border x:Name="border1"
BorderBrush="Red"
BorderThickness="1"
Height="141"
HorizontalAlignment="Left"
Margin="12,207,0,0"
VerticalAlignment="Top"
Width="438"
Visibility="Collapsed">
<TextBlock x:Name="txtResult"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Verdana"
FontSize="26"
FontWeight="Bold"
Foreground="DeepSkyBlue"/>
</Border>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Step 5: The complete code of the CommonFunction.cs looks like this:
using System;
using System.Windows;
using Telerik.Windows.Controls;
namespace Rad_Animation_Application
{
public class CommonFunction
{
#region Public Methods
public void getFade(UIElement a)
{
RadFadeAnimation obj_Animation = new RadFadeAnimation();
obj_Animation.Duration = TimeSpan.FromSeconds(5);
obj_Animation.AutoReverse = true;
obj_Animation.StartOpacity = 1;
obj_Animation.EndOpacity = .2;
RadAnimationManager.Play(a, obj_Animation);
}
public void getMove(UIElement a)
{
RadMoveAnimation obj_Animation = new RadMoveAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
obj_Animation.StartPoint = new Point(-120, -130);
obj_Animation.EndPoint = new Point(80, 80);
obj_Animation.FillBehavior = AnimationFillBehavior.HoldEnd;
// obj_Animation.MoveDirection = MoveDirection.BottomOut;
RadAnimationManager.Play(a, obj_Animation);
}
public void getMoveX(UIElement a)
{
RadMoveXAnimation obj_Animation = new RadMoveXAnimation();
obj_Animation.StartX = -465.32;
obj_Animation.EndX = 400.22;
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
RadAnimationManager.Play(a, obj_Animation);
}
public void getMoveY(UIElement a)
{
RadMoveYAnimation obj_Animation = new RadMoveYAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
obj_Animation.StartY = -515.22;
obj_Animation.EndY = 400.43;
RadAnimationManager.Play(a, obj_Animation);
}
public void getForwardIn(UIElement a)
{
objSwivelAnimation.PlayMode = TransitionPlayMode.Simultaneously;
RadAnimationManager.Play(a, objSwivelAnimation.ForwardInAnimation);
}
public void getForwardOut(UIElement a)
{
objSwivelAnimation.PlayMode = TransitionPlayMode.Simultaneously;
RadAnimationManager.Play(a, objSwivelAnimation.ForwardOutAnimation);
}
public void getBackwardIn(UIElement a)
{
objSwivelAnimation.PlayMode = TransitionPlayMode.Simultaneously;
RadAnimationManager.Play(a, objSwivelAnimation.BackwardInAnimation);
}
public void getBackwardOut(UIElement a)
{
objSwivelAnimation.PlayMode = TransitionPlayMode.Simultaneously;
RadAnimationManager.Play(a, objSwivelAnimation.BackwardOutAnimation);
}
public void getResizeWidth(UIElement a)
{
RadResizeWidthAnimation obj_Animation = new RadResizeWidthAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
obj_Animation.StartWidth = 0;
obj_Animation.EndWidth = 438;
RadAnimationManager.Play(a, obj_Animation);
}
public void getResizeHeight(UIElement a)
{
RadResizeHeightAnimation obj_Animation = new RadResizeHeightAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
obj_Animation.StartHeight = 0;
obj_Animation.EndHeight = 141;
RadAnimationManager.Play(a, obj_Animation);
}
public void getPlane(UIElement a)
{
RadPlaneProjectionAnimation obj_Animation = new RadPlaneProjectionAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Axes = PerspectiveAnimationAxis.XY;
obj_Animation.StartAngleY = -440.22;
obj_Animation.EndAngleY = 432.22;
obj_Animation.Direction = PerspectiveAnimationDirection.CounterClockwise;
obj_Animation.Duration = TimeSpan.FromSeconds(5);
RadAnimationManager.Play(a, obj_Animation);
}
public void getScale(UIElement a)
{
RadScaleXAnimation obj_Animation = new RadScaleXAnimation();
obj_Animation.AutoReverse = true;
obj_Animation.Duration = TimeSpan.FromSeconds(15);
obj_Animation.StartScaleX = 0.33;
obj_Animation.EndScaleX = 10.22;
RadAnimationManager.Play(a, obj_Animation);
}
#endregion
#region Instance Variables
RadSwivelTransition objSwivelAnimation = new RadSwivelTransition();
#endregion
}
}
Step 6: The complete code of the MainPage.xaml.cs looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Telerik.Windows.Controls;
using Rad_Animation_Application.ServiceReference1;
using Rad_Animation_Application;
namespace Rad_Animation_Application
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void add_Call(object sender, addCompletedEventArgs e)
{
txtResult.Text = "Addition Result is: " + e.Result.ToString();
border1.Visibility = System.Windows.Visibility.Visible;
objFunction.getFade(border1);
//objFunction.getMove(border1);
//objFunction.getMoveX(border1);
// objFunction.getMoveY(border1);
//objFunction.getForwardIn(border1);
//objFunction.getForwardOut(border1);
//objFunction.getBackwardOut(border1);
//objFunction.getBackwardIn(border1);
//objFunction.getResizeWidth(border1);
//objFunction.getResizeHeight(border1);
//objFunction.getPlane(border1);
//objFunction.getScale(border1);
}
public void button1_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
border1.Visibility = System.Windows.Visibility.Collapsed;
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
textBlock3.Text = "Please Enter Some Values";
}
else
{
objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
objClient.addAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void sub_Call(object sender, subCompletedEventArgs e)
{
txtResult.Text = "Subtraction Result is: " + e.Result.ToString();
border1.Visibility = System.Windows.Visibility.Visible;
objFunction.getFade(border1);
//objFunction.getMove(border1);
//objFunction.getMoveX(border1);
// objFunction.getMoveY(border1);
//objFunction.getForwardIn(border1);
//objFunction.getForwardOut(border1);
//objFunction.getBackwardOut(border1);
//objFunction.getBackwardIn(border1);
//objFunction.getResizeWidth(border1);
//objFunction.getResizeHeight(border1);
//objFunction.getPlane(border1);
//objFunction.getScale(border1);
}
public void button2_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
border1.Visibility = System.Windows.Visibility.Collapsed;
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
textBlock3.Text = "Please Enter Some Values";
}
else
{
objClient.subCompleted += new EventHandler<subCompletedEventArgs>(sub_Call);
objClient.subAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void mul_Call(object sender, mulCompletedEventArgs e)
{
txtResult.Text = "Multiplication Result is: " + e.Result.ToString();
border1.Visibility = System.Windows.Visibility.Visible;
objFunction.getFade(border1);
//objFunction.getMove(border1);
//objFunction.getMoveX(border1);
// objFunction.getMoveY(border1);
//objFunction.getForwardIn(border1);
//objFunction.getForwardOut(border1);
//objFunction.getBackwardOut(border1);
//objFunction.getBackwardIn(border1);
//objFunction.getResizeWidth(border1);
//objFunction.getResizeHeight(border1);
//objFunction.getPlane(border1);
//objFunction.getScale(border1);
}
public void button3_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
border1.Visibility = System.Windows.Visibility.Collapsed;
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
textBlock3.Text = "Please Enter Some Values";
}
else
{
objClient.mulCompleted += new EventHandler<mulCompletedEventArgs>(mul_Call);
objClient.mulAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void div_Call(object sender, divCompletedEventArgs e)
{
txtResult.Text = "Division Result is: " + e.Result.ToString();
border1.Visibility = System.Windows.Visibility.Visible;
objFunction.getFade(border1);
//objFunction.getMove(border1);
//objFunction.getMoveX(border1);
// objFunction.getMoveY(border1);
//objFunction.getForwardIn(border1);
//objFunction.getForwardOut(border1);
//objFunction.getBackwardOut(border1);
//objFunction.getBackwardIn(border1);
//objFunction.getResizeWidth(border1);
//objFunction.getResizeHeight(border1);
//objFunction.getPlane(border1);
//objFunction.getScale(border1);
}
public void button4_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
border1.Visibility = System.Windows.Visibility.Collapsed;
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
textBlock3.Text = "Please Enter Some Values";
}
else
{
objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
objClient.divAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
#region
Service1Client objClient = new Service1Client();
CommonFunction objFunction = new CommonFunction();
#endregion
}
}
Step 7: The output of the application looks like this:
Step 8: The output of the Nothing Entered Application looks like this:
Step 9: The output of the RadFadeAnimation Application looks like this:
Step 10: The output of the RadMoveApplication Application looks like this:
Step 11: The output of the RadMoveXApplication Application looks like this:
Step 12: The output of the RadMoveYApplication Application looks like this:
Step 13: The output of the RadForwardInAnimation Application looks like this:
Step 14: The output of the RadForwardOutAnimation Application looks like this:
Step 15: The output of the RadBackwardInAnimation Application looks like this:
Step 16: The output of the RadBackwardOutAnimation Application looks like this:
Step 17: The output the RadResizeWidthAnimation of Application looks like this:
Step 18: The output of the RadResizeHeightAnimation Application looks like this:
Step 19: The output of the RadPlaneProjectionAnimation Application looks like this:
Step 20: The output of the RadScaleXAnimation Application looks like this:
I hope this article is useful for you.