Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone 7:Working with Telerik RadMessageBox Controls

DZone's Guide to

Windows Phone 7:Working with Telerik RadMessageBox Controls

Free Resource

Introduction:

In our earlier article we have seen how to start with the Telerik RadControls for Windows Phone 7 Development (Windows Phone 7 – Telerik RadControls)  by installing the package to the development environment. Here in this article we will see how to use the RadMessageBox Telerik control, in this series we will explore using each and every control which will help us to select the best control for developing application for Windows Phone 7.

Steps:

Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project under the Telerik Tab and select the C# RadControls Windows Phone Application and provide a valid project name as shown in the screen below. For VB.NET Developers can select the VB.NET RadControls template to make it convenient.

2012-02-03 21h11_14

Now we can see the Project Configuration Wizard to configure the custom setting required to run the project. Here we are going to select the component first as shown in the screen below.

2012-02-03 21h16_44

Now we need to select the project type, we have options to select a standard Windows Phone Application or a Panorama control or a Pivot Control, here in this sample we will select the standard Windows Phone Application. If application bar is required we can select the check box else we can leave it unchecked as shown in the screen below. For Panorama Control the application bar check box is disabled since we cant integrate for better user readability and performance.

2012-02-03 21h19_28

Now we are done with the configuration, so click on Finish to complete the configuration and we can see the Project will be opened with the XAML Page. We will design the page to have some unique design, once we are done with the design our page looks like below.

2012-02-03 21h26_52

XAML Code:

 1: <Grid x:Name="LayoutRoot" Background="Transparent">
 2:     <Grid.RowDefinitions>
 3:         <RowDefinition Height="Auto"/>
 4:         <RowDefinition Height="*"/>
 5:     </Grid.RowDefinitions>
 6:
 7:     <!--TitlePanel contains the name of the application and page title-->
 8:     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
 9:         <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG TELERIK SERIES" Style="{StaticResource PhoneTextNormalStyle}"/>
 10:         <TextBlock x:Name="PageTitle" Text="radmessagebox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 11:     </StackPanel>
 12:
 13:     <!--ContentPanel - place additional content here-->
 14:     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 15:         <Button Content="Trigger RadMessageBox" Height="174" HorizontalAlignment="Left" Margin="44,51,0,0" VerticalAlignment="Top" Width="383" />
 16:     </Grid>
 17: </Grid>

Now we need to write our code in the button click event to get the RadMessageBox control, first we see in the solution explorer what are the reference added to the Reference Folder. Here we can see the Telerik References which we selected in the configuration wizard are available over here as shown in the screen below.

2012-02-03 21h34_18

Now go to the code behind and add using directives to get the Telerik properties to the be used with the code, so add the below 2 using statements directly to the code behind using list.

C# Code:

 1: using Telerik.Windows.Controls;

 2: using Telerik.Windows.Controls.Primitives;

Now on the button click event we will write the below code, which will call the RadMessageBox control with a Checkbox providing the user to check it based on the need. The first parameter is the title for the message box, second parameter is the type of the message box the control should display. Here we have different options where we can make use of the MessageBoxButtons enumerations to select the options. Third parameter is the Message content and final parameter is the Checkbox content.

 1: using System;

 2: using System.Collections.Generic;

 3: using System.Linq;

 4: using System.Net;

 5: using System.Windows;

 6: using System.Windows.Controls;

 7: using System.Windows.Documents;

 8: using System.Windows.Input;

 9: using System.Windows.Media;

 10: using System.Windows.Media.Animation;

 11: using System.Windows.Shapes;

 12: using Microsoft.Phone.Controls;

 13: using Telerik.Windows.Controls;

 14: using Telerik.Windows.Controls.Primitives;

 15:

 16: namespace TelerikMessageBoxSample

 17: {

 18:     public partial class MainPage : PhoneApplicationPage

 19:     {

 20:         // Constructor

 21:         public MainPage()

 22:         {

 23:             InitializeComponent();

 24:         }

 25:

 26:         private void Button_Click(object sender, RoutedEventArgs e)

 27:         {

 28:             RadMessageBox.Show("Telerik RadControls for Windows Phone 7", MessageBoxButtons.YesNo,

 29:                 "Are you Impressed with Telerik RadControl???",

 30:                 "Very Much Impressed");

 31:         }

 32:

 33:     }

 34: }

 

Now we are done with our code, we will build and execute the application and we can see the application loads in the Windows phone 7 Emulator and clicking on the button will show the RadMessageBox control usage as shown in the screens below.

2012-02-03 22h10_202012-02-03 22h10_37

Conclusion:

We can enhance the control to get most of the features and customize it based the need. We will see on how to use the rest of the RadControls. Mean while continue to read my Windows Phone 7 Development Series in 31 Days.

Topics:

Published at DZone with permission of Karthikeyan Anbarasan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}