Telerik RadAnimations in Windows Phone 7 Via WCF Service


Introduction

Today, in this article let's learn another new and interesting concept related to Windows Phone 7, whereby communicating with WCF Service to perform some operation.

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:

Animation1.png

Step 8: The output of the Nothing Entered Application looks like this:

Animation2.png

Step 9: The output of the RadFadeAnimation Application looks like this:

Animation3.png

Animation4.png
Step 10: The output of the RadMoveApplication Application looks like this:

Animation5.png

Animation6.png
Step 11: The output of the RadMoveXApplication Application looks like this:

Animation7.png

Animation8.png
Step 12: The output of the RadMoveYApplication Application looks like this:

Animation9.png

Animation10.png
Step 13: The output of the RadForwardInAnimation Application looks like this:

Animation11.png

Animation12.png
Step 14: The output of the RadForwardOutAnimation Application looks like this:

Animation13.png

Step 15: The output of the RadBackwardInAnimation Application looks like this:

  Animation14.png

Animation15.png
Step 16: The output of the RadBackwardOutAnimation Application looks like this:

Animation16.png

Step 17: The output the RadResizeWidthAnimation of Application looks like this:

Animation17.png

Animation18.png
Step 18: The output of the RadResizeHeightAnimation Application looks like this:

Animation19.png

Animation20.png
Step 19: The output of the RadPlaneProjectionAnimation Application looks like this:

Animation21.png

Animation22.png
Step 20: The output of the RadScaleXAnimation Application looks like this:

  Animation23.png
 

Animation24.png
I hope this article is useful for you.

Up Next
    Ebook Download
    View all
    Learn
    View all
    MVC Corporation is consulting and IT services based company.