Date Time Picker in Windows Phone 7 Via WCF Service

Introduction

Today, in this article let's dig out another important concept usually used in Windows Phone of communicating via a WCF Service to perform an expected operation.

Question: What is Date Time Picker?

In simple terms "It allows phone user to select date and time using control and displays the selected value accordingly". Let's get ready to start it 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;

namespace WCF_DatePicker

{

// 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]

DateTime Time(DateTime a);

[OperationContract]

DateTime Date(DateTime a);

}

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_DatePicker

{

// 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 DateTime Time(DateTime a)

{

return a;

}

public DateTime Date(DateTime a)

{

return a;

}

Step 3: The complete code of the Web.Config looks like this.

<?xml version="1.0"?>

<system.web>

</system.web>

<system.serviceModel>

</behavior>

</serviceBehaviors>

</behaviors>

</system.serviceModel>

<system.webServer>

</system.webServer>

</configuration>

Step 4: The complete code of the MainPage.xaml looks like this.

<phone:PhoneApplicationPage

x:Class="Date_Time_Picker_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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<toolkit:DatePicker Header="Select Date" ValueStringFormat="{}{0:D}" ValueChanged="datePicker1_ValueChanged" HorizontalAlignment="Left" Margin="0,126,0,0" Name="datePicker1" VerticalAlignment="Top" FontFamily="Verdana" FontSize="22" Width="450" />

<toolkit:TimePicker Header="Select Time" ValueStringFormat="{}{0:T}" HorizontalAlignment="Left" ValueChanged="timePicker1_ValueChanged" Margin="169,25,0,0" Name="timePicker1" VerticalAlignment="Top" FontFamily="Verdana" FontSize="22" />

</Grid>

<!--<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 Microsoft.Devices;

using System.Net.NetworkInformation;

using Date_Time_Picker_Application.ServiceReference1;

namespace Date_Time_Picker_Application

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

void date_Call(object sender, DateCompletedEventArgs e)

{

MessageBox.Show("The Date is: " + e.Result.ToShortDateString());

}

private void datePicker1_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

{

var date = (DateTime)datePicker1.Value;

Service1Client obj_Client = new Service1Client();

obj_Client.DateCompleted += new EventHandler<DateCompletedEventArgs>(date_Call);

obj_Client.DateAsync(date);

}

void time_Call(object sender, TimeCompletedEventArgs e)

{

MessageBox.Show("The Time is: " + e.Result.ToShortTimeString());

}

private void timePicker1_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

{

DateTime date = (DateTime)timePicker1.Value;

Service1Client obj_Client = new Service1Client();

obj_Client.TimeCompleted += new EventHandler<TimeCompletedEventArgs>(time_Call);

obj_Client.TimeAsync(date);

}

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

Step 7: The output of the Time Picker Application looks like this.

Step 8: The output of the Date Picker Application looks like this.

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