Input Prompt in Windows Phone 7 Via WCF Service

Introduction

First, before we start working with an Input Prompt, we need to download the Coding4Fun Toolkit from http://coding4fun.codeplex.com/. Later add Coding4Fun.Phone.Controls.dll as a reference for our newly created project.

Today, in this article let's discuss another new concept related to Windows Phone 7, whereby communicating with a WCF Service to perform some operation.

Question: What is an Input Prompt?

In simple terms "It enables user to enter some input value, serves better in well customized way with rich UI".

Let's get this started off now!!!

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;
using SilverlightApplication1;
 
namespace WCF_Input_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;
using SilverlightApplication1; 

namespace WCF_Input_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>
          <!-- 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="Input_Prompt_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" xmlns:toolkit="clr
namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" >
    <!--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="Input Prompt 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>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Addition" Height="72" HorizontalAlignment="Left" Margin="132,85,0,0" Name="button1"
VerticalAlignment="Top" Width="231" Click="button1_Click" />
            <Button Content="Substraction" Height="72" HorizontalAlignment="Left" Margin="132,149,0,0"
Name="button2" VerticalAlignment="Top" Width="231" Click="button2_Click" />
            <Button Content="Multiplication" Height="72" HorizontalAlignment="Left" Margin="132,215,0,0"
Name="button3" VerticalAlignment="Top" Width="231" Click="button3_Click" />
            <Button Content="Division" Height="72" HorizontalAlignment="Left" Margin="132,281,0,0" Name="button4" VerticalAlignment="Top" Width="231" Click="button4_Click" />
            <toolkit:ToggleSwitch Background="Red" Header="Show Input Prompt" FontFamily="Verdana" FontSize="22" Checked="toggleSwitch1_Checked" Unchecked="toggleSwitch1_Unchecked" Height="108" HorizontalAlignment="Left" Margin="99,6,0,0" Name="toggleSwitch1" VerticalAlignment="Top" Width="351" />
        </Grid>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>  
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
    <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem Text="MenuItem 1"/>                           
        <shell:ApplicationBarMenuItem Text="MenuItem 2"/>      
    </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
</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 Coding4Fun.Phone.Controls;
using Input_Prompt_Application.ServiceReference1;
using SilverlightApplication1;
 
namespace Input_Prompt_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }
        private void add_Call(object sender, addCompletedEventArgs e)
        {
            MessageBox.Show("Addition Result is: "+e.Result.ToString());
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            objClient.addCompleted +=new EventHandler<addCompletedEventArgs>(add_Call);
            objClient.addAsync(Convert.ToDouble(objPrompt.Value),
                Convert.ToDouble(objPrompt1.Value));
        }
        private void sub_Call(object sender, subCompletedEventArgs e)
        {
            MessageBox.Show("Substraction Result is: " + e.Result.ToString());
        }
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            objClient.subCompleted +=new EventHandler<subCompletedEventArgs>(sub_Call);
            objClient.subAsync(Convert.ToDouble(objPrompt.Value),
                Convert.ToDouble(objPrompt1.Value));
        }
        private void mul_Call(object sender, mulCompletedEventArgs e)
        {
            MessageBox.Show("Substraction Result is: " + e.Result.ToString());
        }
        private void button3_Click(object sender, RoutedEventArgs e)
        {
            objClient.mulCompleted +=new EventHandler<mulCompletedEventArgs>(mul_Call);
            objClient.mulAsync(Convert.ToDouble(objPrompt.Value),
                Convert.ToDouble(objPrompt1.Value));
        }
        private void div_Call(object sender, divCompletedEventArgs e)
        {
            MessageBox.Show("Division Result is: " + e.Result.ToString());
        }
        private void button4_Click(object sender, RoutedEventArgs e)
        {
            objClient.divCompleted +=new EventHandler<divCompletedEventArgs>(div_Call);
            objClient.divAsync(Convert.ToDouble(objPrompt.Value),
                Convert.ToDouble(objPrompt1.Value));
        }
        private void Bind()
        {
            objPrompt.Background = new SolidColorBrush(Colors.LightGray);
            objPrompt.Foreground = new SolidColorBrush(Colors.Blue);
            objPrompt.FontSize = 22;
            objPrompt.FontFamily = new FontFamily("Verdana");
            objPrompt.IsCancelVisible = true;
            objPrompt.Title = "Arithmetic Operation";
            objPrompt.Message = "Please Enter First Number";
            objPrompt.Show();
            objPrompt1.Background = new SolidColorBrush(Colors.LightGray);
            objPrompt1.VerticalAlignment = System.Windows.VerticalAlignment.Center;
            objPrompt1.Foreground = new SolidColorBrush(Colors.Blue);
            objPrompt1.FontSize = 22;
            objPrompt1.FontFamily = new FontFamily("Verdana");
            objPrompt1.IsCancelVisible = true; objPrompt1.Title = "Arithmetic Operation";
            objPrompt1.Message = "Please Enter Second Number";
            objPrompt1.Show();
        }

        private void toggleSwitch1_Checked(object sender, RoutedEventArgs e)
        {
            toggleSwitch1.Content = "ON";
            toggleSwitch1.SwitchForeground = new SolidColorBrush(Colors.Green);
            Bind();
        }

        private void toggleSwitch1_Unchecked(object sender, RoutedEventArgs e)
        {

            toggleSwitch1.Content = "OFF";
            toggleSwitch1.Background = new SolidColorBrush(Colors.Red);
        }
        #region Instance Variable InputPrompt objPrompt = new InputPrompt();
        InputPrompt objPrompt1 = new InputPrompt();
        Service1Client objClient = new Service1Client();
        #endregion
    }
}

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



Step 7: The output of the Input Entered Application looks like this:





Step 8: The output of the Addition Application looks like this:



Step 9: The output of the Division Application looks like this:



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