Paranoma Control in Windows Phone 7 Via WCF Service

Introduction

Today, in this article let's dig out one more wonderful concept in Windows Phone whereby communicating using a WCF Service is used to perform some expected arithmetic operation. Once implemented, it gives flexibility to the user to access phone paranoma features and more easily perform expected operations.

The question arises: What is the Paranoma Control?

In simple terms "It is a simplified enhanced UI hub type application, where user navigates across items very easily. Ex: Used in Music, Video Pages, People Pages and so on. Whereas, on the other hand the pivot control can be used with different list of tabs, the tabs are provided with headers and items under it. Ex: Used for Email, Calender Pages and so on".

The question arises: What is the difference between Pivot and Paranoma Control?

S.No	Pivot Control	Paranoma Control
1	Data Driven	Enhanced UI Driven
2	Used when you want to list large items	Simplified way of declaration.
3	Menu items are spread Horizontally	Whole screen is set to spread Horizontally
4	Distinct Sections Shared	Single Section Shared

So, let's get it started.

Step 1: The complete code of IService1.cs looks like this.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Paranoma_WCF
{
    // 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.

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Paranoma_WCF
{
    // 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 Web.Config looks like this.

Code

<?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.

Code
    <phone:PhoneApplicationPage>
    x:Class="Panorama_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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    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="800"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Panorama control-->
        <controls:Panorama Title="Arithmetic">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>
            <!--Panorama item one-->
            <controls:PanoramaItem Header="Addition" >
                <!--Double line list with text wrapping-->
              <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center">
                  <TextBlock Text="Please Enter First Number" FontFamily="Verdana" FontSize="22" Width="299" />
                   <TextBox x:Name="textAdd1" Width="292" />
                   <TextBlock Text="Please Enter Second Number" FontFamily="Verdana" FontSize="22" Width="322" />
                    <TextBox x:Name="textAdd2" Width="292" />
                    <Button x:Name="btnAdd" Content="Addition" FontFamily="Verdana" FontSize="22" Width="280" Click="btnAdd_Click"/>
                    <TextBlock Foreground="Red" x:Name="textblockAddEmpty1" FontFamily="Verdana" FontSize="22"  Width="354" />
                </StackPanel>
            </controls:PanoramaItem>
            <!--Panorama item two-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="Substraction">
                <!--Double line list with image placeholder and text wrapping-->
                <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center">
                    <TextBlock Text="Please Enter First Number" FontFamily="Verdana" FontSize="22" Width="299" />
                    <TextBox x:Name="textSub1" Width="292" />
                    <TextBlock Text="Please Enter Second Number" FontFamily="Verdana" FontSize="22" Width="322" />
                    <TextBox x:Name="textSub2" Width="292" />
                    <Button x:Name="btnSub" Content="Substraction" FontFamily="Verdana" FontSize="22" Width="280" Click="btnSub_Click"/>
                    <TextBlock Foreground="Red" x:Name="textblockSubEmpty1" FontFamily="Verdana" FontSize="22"  Width="354" Height="40" />
                </StackPanel>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="Multiplication">
                <!--Double line list with image placeholder and text wrapping-->
               <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center">
                     <TextBlock Text="Please Enter First Number" FontFamily="Verdana" FontSize="22" Width="299" />
                    <TextBox x:Name="textMul1" Width="292" />
                    <TextBlock Text="Please Enter Second Number" FontFamily="Verdana" FontSize="22" Width="322" />
                    <TextBox x:Name="textMul2" Width="292" />
                    <Button x:Name="btnMul" Content="Multiplication" FontFamily="Verdana" FontSize="22" Width="280"  Click="btnMul_Click"/>}                    <TextBlock Foreground="Red" x:Name="textblockMulEmpty1" FontFamily="Verdana" FontSize="22"  Width="354" Height="40"  />
                </StackPanel>
           </controls:PanoramaItem>
|            <controls:PanoramaItem Header="Division">
                <!--Double line list with image placeholder and text wrapping--
                <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" >
                  <TextBlock Text="Please Enter First Number" FontFamily="Verdana" FontSize="22" Width="299" />
                  <TextBox x:Name="textDiv1" Width="292" />
                  <TextBlock Text="Please Enter Second Number" FontFamily="Verdana" FontSize="22" Width="322" />
                  <TextBox x:Name="textDiv2" Width="292" />
                  <Button x:Name="btnDiv" Content="Division" FontFamily="Verdana" FontSize="22" Width="280" Click="btnDiv_Click" />
                  <TextBlock Foreground="Red" x:Name="textblockDivEmpty1" FontFamily="Verdana" FontSize="22"  Width="354" Height="40" />
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>
   </Grid>
</phone:PhoneApplicationPage>

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

Code

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 Panorama_Application.ServiceReference1;

namespace Panorama_Application

{
    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();
        }
        // Load data for the ViewModel Items
        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

        }
        static void add_Call(object sender, AddCompletedEventArgs e)

        {

            MessageBox.Show(" Addition Result is: " + e.Result.ToString());

        }
        private void btnAdd_Click(object sender, RoutedEventArgs e)

        {

            textblockAddEmpty1.Text = "";

            if (string.IsNullOrEmpty(textAdd1.Text) || string.IsNullOrEmpty(textAdd2.Text))

            {

                textblockAddEmpty1.Text = "Please Enter Some Values";

            }

            else

            {

                Service1Client objClient = new Service1Client();

                objClient.AddCompleted += new EventHandler<AddCompletedEventArgs>(add_Call);

                objClient.AddAsync(Convert.ToDouble(textAdd1.Text), Convert.ToDouble(textAdd2.Text));

                textAdd1.Text = "";

                textAdd2.Text = "";

            }

        }
        static void sub_Call(object sender, SubCompletedEventArgs e)

        {

            MessageBox.Show(" Substraction Result is: " + e.Result.ToString());

        }
        private void btnSub_Click(object sender, RoutedEventArgs e)

        {

            textblockSubEmpty1.Text = "";

            if (string.IsNullOrEmpty(textSub1.Text) || string.IsNullOrEmpty(textSub2.Text))

            {

                textblockSubEmpty1.Text = "Please Enter Some Values";

            }

            else

            {

                Service1Client objClient = new Service1Client();

                objClient.SubCompleted += new EventHandler<SubCompletedEventArgs>(sub_Call);

                objClient.SubAsync(Convert.ToDouble(textSub1.Text), Convert.ToDouble(textSub2.Text));

                textSub1.Text = "";

                textSub2.Text = "";

            }

        }
        static void mul_Call(object sender, MulCompletedEventArgs e)

        {

            MessageBox.Show(" Multiplication Result is: " + e.Result.ToString());

        }
        private void btnMul_Click(object sender, RoutedEventArgs e)

        {

            textblockMulEmpty1.Text = "";

            if (string.IsNullOrEmpty(textMul1.Text) || string.IsNullOrEmpty(textMul2.Text))

            {

                textblockMulEmpty1.Text = "Please Enter Some Values";

            }

            else

            {
                Service1Client objClient = new Service1Client();

                objClient.MulCompleted += new EventHandler<MulCompletedEventArgs>(mul_Call);

                objClient.MulAsync(Convert.ToDouble(textMul1.Text), Convert.ToDouble(textMul2.Text));

                textMul1.Text = "";
                textMul2.Text = "";
            }

        }
        static void div_Call(object sender, DivCompletedEventArgs e)

        {

            MessageBox.Show(" Division Result is: " + e.Result.ToString());

        }
        private void btnDiv_Click(object sender, RoutedEventArgs e)

        {

            textblockDivEmpty1.Text = "";

            if (string.IsNullOrEmpty(textDiv1.Text) || string.IsNullOrEmpty(textDiv2.Text))

            {

                textblockDivEmpty1.Text = "Please Enter Some Values";

            }

            else

            {

                Service1Client objClient = new Service1Client();

                objClient.DivCompleted += new EventHandler<DivCompletedEventArgs>(div_Call);

                objClient.DivAsync(Convert.ToDouble(textDiv1.Text), Convert.ToDouble(textDiv2.Text));

                textDiv1.Text = "";

                textDiv2.Text = "";

            }

        }

    }

}

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

 

Step 7: The Addition Operation output application looks like this.

 

Step 8: The Subtraction Operation Output application looks like this.

 

Step 9: The Nothing Entered Output application looks like this.

 

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