Introduction
Today, in this article let's learn another wonderful concept in Windows Phone whereby communication using a WCF Service is used to perform some expected arithmetic operation. Once implemented, it gives flexibility to the user to access the phone in the various orientations available as per the user choice.
Question: What is Orientation Changes?
In simple terms "It provides a simple enhanced UI to the user for accessing device features in Portrait or Landscape mode depending upon user choice".
Question: What is Portrait and Landscape Orientations?
In simple terms "Portrait is Vertical Orientation Display of Device. It is by default selected value for Windows Phone 7". In simple terms "Landscape is Horizontal Orientation Display of Device."
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_Orientation
{
// 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_Orientation
{
// 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
x:Class="Orientation_Changes_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="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True" OrientationChanged="PhoneApplicationPage_OrientationChanged" Loaded="PhoneApplicationPage_Loaded">
<!--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 Orientation Changes 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">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock Text="Please Enter First Number " FontFamily="Verdana" FontSize="22" TextAlignment="Center"/>
<TextBox x:Name="textBox1"/>
<TextBlock Text="Please Enter Second Number" FontFamily="Verdana" FontSize="22" />
<TextBox x:Name="textBox2"/>
<Button x:Name="btnAdd" FontFamily="Verdana" Content="Addition" FontSize="22" Click="btnAdd_Click"/>
<Button x:Name="btnSub" FontFamily="Verdana" Content="Substraction" FontSize="22" Click="btnSub_Click"/>
<Button x:Name="btnMul" FontFamily="Verdana" Content="Multiplication" FontSize="22" Click="btnMul_Click"/>
<Button x:Name="btnDiv" FontFamily="Verdana" Content="Division" FontSize="22" Click="btnDiv_Click"/>
<TextBlock x:Name="errorText" FontFamily="Verdana" FontSize="22" Foreground="red" Width="317" />
</StackPanel>
</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 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 Orientation_Changes_Application.ServiceReference1;
namespace Orientation_Changes_Application
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(PhoneApplicationPage_OrientationChanged);
}
static void add_Call(object sender, addCompletedEventArgs e)
{
MessageBox.Show("Addition Result is: " + e.Result.ToString());
}
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
errorText.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
errorText.Text = "Please Enter Some Values";
}
else
{
Service1Client objClient = new Service1Client();
objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
objClient.addAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.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)
{
errorText.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
errorText.Text = "Please Enter Some Values";
}
else
{
Service1Client objClient = new Service1Client();
objClient.subCompleted += new EventHandler<subCompletedEventArgs>(sub_Call);
objClient.subAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.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)
{
errorText.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
errorText.Text = "Please Enter Some Values";
}
else
{
Service1Client objClient = new Service1Client();
objClient.mulCompleted += new EventHandler<mulCompletedEventArgs>(mul_Call);
objClient.mulAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.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)
{
errorText.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
errorText.Text = "Please Enter Some Values";
}
else
{
Service1Client objClient = new Service1Client();
objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
objClient.divAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation == PageOrientation.PortraitUp || e.Orientation == PageOrientation.PortraitDown || e.Orientation == PageOrientation.Portrait))
{
btnAdd.Visibility = Visibility.Visible;
btnSub.Visibility = System.Windows.Visibility.Visible;
btnMul.Visibility = System.Windows.Visibility.Collapsed;
btnDiv.Visibility = System.Windows.Visibility.Collapsed;
}
else if ((e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight || e.Orientation == PageOrientation.Landscape))
{
btnMul.Visibility = System.Windows.Visibility.Visible;
btnDiv.Visibility = System.Windows.Visibility.Visible;
btnAdd.Visibility = System.Windows.Visibility.Collapsed;
btnSub.Visibility = System.Windows.Visibility.Collapsed;
}
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
btnMul.Visibility = System.Windows.Visibility.Collapsed;
btnDiv.Visibility = System.Windows.Visibility.Collapsed;
}
}
}
Step 6: The Output of the Application looks like this.
![Orientation0.png]()
Step 7: The Addition Operation (Portrait) output of the application looks like this.
![Orientation1.png]()
![Orientation2.png]()
Step 8: The Multiplication and Division (Landscape) application output looks like this.
![Orientation0.1.png]()
Step 9: The Nothing Entered Output application looks like this.
![Orientation3.png]()
I hope this article is useful for you. I look forward for your comments and feedback.