Telerik RadRating Control in Windows Phone 7 Via WCF Service


Introduction

The Telerik Rad Controls for Windows Phone 7 can be obtained from http://www.telerik.com/products/windows-phone.aspx.

The Rad Message Box is used to display output in a nice and enhanced UI.

Question: What is RadRating Control?

In simple terms "It enables user to rate an item based on usage and benfit provides. It enables to evaluvate through user rating system. The user needs to be tapped to rate an item. The item can be anything an application or movie or photos, survey, comments and so on".

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;
using PhoneApp2;
namespace WCF_Rad_Rating
{
   
// 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_Rad_Rating
{
   
// 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 x:Class="Rad_Rating_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:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" >

   
<!--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 Rating 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">
            <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" />
            <telerikInput:RadRating HorizontalAlignment="Left" Margin="119,241,0,0" VerticalAlignment="Top" RatingDisplayPrecision="Half"
ItemShapeStyle="Hearts1" Name="radRating1" RatingSelectionMode="Single" Width="203">
                <telerikInput:RadRating.ItemShapeUnselectedStyle>
                    <Style TargetType="Path">
                        <Setter Property="Fill" Value="Transparent"></Setter>
                        <Setter Property="Stroke" Value="White"></Setter>
                        <Setter Property="StrokeThickness" Value="3"></Setter>
                    </Style>
                </telerikInput:RadRating.ItemShapeUnselectedStyle>
                <telerikInput:RadRating.ItemShapeSelectedStyle>
                    <Style TargetType="Path">
                        <Setter Property="Fill" Value="Green"></Setter>
                        <Setter Property="Stroke" Value="Red"></Setter>
                        <Setter Property="StrokeThickness" Value="3"></Setter>
                    </Style>
                </telerikInput:RadRating.ItemShapeSelectedStyle>
                <telerikInput:RadRating.ItemShapeHighlightedStyle>
                    <Style TargetType="Path">
                        <Setter Property="Fill" Value="DeepSkyBlue"></Setter>
                        <Setter Property="Stroke" Value="Violet"></Setter>
                        <Setter Property="StrokeThickness" Value="3"></Setter>
                    </Style>
                </telerikInput:RadRating.ItemShapeHighlightedStyle>
                <telerikInput:RadRatingItem x:Name="item1" Content="+" FontFamily="Verdana" FontSize="48" Foreground="DeepSkyBlue"
Tap="item1_Tap"/>
                <telerikInput:RadRatingItem x:Name="item2" Content="-" FontFamily="Verdana" FontSize="48" Foreground="DeepSkyBlue"
Tap="item2_Tap"/>
                <telerikInput:RadRatingItem x:Name="item3" Content="*" FontFamily="Verdana" FontSize="48" Foreground="DeepSkyBlue"
Tap="item3_Tap"/>
                <telerikInput:RadRatingItem x:Name="item4" Content="/" FontFamily="Verdana" FontSize="48" Foreground="DeepSkyBlue"
Tap="item4_Tap"/>
            </telerikInput:RadRating>
        </Grid>
    </Grid>
</
phone:PhoneApplicationPage>

Step 5: The complete code of the 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_Rating_Application.ServiceReference1;
using Telerik.Windows.Controls;
using PhoneApp2;
 
namespace Rad_Rating_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
   
// Constructor
    public MainPage()
    {
        InitializeComponent();
    }
        private void add_Call(object sender, addCompletedEventArgs e)
        {
            RadMessageBox.Show("Addition Result is: " + e.Result.ToString(), MessageBoxButtons.OKCancel,
                "Rad Rating - WCF Service", null, false, false,
                System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }
        private void item1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            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,
                "Rad Rating - WCF Service", null, false, false,
                System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }
        private void item2_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            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,
                "Rad Rating - WCF Service", null, false, false,
                System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }
        private void item3_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            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,
                "Rad Rating - WCF Service", null, false, false,
                System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
        }
        private void item4_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            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 6: The output of the application looks like this:

rating1.png

Step 7: The output of the Addition Operation Application looks like this:

rating2.png
rating3.png
Step 8: The output of the Rating Selected Item Application looks like this:

rating4.png
I hope this article is useful for you. I look forward to your comments and feedback. Thanks Vijay Prativadi


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.