Telerik RadDateSelector in Windows Phone 7 Via WCF Service

Introduction

Today, in this article let's dig out another wonderful concept related to Windows Phone 7, whereby communicating with 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 RadDateSelector?

In simple terms "It offers flexibility for the user in selecting the dates with some specified range and unique selection format".

Let's get this implemented practically for a 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 Date_Selector_WCF
{
    // 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 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 Date_Selector_WCF
{
    // 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 date(DateTime a)
        {
            return a;
        }
    }
}

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 
    x:Class="Rad_Date_Selector_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:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    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" Loaded="mainpage_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="Rad Date Selector - WCF 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">

        </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 Telerik.Windows.Controls;
using Rad_Date_Selector_Application.ServiceReference1;

namespace Rad_Date_Selector_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

        }

        public void mainpage_Loaded(object sender, RoutedEventArgs e)
        {
            getRadDate();
        }

        public void getRadDate()
        {
            objDateSelector.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
            objDateSelector.VerticalAlignment = System.Windows.VerticalAlignment.Center;
            objDateSelector.Visibility = System.Windows.Visibility.Visible;
            objDateSelector.MinValue = new DateTime(2012, 01, 01);
            objDateSelector.MaxValue = new DateTime(2013, 01, 01);
            objDateSelector.SelectedValueChanged += new DateTimeValueChangedEventHandler(sel_Value);
            objDateSelector.SelectorFormat = "d,m,y";
            this.ContentPanel.Children.Add(objDateSelector);
        }

        private void date_Call(object sender, dateCompletedEventArgs e)
        {
            RadMessageBox.Show("Selected Date is: " + e.Result.ToShortDateString(), MessageBoxButtons.OKCancel, "RadDateSelector - via WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }

        protected void sel_Value(object sender, ValueChangedEventArgs<DateTime> e)
        {
            var date = objDateSelector.SelectedValue;
            objClient.dateCompleted += new EventHandler<dateCompletedEventArgs>(date_Call);
            objClient.dateAsync(date);

        }

        #region Instance Variables

        RadDateSelector objDateSelector = new RadDateSelector();
        Service1Client objClient = new Service1Client();

        #endregion
    }
}

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

Step 7: The output of the Date Selected Application looks like this:

I hope this article is useful for you.