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 found 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 RadTransition?
In simple terms "It enables to define unique set of animations and get's rendered to specific controls".
Let's get this implemented practically for a better idea of 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_Transition
{
// 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;
namespace WCF_Transition
{
// 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 xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
x:Class="Rad_Transition_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="Rad Transition - WCF Service" 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">
<telerik:RadTransitionControl x:Name="radTransition1">
<telerik:RadTransitionControl.Content>
<Grid>
<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"/>
<Border Name="border1"
BorderBrush="Silver"
BorderThickness="1"
Height="189"
HorizontalAlignment="Left"
Margin="12,162,0,0"
VerticalAlignment="Top"
Width="438" >
<TextBlock HorizontalAlignment="Stretch"
VerticalAlignment="Center"
FontFamily="Verdana"
FontSize="22"
Foreground="DeepSkyBlue"/>
</Border>
</Grid>
</telerik:RadTransitionControl.Content>
</telerik:RadTransitionControl>
</Grid>
</Grid>
</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 Rad_Transition_Application.ServiceReference1;
using Telerik.Windows.Controls;
namespace Rad_Transition_Application
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void add_Call(object sender, addCompletedEventArgs e)
{
objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
radTransition1.Transition = objTransition;
RadMessageBox.Show("Addition Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - 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 Transition - WCF Service", 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)
{
objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
radTransition1.Transition = objTransition;
RadMessageBox.Show("Subtraction Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - 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 Transition - WCF Service", 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)
{
objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
radTransition1.Transition = objTransition;
RadMessageBox.Show("Multiplication Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - 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 Transition - WCF Service", 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)
{
objTransition.BackwardOutAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 1, EndOpacity = 0.2, Duration = TimeSpan.FromSeconds(5) };
objTransition.BackwardInAnimation = new RadFadeAnimation { AutoReverse = false, StartOpacity = 0.2, EndOpacity = 1, Duration = TimeSpan.FromSeconds(5) };
radTransition1.Transition = objTransition;
RadMessageBox.Show("Division Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel, "Rad Transition - 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 Transition - WCF Service", 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();
RadTransition objTransition = new RadTransition();
#endregion
}
}
Step 6: The output of the application looks like this:
![Transition1.png]()
Step 7: The output of the Nothing Entered looks like this:
![Transition2.png]()
Step 8: The output of the Addition Operation Application looks like this:
![Transition3.png]()
![Transition4.png]()
I hope this article is useful for you.