Webinar: Telerik Tools for Ninja Developers: RadControls for Windows Phone

 

Date: 5th Sep 2012

Time: 3:00 pm to 4:00 pm (IST)

Register here to attend the webinar

Any query mail me @ Dhananjay.kumar@telerik.com

Telerik India has started a webinar series in India time zone to create more awareness about Telerik products. So far four webinars have been conducted and large numbers of developers, designers and testers got benefited by that.

Find full schedule of the webinars here

Continuing the series, on 5th September 2012, we are conducing webinar on Rad Controls for Windows Phone to help Windows Phone developer community.

image

Windows Phone application development is keeping a lot of developers very busy. Developers have the envious task of creating quality Windows Phone Application in short span of time. Telerik RadControls for Windows Phone provide the set of controls that significantly speed up the Windows Phone App Development process.

Find more about RadControls for Windows Phone here

Register here to attend the webinar

In this webinar we will start with Rad Controls for Windows Phone. We will explore various Rad Controls. We will keep webinar demo oriented and we will more focus on writing and understanding codes. I strongly recommend you to download and install trial before coming to webinar.

RadControls for Windows Phone provides you 41 different controls and building blocks to cut your development time. These controls are designed to shorten your app development time. We will explore some of the controls listed below in the webinar.

  • RadConversationView
  • RadAutoCompleteBox
  • RadTextBox
  • RadToggleSwitch
  • RadSlideHubTiles
  • RadRating
  • RadHubTiles etc .

Apart from above listed RadControls, we will explore many other controls as well. I request you to attend the webinar. Once again find the webinar details below,

Date: 5th Sep 2012

Time: 3:00 pm to 4:00 pm (IST)

Register here to attend the webinar

See you in the webinar. If you have any question or query , please feel free to send me mail at Dhananjay.kumar@telerik.com

Advertisements

Three simple steps to start working with RadToggleSwitch for Windows Phone

In this post we will learn to use RadToggleSwitch in three simple steps. RadToggleSwitch controls gives you experience of on and off button. It is a binary state control and can be either in state of on or off. You may get experience of RadToggleSwitch as following

image

Follow the below steps to start working with RadToggleSwitch. This control is very much configurable and you can put button and header styling as per your application requirement.

Step1

Very first you need to add reference of Telerik.Windows.Controls.Primptive on xaml.

image

Step 2

After adding namespace add RadToggleSwitch on the application page. You can add that as following

image

While adding RadToggleSwitch we can configure value of header. If needed, you can define HeaderStyle and HeaderTemplate specific to your application. By default accent color of device get applied as background color of RadToggleSwitch. You can set IsChecked property to either true or false. If you do not set it then it takes default value false. One important property is ButtonStyle. You can configure this property to give different look to toggle button.

Below is the consolidated code. On the xaml we have put four RadToggleSwitch control.


<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: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="toggle switch" 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="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<telerikPrimitives:RadToggleSwitch
x:Name="tglWifi"
Header="WiFi"
Grid.Row="0"
/>
<telerikPrimitives:RadToggleSwitch
x:Name="tglBlueTooth"
Header="BlueTooth"
Grid.Row="1"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglDataNetwrok"
Header="Cellular Data"
Grid.Row="2"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglSharing"
Header="Sharing"
Grid.Row="3"
IsChecked="False"/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Step 3

You can handle check and uncheck event on RadToggleSwitch. You can perform operation corresponding to on in check event and corresponding to off in uncheck event. For example in below code I am changing header of the RadToggleSwitch in check and uncheck event

image

And we have attached the event to RadToggleSwitch in constructor of the page as given below,

image

Output

When you run above application you should get expected output as following. When you toggle Data Sharing button, you will notice header is getting changed.

image

In this way you can work with RadToggleSwitch. I hope you find this post useful. Thanks for reading.