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:
![Wrap Panel in windows phone 7]()
Step 7 : The Addition Operation Output Application looks like this:
![windows phone 7 Wrap Panel]()
Step 8 : The Nothing Entered Output Application looks like this:
![Wrap Panel]()
I hope this article is useful for you. I look forward for your comments and
feedback.
Thanks Vijay Prativadi.