Telerik RadTimeSelector in Windows Phone 7 Via WCF Service

Vijay Prativadi
12y
4.4k
0
0

Article

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 nice and enhanced UI.

Question: What is RadTimeSelector?

In simple terms "It offers flexibility for the user in selecting the time in unique selection format".

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_Time_Selector
{
    // 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);
    }
}

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_Time_Selector
{

    // 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;
        }
    }
}

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>
          
          <serviceMetadata httpGetEnabled="true"/>
          
          <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_Time_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: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" Name="mainpage">

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Rad Time Selector - WCF Service" FontFamily="Verdana" FontSize="22"   Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Windows 7 Phone" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

<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_Time_Selector_Application.ServiceReference1;

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

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

        public void getRadTime()
        {
            objRadSelector.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
            objRadSelector.VerticalAlignment = System.Windows.VerticalAlignment.Center;
            objRadSelector.SelectorFormat = "H/M/T";
            objRadSelector.SelectedValueChanged += new DateTimeValueChangedEventHandler(sel_Call);
            this.ContentPanel.Children.Add(objRadSelector);
        }

        private void time_Call(object sender, timeCompletedEventArgs e)
        {
            RadMessageBox.Show("Selected Time is: " + e.Result.ToShortTimeString(), MessageBoxButtons.OKCancel, "RadTimeSelection - WCF", null, false, false, System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }

        protected void sel_Call(object sender, ValueChangedEventArgs<DateTime> e)
        {
            var time = objRadSelector.SelectedValue;
            objClient.timeCompleted += new EventHandler<timeCompletedEventArgs>(time_Call);
            objClient.timeAsync(time);
        }

#region Instance Variables

RadTimeSelector objRadSelector = new RadTimeSelector();
Service1Client objClient = new Service1Client();

#endregion
}
}

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