Start working with RadRating control for Windows Phone in three simple steps

Read more here

As name suggests by using RadRating controls, you can allow your application user to rate something. RadRating control allows user to select a value from set of rating items. RadRating control may give immersive experience as given below.

image

In this post we will follow three steps to start working with RadRating control.

Step 1

Start with adding namespace on xaml

image

Step 2

You can add a RadRating control by declaring it on xaml as following. You need to set value of AutoGeneratedItemsCount property to set number of rating items.

image

Expected output of above declaration should be as following

image

If you want you can change geometrical shape of the rating items as well. You need to set value of ItemShapeStyle property.There are five geometric shapes are provided. They are as following

  1. Stars1
  2. Stars2
  3. Hearts1
  4. Hearts2
  5. Hearts3

You can set Height and Width of the Rating Item using ItemShapeHeight and ItemShapeWidth property respectively.

In below declaration we are setting shape style, shape height and shape width.

image

Expected output of above RadRating control declaration is as following

image

If you want you can customize individual rating item also. You can do that as following. You may have content for each individual rating item.

image

Expected output of above RadRating control declaration is as following

image

Step 3

In last step you may want to handle events to perform operation when user is changing the rating. Below two events are important to track when user is changing rating or rating has been changed already.

  • ValueChanged
  • ValueChanging

You can handle ValueChanged event as following. In this event you get both old value and new value from the RadRating control

image

Conclusion

These are three simple steps you required to start working with RadRating control. Below I am consolidating codes from above discussion

MainPage.xaml

 


<phone:PhoneApplicationPage
x:Class="processapp.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:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikInput="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">

<!--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="Demo App" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="rating control" 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.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel Orientation="Vertical" Grid.Row="0">
<telerikInput:RadRating x:Name="rdRatingControl"
AutoGeneratedItemsCount="5" />
<TextBlock x:Name="txtrating1" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="1">

<telerikInput:RadRating x:Name="rdRatingControl1"
AutoGeneratedItemsCount="5"
ItemShapeStyle="Hearts1"
ItemShapeHeight="60"
ItemShapeWidth="70"
/>
<TextBlock x:Name="txtrating2" Style="{StaticResource PhoneTextNormalStyle}" />

</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="2" >
<telerikInput:RadRating  x:Name="rdRating" >
<telerikInput:RadRatingItem Content="poor "/>
<telerikInput:RadRatingItem Content="satisfied "/>
<telerikInput:RadRatingItem Content="good "/>
<telerikInput:RadRatingItem Content="verygood "/>
<telerikInput:RadRatingItem Content="excelent"/>
</telerikInput:RadRating>
<TextBlock x:Name="txtrating3" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 


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;

namespace processapp
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
rdRating.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRating_ValueChanged);
rdRatingControl.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl_ValueChanged);
rdRatingControl1.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl1_ValueChanged);

}

void rdRatingControl1_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating2.Text = message;
}

void rdRating_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating3.Text = message;
}

void rdRatingControl_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{

var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating1.Text = message;
}

}
}

When you run application you should have application with RadRating control as following

clip_image002

I hope you find this post useful. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s