Telerik RadNumericUpDown in Windows Phone 7 Via WCF Service

Introduction

Today, in this article let's dig out 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 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 RadNumericUpDown?

In simple terms "It offers flexibility to the user to select the numeric values using control within specified range and performs some expected operations. It includes some cool and nice properties such as Change, Value, Header, Suffix, Repeat Interval and so on.".

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_Numeric
{
// 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]
int add(int a, int b);

[OperationContract]
int sub(int a, int b);

[OperationContract]
int mul(int a, int b);

[OperationContract]
int div(int a, int 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_Numeric
{
// 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 int add(int a, int b)
{
return a + b;
}

public int sub(int a, int b)
{
return a - b;
}

public int mul(int a, int b)
{
return a * b;
}

public int div(int a, int 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>

<serviceMetadata httpGetEnabled="true"/>

<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_Numeric_Control_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:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
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" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input">

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Rad Numeric - WCF Service" FontFamily="Verdana" FontSize="22" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Windows 7 Phone" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerik:RadNumericUpDown HorizontalAlignment="Left"
Margin="0,75,0,0"
VerticalAlignment="Top"
Width="450"
Name="radNum1"
MinValue="0"
MaxValue="500"
ValueFormat="0.0"
FontFamily="Verdana"
FontSize="32"
Header="1st Number:"
Suffix="$"/>

<telerik:RadNumericUpDown HorizontalAlignment="Left"
Margin="0,192,0,0"
VerticalAlignment="Top"
Width="450"
Name="radNum2"
MinValue="0"
MaxValue="500"
ValueFormat="0.0"
FontFamily="Verdana"
FontSize="32"
Header="2nd Number:"
Suffix="$"/>
</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_Numeric_Control_Application.ServiceReference1;
using Telerik.Windows.Controls;

namespace Rad_Numeric_Control_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, "RadNumericControl - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}

public void btnAdd_Click(object sender, RoutedEventArgs e)
{
objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
objClient.addAsync(Convert.ToInt32(radNum1.Value), Convert.ToInt32(radNum2.Value));
}

private void sub_Call(object sender, subCompletedEventArgs e)
{
RadMessageBox.Show("Subtraction Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadNumericControl - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}

public void btnSub_Click(object sender, RoutedEventArgs e)
{
objClient.subCompleted += new EventHandler<subCompletedEventArgs>(sub_Call);
objClient.subAsync(Convert.ToInt32(radNum1.Value), Convert.ToInt32(radNum2.Value));
}

private void mul_Call(object sender, mulCompletedEventArgs e)
{
RadMessageBox.Show("Multiplication Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadNumericControl - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}

public void btnMul_Click(object sender, RoutedEventArgs e)
{
objClient.mulCompleted += new EventHandler<mulCompletedEventArgs>(mul_Call);
objClient.mulAsync(Convert.ToInt32(radNum1.Value), Convert.ToInt32(radNum2.Value));
}

private void div_Call(object sender, divCompletedEventArgs e)
{
RadMessageBox.Show("Division Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadNumericControl - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}

public void btnDiv_Click(object sender, RoutedEventArgs e)
{
objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
objClient.divAsync(Convert.ToInt32(radNum1.Value), Convert.ToInt32(radNum2.Value));
}

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

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