Dock Panel Using Telerik Rad 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.

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

Question: What is a Dock Panel?

In simple terms "It provides flexibility for the user in accessing application, where elements are well aligned with Rich UI based in Dock. The elements in the dock panel are arranged according to the user requirement level. For instance: Left or Right or Top or Bottom".

Let's get this implemented 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_Dock_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_Dock_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"?>
<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_Dock_Panel_Application_WP7.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

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"

xmlns:primitives="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" >

About

<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 Dock Panel 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>

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

using Telerik.Windows.Controls.Primitives;

using Telerik.Windows.Controls;

namespace Rad_Dock_Panel_Application_WP7
{
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, "Addition Using DockPanel-Telerik WP7 via WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center);
}

private void btnAdd_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
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)
{
RadMessageBox.Show("Subtraction Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Subtraction Using DockPanel-Telerik WP7 via WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center);

}

private void btnSub_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
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)
{
RadMessageBox.Show("Multiplication Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Multiplication Using DockPanel-Telerik WP7 via WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center);
}

private void btnMul_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
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)
{
RadMessageBox.Show("Division Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Division Using DockPanel-Telerik WP7 via WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center);
}

private void btnDiv_Click(object sender, RoutedEventArgs e)
{
textBlock3.Text = "";
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 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:

Step 9: The Output of the Division Operation Application looks like this:

I hope this article is useful for you.

4 Comments

Join the conversation! Your thoughts help the community grow.

Arjun Panwar14y ago
It is a wonderful article
- Vijay Prativadi14y ago
  Thanks Arjun!!!
Amit Maheshwari14y agoedited
It's a great effort to accomplish such task keep it up and thanks for sharing.....
- Vijay Prativadi14y ago
  Thanks Amit....!!!