Telerik RadWindow 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 RadWindow?

In simple terms "It provides flexibility for the user to access the information or perform some operation using smooth and slicker UI window".

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_Rad_Window
{
    // 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_Rad_Window
{
    // 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="RadWindow_Application_WP7.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:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    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="RadWindow Application - 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
>

        <!--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"
                       HorizontalAlignment="Left"
                       Margin="6,0,0,472"
                       Name="textBlock2"
                       Text="Please Enter Second Number: "
                       FontFamily="Verdana"
                       FontSize="22"
                       VerticalAlignment="Bottom"
/>

            <TextBox Height="72"
                     HorizontalAlignment="Left"
                     Margin="325,84,0,0"
                     Name="textBox1" 
                     VerticalAlignment="Top"
                     Width="131"
/>

            <TextBox Height="72"
                     HorizontalAlignment="Left"
                     Margin="325,6,0,0"
                     Name="textBox2" 
                     VerticalAlignment="Top"
                     Width="131"
/>

            <TextBlock FontFamily="Verdana"
                       FontSize="22"
                       Foreground="Red"
                       Height="30"
                       HorizontalAlignment="Left"
                       Margin="85,202,0,0"
                       Name="textBlock3" 
                       VerticalAlignment="Top"
/>

            <Button Content="Addition"
                    FontFamily="Verdana"
                    FontSize="22"
                    Background="Red"
                    Height="72"
                    HorizontalAlignment="Left"
                    Margin="85,256,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="85,334,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="85,412,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="85,490,0,0"
                    Name="button4"
                    VerticalAlignment="Top"
                    Width="240"
                    Click
="button4_Click"/>

            <telerik:RadWindow x:Name="radWindow1"
                               WindowSizeMode="FitToPlacementTarget"
                               Margin
="0,0,0,12">

                <Border BorderThickness="4" BorderBrush="Black">
                    <Grid Opacity=".9" Background
="Aquamarine">

                        <TextBlock x:Name="txtBlockResult"
                                   Text="Hell"
                                   Foreground="Blue"
                                   FontFamily="Verdana"
                                   FontSize="22"
                                   FontWeight="Bold"
                                   HorizontalAlignment="Right"
                                   VerticalAlignment="Center"
                                   Margin="0,207,-47,373"
                                   Width="432"
                                   Opacity
="1"/>

                        <Button x:Name="btnClose"
                                FontFamily="Verdana"
                                FontSize="22"
                                Height="72"
                                VerticalAlignment="Top"
                                Width="220"
                                HorizontalAlignment="Left"
                                Margin="134,442,0,0"
                                Background="Green" 
                                Foreground="Red"
                                Content="Close"
                                Click="btnClose_Click"
                                Opacity
="1"/>

                    </Grid>
                </Border>
            </telerik:RadWindow>
        </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 RadWindow_Application_WP7.ServiceReference1;

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

        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            radWindow1.IsOpen = false;
        }

        private void add_Call(object sender, addCompletedEventArgs e)
        {
            txtBlockResult.Text = "Addition Result is: " + e.Result;
            radWindow1.IsOpen = true;
        }

        private void button1_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)
        {
            txtBlockResult.Text = "Subtraction Result is: " + e.Result;
            radWindow1.IsOpen = true;
        }

        private void button2_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)
        {
            txtBlockResult.Text = "Multiplication Result is: " + e.Result;
            radWindow1.IsOpen = true;
        }

        private void button3_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)
        {
            txtBlockResult.Text = "Division Result is: " + e.Result;
            radWindow1.IsOpen = true;
        }

        private void button4_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
        Service1Client objClient = new Service1Client();
        #endregion
    }
}


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

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

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

RadWindow3.png

RadWindow4.png
Step 9: The output of the Multiplication Operation Application looks like this:

  RadWindow5.png

RadWindow6.png

I hope this article is useful for you.


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.