Wrap Panel in Windows Phone 7 via WCF Service

Introduction

In this article let' see one of the good and interesting concept in windows phone whereby communicating with WCF Service to perform some expected operation. This concept made the phone user to handle the task easily in light weighted mode.

Question Arises: What is Wrap Panel?

The Wrap Panel acts as a container which holds set of controls to provide consistent look for the user.

So, let's get it started off.

Step 1 : The Complete Code of 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_Wrap_Panel
{
    // 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 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_Wrap_Panel
{
    // 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:

<?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 MainPage.xaml looks like this:

<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="Wrap_Panel_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: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">
    <!--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="Vijay's Wrap Panel Application" FontFamily="Verdana" FontSize="22" Style=
{StaticResource|PhoneTextNormalStyle}"/>
            <TextBlck 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">
            <toolkit:WrapPanel FlowDirection="LeftToRight" ItemHeight="300" ItemWidth="100" Orientation="Horizontal" Margin="26,292,19,97">
                <Button x:Name="btnAdd" Foreground="Black" Background="Aqua" Click="btnAdd_Click" Width="110" Height="100" FontFamily="Verdana"
FontSize="22" Content="Add"/>
                <Button x:Name="btnSub" Foreground="Black" Height="103" Width="111" Background="Aqua" Click="btnSub_Click" FontFamily="Verdana"
FontSize="22" Content="Sub"></Button>
                <Button x:Name="btnMul" Foreground="Black" FontFamily="Verdana" FontSize="22" Background="Aqua" Click="btnMul_Click" Content="Mul"
Height="105" />
                <Button x:Name="btnDiv" Foreground="Black" FontFamily="Verdana" FontSize="22" Background="Aqua" Click="btnDiv_Click" Content="Div"
Height="106" />
            </toolkit:WrapPanel>
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="114,554,0,0" Name="textBlock1" FontFamily="Verdana" FontSize="22"
VerticalAlignment="Top" />
            <TextBlock Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="26,41,0,0" Name="textBlock2" Text="Please
Enter First Number" VerticalAlignment="Top" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="326,18,0,0" Name="textBox1" VerticalAlignment="Top" Width="124" />
            <TextBlock Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="9,129,0,0" Name="textBlock3" Text="Please
Enter Second Number" VerticalAlignment="Top" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="326,113,0,0" Name="textBox2" VerticalAlignment="Top" Width="124" />
        </Grid>
    </Grid>  
</phone:PhoneApplicationPage>

Step 5 : The Complete Code of 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 Wrap_Panel_Application.ServiceReference1;
namespace Wrap_Panel_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        static void AddCall(object sender, AddCompletedEventArgs e)
        {
            MessageBox.Show(" The Addition Result is: " + e.Result.ToString());
        }
        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            textBlock1.Text = "";
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                textBlock1.Text = "Please Enter Values";
                textBlock1.Foreground = new SolidColorBrush(Colors.Red);
            }
            else
            {
                Service1Client objClient = new Service1Client();
                objClient.AddCompleted += new EventHandler<AddCompletedEventArgs>(AddCall);
                objClient.AddAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = ""; textBox2.Text = "";
            }
        }
        static void SubCall(object sender, SubCompletedEventArgs e)
        {
            MessageBox.Show(" The Substraction Result is: " + e.Result.ToString());
        }
        private void btnSub_Click(object sender, RoutedEventArgs e)
        {
            textBlock1.Text = "";
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                textBlock1.Text = "Please Enter Values";
                textBlock1.Foreground = new SolidColorBrush(Colors.Red);
            }
            else
            {
                Service1Client objClient = new Service1Client();
                objClient.SubCompleted += new EventHandler<SubCompletedEventArgs>(SubCall);
                objClient.SubAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = ""; textBox2.Text = "";
            }
        }
        static void MulCall(object sender, MulCompletedEventArgs e)
        {
            MessageBox.Show(" The Multiplication Result is: " + e.Result.ToString());
        }
        private void btnMul_Click(object sender, RoutedEventArgs e)
        {
            textBlock1.Text = "";
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                textBlock1.Text = "Please Enter Values";
                textBlock1.Foreground = new SolidColorBrush(Colors.Red);
            }
            else
            {
                Service1Client objClient = new Service1Client();
                objClient.MulCompleted += new EventHandler<MulCompletedEventArgs>(MulCall);
                objClient.MulAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = ""; textBox2.Text = "";
            }
        }
        static void DivCall(object sender, DivCompletedEventArgs e)
        {
            MessageBox.Show(" The Division Result is: " + e.Result.ToString());
        }

        private void btnDiv_Click(object sender, RoutedEventArgs e)
        {
            textBlock1.Text = "";
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                textBlock1.Text = "Please Enter Values";
                textBlock1.Foreground = new SolidColorBrush(Colors.Red);
            }
            else
            {
                Service1Client objClient = new Service1Client();
                objClient.DivCompleted += new EventHandler<DivCompletedEventArgs>(DivCall);
                objClient.DivAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }
    }
}

Step 6 : The Output of the Application looks like this:



Step 7 : The Addition Operation Output Application looks like this:



Step 8 : The Nothing Entered Output Application looks like this:



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

Thanks Vijay Prativadi.