RAD Controls

Getting Started With Rad Controls for Windows Phone

Posted by

0

This post will help you to start working with Telerik Rad Controls for Windows Phone. You can download trial version from here

Learn more about Rad Controls for Windows Phone here

After downloading click on the exe file. You will get Telerik Control Panel as following . Select Windows Phone and click on proceed.

image

If you want you can change default installation folder on this screen or can leave the default. Accept the Terms and Conditions and click on Proceed.

image image

After successfully installation, go ahead and create new Windows Phone project in Visual Studio. In Silverlight for Windows Phone tab you will get Rad Control Windows Phone Application project template

image

As usual choose Target version of Windows Phone operating system

image

In next windows you need to select Telerik Rad Control for Windows Phone references. Select required reference for the Rad Control you are going to use in the application. I am going to use RadHubTile in the application and for that, we need following references.

image

After adding references, you need to choose type of Windows Phone Application from the drop down. I am choosing simple Windows Phone Application. You can check the checkbox to add Application Bar in the application.

image

Click on Finish to create Windows Phone Application project. After creation of project to work with Rad Controls you need to add references on the XAML page.

image

After adding reference you can work with any RadControl. For example you can add RadHubTile on the application page as following

image

At the point if you run the application, you should be getting application with RadHubTile as following.

image

Conclusion

In this way you can set up environment to start developing Windows Phone Applications using Telerik Rad Controls for Windows Phone. In further posts we will get deeper into capabilities of all the Rad Controls.

 

Working with RadDatePicker control for Windows Phone

Posted by

0

In this post we will discuss about Telerik RadDatePicker control. You can download Telerik RadControl for Windows Phone from here

RadDatePicker control provides all the functionality of standard DatePicker control of Windows Phone 7 along with below added functionality

  1. Runtime validation
  2. Smoother animation
  3. Formatting of different special date in different style

To work with RadDatePicker control below references need to be added,

clip_image001

Working with RadDatePicker

To work with RadDatePicker, you need to add Telerik.Windows.Controls namespace on the xaml as below,

image

And you can create a Date Picker as below,

clip_image001[6]

If you want to change look, display and selector of control, you can very much do that using the formatter properties. You can apply two different types of formatting on the RadDatePicker.

clip_image003

DisplayValueFormat property of RadDatePicker controls allows you to format the selection of the date. It takes string input to format the display of the date. You can apply DisplayValueFormat as below,

clip_image002

After applying formatting you should get output as below,

clip_image003[6]

SelectorFormat property of RadDatePicker control allows you to remove any of the date components from selection. For example, if you only want to show day and month only you need to remove Y from the selectorformat . You can do remove year as below,

image

You should get expected date selection as below,

image

If you want to set maximum and minimum date for the selection, you can do that by setting value for MaxValue and MinValue property of RadDatePicker control.

clip_image002[6]

You can fetch selected value either as DateTime type or as String.

clip_image003[8]

RadDatePicker control comes with two buttons Ok and Cancel. By default images used in these buttons are taken from location

  • /Images/DateTimePickerOK.png
  • /Images/DateTimePickerCancel.png

There are three events exposed on RadDatePicker control.

image

By putting all together , you can use RadDatePicker control as below,


using System;
<phone:PhoneApplicationPage
x:Class="RadControlsWindowsPhoneApp3.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:telerikcontrols="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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" 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">
<telerikcontrols:RadDatePicker  x:Name="datepicker"
DisplayValueFormat="{}{0:dd, MMMM, yyyy}"
SelectorFormat="d/m"
MaxValue="01/01/2020"
MinValue="11/11/2000"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

In this way you can work with RadDatePicker control. I hope this post is useful. Thanks for reading