Working with Telerik RadMessageBox Controls for Windows Phone 7

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.

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.

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.

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.

XAML Code:

<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="F5DEBUG TELERIK SERIES" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="radmessagebox" 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">
        <Button Content="Trigger RadMessageBox" Height="174" HorizontalAlignment="Left" Margin="44,51,0,0" VerticalAlignment="Top" Width="383" />
    </Grid>
</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.

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:

using Telerik.Windows.Controls;
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.

C# Code:

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;
using Telerik.Windows.Controls.Primitives;

namespace TelerikMessageBoxSample
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

       private void Button_Click(object sender, RoutedEventArgs e)
        {
            RadMessageBox.Show("Telerik RadControls for Windows Phone 7", MessageBoxButtons.YesNo,
                "Are you Impressed with Telerik RadControl???",
                "Very Much Impressed");
        }

   }
}

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.

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.