Telerik RadTransition in Windows Phone 7 Via WCF Service

Introduction

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

The Telerik Rad Controls for Windows Phone 7 can be found from http://www.telerik.com/products/windows-phone.aspx.

The Rad Message Box is used to display the output in a nice and enhanced UI.

Question: What is RadTransition?

In simple terms "It enables to define unique set of animations and get's rendered to specific controls".

Let's get this implemented practically for a better idea of 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 WCF_Transition
{
    // 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 WCF_Transition
{
    // 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 xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    x:Class="Rad_Transition_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 Transition - WCF Service" 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">
            <telerik:RadTransitionControl x:Name="radTransition1">
                <telerik:RadTransitionControl.Content>
                    <Grid>

            <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" />

             <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  Name="border1"
                     BorderBrush="Silver"
                     BorderThickness="1"
                     Height="189"
                     HorizontalAlignment="Left"
                     Margin="12,162,0,0"
                     VerticalAlignment="Top"
                     Width="438" >

          <TextBlock HorizontalAlignment="Stretch"
                     VerticalAlignment="Center"
                     FontFamily="Verdana"
                     FontSize="22"
                     Foreground="DeepSkyBlue"/>
                        </Border>

                    </Grid>
                </telerik:RadTransitionControl.Content>

            </telerik:RadTransitionControl>

        </Grid>
       </Grid>

</phone:PhoneApplicationPage>

Step 5: 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 Rad_Transition_Application.ServiceReference1;
using Telerik.Windows.Controls;

namespace Rad_Transition_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void add_Call(object sender, addCompletedEventArgs e)
        {
            objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };

            objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };

            radTransition1.Transition = objTransition;

            RadMessageBox.Show("Addition Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);

        }

        public void button1_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
            }
            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)
        {
            objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
            objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
            radTransition1.Transition = objTransition;
            RadMessageBox.Show("Subtraction Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }

        public void button2_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
            }
            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)
        {
            objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };

            objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
            radTransition1.Transition = objTransition;
            RadMessageBox.Show("Multiplication Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }

        public void button3_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
            }
            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)
        {
            objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
            objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
            radTransition1.Transition = objTransition;
            RadMessageBox.Show("Division Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);

        }

        public void button4_Click(object sender, RoutedEventArgs e)
        {

            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Transition - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);

            }
            else
            {

                objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
                objClient.divAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }

        #region Instance Variables
        Service1Client objClient = new Service1Client();
        RadTransition objTransition = new RadTransition();
        #endregion
    }
}

Step 6: The output of the application looks like this:

Step 7: The output of the Nothing Entered looks like this:

Step 8: The output of the Addition Operation Application looks like this:

I hope this article is useful for you.