Introduction
Today, in this article let's learn another interesting concept related to Windows Phone 7, whereby communicating with a WCF Service to perform some operation. The Telerik Rad Controls for Windows Phone 7 can be downloaded from http://www.telerik.com/products/windows-phone.aspx.
The Rad Message Box is used to display the output in a nice and enhanced UI.
Question: What is RadPhoneApplicationFrame?
In simple terms "It provides a definite and enhanced looks to the phone user when switching between pages, this is based on type of transition the user uses".
Let's get this implemented practically for better idea on this.
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;
namespace Wcf_Rad_Phone_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.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Wcf_Rad_Phone_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 App.xaml looks like this:
<Application
x:Class="Rad_Phone_Application_Frame.App"
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">
<!--Application Resources-->
<Application.Resources>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>
Step 5: The complete code of the App.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.Navigation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Telerik.Windows.Controls;
namespace Rad_Phone_Application_Frame
{
public partial class App : Application
{
/// <summary>
/// Provides easy access to the root frame of the Phone Application.
/// </summary>
/// <returns>The root frame of the Phone Application.</returns>
//public PhoneApplicationFrame RootFrame { get; private set; }
public RadPhoneApplicationFrame RootFrame { get; private set; }
/// <summary>
/// Constructor for the Application object.
/// </summary>
public App()
{
// Global handler for uncaught exceptions.
UnhandledException += Application_UnhandledException;
// Show graphics profiling information while debugging.
if (System.Diagnostics.Debugger.IsAttached)
{
// Display the current frame rate counters.
Application.Current.Host.Settings.EnableFrameRateCounter = true;
// Show the areas of the app that are being redrawn in each frame.
//Application.Current.Host.Settings.EnableRedrawRegions = true;
// Enable non-production analysis visualization mode,
// which shows areas of a page that are being GPU accelerated with a colored overlay.
//Application.Current.Host.Settings.EnableCacheVisualization = true;
}
// Standard Silverlight initialization
InitializeComponent();
// Phone-specific initialization
InitializePhoneApplication();
}
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
}
// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
}
// Code to execute when the application is deactivated (sent to background)
// This code will not execute when the application is closing
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
// Ensure that required application state is persisted here.
}
// Code to execute when the application is closing (eg, user hit Back)
// This code will not execute when the application is deactivated
private void Application_Closing(object sender, ClosingEventArgs e)
{
}
// Code to execute if a navigation fails
private void RootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
{
if (System.Diagnostics.Debugger.IsAttached)
{
// A navigation has failed; break into the debugger
System.Diagnostics.Debugger.Break();
}
}
// Code to execute on Unhandled Exceptions
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if (System.Diagnostics.Debugger.IsAttached)
{
// An unhandled exception has occurred; break into the debugger
System.Diagnostics.Debugger.Break();
}
}
#region Phone application initialization
// Avoid double-initialization
private bool phoneApplicationInitialized = false;
// Do not add any additional code to this method
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;
// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
//RootFrame = new PhoneApplicationFrame();
RootFrame = new RadPhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;
//RadSlideTransition objTransition = new RadSlideTransition();
//objTransition.BackwardInAnimation = new RadMoveAnimation() { MoveDirection = MoveDirection.TopIn };
//objTransition.BackwardOutAnimation = new RadMoveAnimation() { MoveDirection = MoveDirection.TopOut };
//objTransition.ForwardInAnimation = new RadFadeAnimation() { StartOpacity = 0, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
//objTransition.ForwardOutAnimation = new RadFadeAnimation() { StartOpacity = 1, EndOpacity = 0, Duration = TimeSpan.FromSeconds(5) };
RadFlipItemsTransition objTransition = new RadFlipItemsTransition();
objTransition.BackwardInAnimation = new RadMoveAnimation() { MoveDirection = MoveDirection.TopIn };
objTransition.BackwardOutAnimation = new RadMoveAnimation() { MoveDirection = MoveDirection.TopOut };
objTransition.ForwardInAnimation = new RadFadeAnimation() { StartOpacity = 0, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
objTransition.ForwardOutAnimation = new RadFadeAnimation() { StartOpacity = 1, EndOpacity = 0, Duration = TimeSpan.FromSeconds(5) };
objTransition.PlayMode = TransitionPlayMode.Consecutively;
RootFrame.Transition = objTransition;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Ensure we don't initialize again
phoneApplicationInitialized = true;
}
// Do not add any additional code to this method
private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)
{
// Set the root visual to allow the application to render
if (RootVisual != RootFrame)
RootVisual = RootFrame;
// Remove this handler since it is no longer needed
RootFrame.Navigated -= CompleteInitializePhoneApplication;
}
#endregion
}
}
Step 6: The complete code of the MainPage.xaml looks like this:
<phone:PhoneApplicationPage
x:Class="Rad_Phone_Application_Frame.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="Rad Phone Application Frame" 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 Name="btnArthmetic"
Content="Click Here For Arthmetic"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Height="128"
Width="444"
Click="btnArthmetic_Click">
<Button.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="Orange"
Offset="0">
</GradientStop>
<GradientStop Color="DarkCyan"
Offset="0.8">
</GradientStop>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Step 7: 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;
namespace Rad_Phone_Application_Frame
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
public void btnArthmetic_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}
}
}
Step 8: The complete code of the Page1.xaml looks like this:
<phone:PhoneApplicationPage
x:Class="Rad_Phone_Application_Frame.Page1"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
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="Rad Phone Application Frame" 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">
<TextBlock Height="30"
HorizontalAlignment="Left"
Margin="0,23,0,0"
Name="textBlock1"
Text="Please Enter First Number: "
FontFamily="Verdana"
FontSize="22"
VerticalAlignment="Top" />
<TextBlock Height="30"
Margin="6,0,0,370"
Name="textBlock2"
Text="Please Enter Second Number: "
FontFamily="Verdana"
FontSize="22" />
<TextBox Height="72"
HorizontalAlignment="Left"
Margin="325,84,0,0"
Name="textBox1"
VerticalAlignment="Top"
Width="131" />
<TextBox Height="72"
HorizontalAlignment="Left"
Margin="325,0,0,0"
Name="textBox2"
VerticalAlignment="Top"
Width="131" />
<Button Content="Addition"
FontFamily="Verdana"
FontSize="22"
Background="Red"
Height="72"
HorizontalAlignment="Left"
Margin="9,357,0,0"
Name="button1"
VerticalAlignment="Top"
Width="240"
Click="button1_Click"/>
<Button Content="Subtraction"
FontFamily="Verdana"
FontSize="22"
Background="Blue"
Height="72"
HorizontalAlignment="Left"
Margin="228,406,0,0"
Name="button2"
VerticalAlignment="Top"
Width="240"
Click="button2_Click"/>
<Button Content="Multiplication"
FontFamily="Verdana"
FontSize="22"
Background="Yellow"
Height="72"
HorizontalAlignment="Left"
Margin="12,463,0,0"
Name="button3"
VerticalAlignment="Top"
Width="240"
Click="button3_Click" />
<Button Content="Division"
FontFamily="Verdana"
FontSize="22"
Background="Green"
Height="72"
HorizontalAlignment="Left"
Margin="216,529,0,0"
Name="button4"
VerticalAlignment="Top"
Width="240"
Click="button4_Click"/>
</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 9: The complete code of the Page1.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 Rad_Phone_Application_Frame.ServiceReference1;
using Telerik.Windows.Controls;
namespace Rad_Phone_Application_Frame
{
public partial class Page1 : PhoneApplicationPage
{
public Page1()
{
InitializeComponent();
}
private void add_Call(object sender, addCompletedEventArgs e)
{
RadMessageBox.Show("Addition Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadPhoneApplicationFrame - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
public void button1_Click(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Phone Application Frame - WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
else
{
objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
objClient.addAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void sub_Call(object sender, subCompletedEventArgs e)
{
RadMessageBox.Show("Subtraction Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadPhoneApplicationFrame - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
public void button2_Click(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Phone Application Frame - WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
else
{
objClient.subCompleted += new EventHandler<subCompletedEventArgs>(sub_Call);
objClient.subAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void mul_Call(object sender, mulCompletedEventArgs e)
{
RadMessageBox.Show("Multiplication Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadPhoneApplicationFrame - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
public void button3_Click(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Phone Application Frame - WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
else
{
objClient.mulCompleted += new EventHandler<mulCompletedEventArgs>(mul_Call);
objClient.mulAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
private void div_Call(object sender, divCompletedEventArgs e)
{
RadMessageBox.Show("Division Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "RadPhoneApplicationFrame - WCF Service", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
public void button4_Click(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
{
RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel, "Rad Phone Application Frame - WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
}
else
{
objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
objClient.divAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
textBox1.Text = "";
textBox2.Text = "";
}
}
#region Instance Variables
Service1Client objClient = new Service1Client();
#endregion
}
}
Step 10: The output of the application looks like this:
![RadPhoneApp1.png]()
Step 11: The output of Page1.xaml looks like this:
![RadPhoneApp2.png]()
Step 12: The output of the Nothing Entered Application looks like this:
![RadPhoneApp3.png]()
Step 13: The output of the Addition Operation Application looks like this:
![RadPhoneApp4.png]()
![RadPhoneApp5.png]()
I hope this article is useful for you. I look forward for your comments and feedback.