Telerik RadBusyIndicator in Windows Phone 7 Via WCF Service

Introduction

Today, in this article let's learn another new and wonderful 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. The Rad Message Box is used to display the output in a nice and enhanced UI.

Question: What is RadBusyIndicator?

In simple terms "It is a nice UI animation displayed to the user when some process is running busy in execution and takes quite time to get fully executed. So here, the user has to wait some amount of time until the process is fully completed. User gets distracted and moves away from application when it's taking while to execute some operation. So to grab the user attention, we need some UI animations to be displayed in the meanwhile". 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 WCF_Busy_Application

{

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

{

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

<system.web>

</system.web>

<system.serviceModel>

</behavior>

</serviceBehaviors>

</behaviors>

</system.serviceModel>

<system.webServer>

</system.webServer>

</configuration>

Step 4: The complete code of the MainPage.xaml looks like this:

<phone:PhoneApplicationPage

x:Class="Rad_Busy_Indicator_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:telerik="clr-namespace:Telerik.Windows.Controls.BusyIndicator;assembly=Telerik.Windows.Controls.Primitives"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

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

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<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,166,0,0"

Name="textBlock3"

VerticalAlignment="Top" />

<Button Content="Addition"

FontFamily="Verdana"

FontSize="22"

Background="Red"

Height="72"

HorizontalAlignment="Left"

Margin="102,295,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="102,373,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="102,451,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="102,529,0,0"

Name="button4"

VerticalAlignment="Top"

Width="240"

Click="button4_Click"/>

<telerik1:RadBusyIndicator ContentPosition="Bottom"

FontFamily="Verdana" FontSize="22" AnimationStyle="AnimationStyle5"

Name="radBusy1" Foreground="DeepSkyBlue" Margin="42,202,70,304">

</telerik1:RadBusyIndicator>

</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_Busy_Indicator_Application.ServiceReference1;

using Telerik.Windows.Controls;

namespace Rad_Busy_Indicator_Application

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

private void add_Call(object sender, addCompletedEventArgs e)

{

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

radBusy1.IsRunning = false;

}

public void button1_Click(object sender, RoutedEventArgs e)

{

radBusy1.IsRunning = false;

textBlock3.Text = "";

if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))

{

textBlock3.Text = "Please Enter Some Values";

}

else

{

radBusy1.IsRunning = true;

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)

{

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

radBusy1.IsRunning = false;

}

public void button2_Click(object sender, RoutedEventArgs e)

{

radBusy1.IsRunning = false;

textBlock3.Text = "";

if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))

{

textBlock3.Text = "Please Enter Some Values";

}

else

{

radBusy1.IsRunning = true;

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)

{

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

radBusy1.IsRunning = false;

}

public void button3_Click(object sender, RoutedEventArgs e)

{

radBusy1.IsRunning = false;

textBlock3.Text = "";

if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))

{

textBlock3.Text = "Please Enter Some Values";

}

else

{

radBusy1.IsRunning = true;

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)

{

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

radBusy1.IsRunning = false;

}

public void button4_Click(object sender, RoutedEventArgs e)

{

radBusy1.IsRunning = false;

textBlock3.Text = "";

if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))

{

textBlock3.Text = "Please Enter Some Values";

}

else

{

radBusy1.IsRunning = true;

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();

#endregion

}

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

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

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

I hope this article is useful for you. I look forward for your comments and feedback.