F5 Debug…

Building & Debugging the Technology!!!

Archive for February 3rd, 2012

Telerik Windows Phone 7 Series – Working with Telerik RadMessageBox Controls

Posted by Karthikeyan Anbarasan on February 3, 2012

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.

C# Code:

 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.

Posted in Telerik | Tagged: , , , , , , , , , , , , | Leave a Comment »

Telerik Webinar – Sharper your .Net Ninja skills

Posted by Karthikeyan Anbarasan on February 3, 2012

 

Telerik has released a recent build and we have new stuffs to know with the latest release with the Telerik Webinar scheduled between February 20th to February 22nd and the Registration for Q1 2012 Webinar Week is now open, so we can book our seat right away and block off the time in our calendar to brush up on all the cool new things coming from Telerik.

At each webinar there will be draw for Telerik Ultimate Collection license worth $1999. The Ultimate Collection contains the newest product – Kendo UI – everything we need to build sites and mobile apps with HTML5 and JavaScript. To get eligible for the draw we need to attend the session live and participate in the Q&A sessions.

Register for the Session using the link – http://www.telerik.com/support/webinars.aspx

 

Day 1 – Mon, Feb 20

9:30 AM – 10:30 AM
What’s New in XAML – RadControls for Silverlight and WPF

11:00 AM – 12:00 PM
What’s New in Test Studio

12:30 PM – 1:30 PM
What’s New in Data Tools – OpenAccess ORM

2:00 PM – 2:30 PM
What’s New in RadControls for WinForms and Reporting

 

 

Day 2 – Tues, Feb 21

9:30 AM – 10:30 AM
What’s New in ASP.NET

11:00 AM – 12:00 PM
What’s New in Tools for Better Code

12:30 PM – 1:30 PM
What’s New in Mobile – RadControls for Windows Phone

 

 

Day 3 – Wed, Feb 22

9:30 AM – 10:30 AM
What’s new in KendoUI

11:00 AM – 12:00 PM
What’s new in Sitefinity 5.0

12:30 PM – 1:30 PM
What’s new in TeamPulse

(All times are Eastern Standard Time)

Couple of months I am working on with the Sitefinity product to build a website and I am really looking for the webinar on this product. Every one can make use of this opportunity and get the best out of the webinars.

Happy Programming!!!

Posted in Telerik | Tagged: , , , | Leave a Comment »

Learn Windows Phone 7 Development in 31 Days – Day 3 – Using Expression Blend to Design the WP7 Application

Posted by Karthikeyan Anbarasan on February 3, 2012

01 Download ToolsDownload Source CodeDownload as PDF FileSubscribe to F5debugComplete Article Listing

Introduction:

In this article we are going to see how to design the user interface of a Windows Phone 7 Application using Expression Blend. Expression Blend is one of the product of the Expression Suite of applications, which is used to design rich user experience for a XAML based application. Basically we can design any Silverlight, WPF application which are XAML based and now we can use this product to design the Windows Phone 7 Application as well which uses the XAML code.

Expression studio is a licensed version, but for developing the Windows Phone 7 application the Expression blend is available as free with the Windows Phone 7 SDK downloaded initially when we made the development environment ready(Check my first article on Overview of Windows Phone 7 Development). Let us see the step by step process on how to use the Expression Blend product to make rich user experienced design for the Windows Phone 7 Application.

Steps:

Let us take the sample (F5DebugWp7Helloworld) application which we developed in our earlier article (Learn Windows Phone 7 Development in 31 Days – Day 2 – Creating a Hello World Silverlight Application in WP7). Now to start with open the application in Visual Studio 2010 IDE and open the project and we can see the application look like below.

2012-01-13 11h04_18

Now we will design this page using Expression Blend. To start with first locate the page in the Solution Explorer of Visual Studio 2010 and then right click and select Open in Expression Blend as shown in the screen below.

2012-01-13 11h07_10

Clicking on Open in Expression Blend will load the Expression Blend IDE and we can see the page opened as shown in the screen below.

1

No we need to select the button (SUBMIT) from the Object and Timeline pane on the left side and right click to select Edit template option to create a Empty template as shown in the screen below.

2

Now we can see a pop up window which has the option to create the empty Control template resource for the button. Just click on OK to proceed further without changing any option.

3

Now select the GRID from the Objects and Timeline pane and right click to change the layout. From the list of layouts select Border as shown in the screen below.

4

Now we need to customize the design of the button, go to Appearance section and change the border thickness and corner radius as shown in the screen below.

5

Non change the background color by selecting the Brushes section. Change the color as per the requirement and also we have option to customize by providing the color code directly as shown in the screen below.

6

Similarly we need to change the setting for the Border Brush by selecting from the color pallet or by providing the color code as shown in the screen below.

7

Now we need to switch to the Assets panel and select the text block tool from the controls pane under the Border element of the template as shown in the screen below.

8

Now we need to customize the design for the text block by selecting the appearance and layout sections on the right side panel and changing the alignments as shown in the screen below.

9

Now this step is very important, to change the content of the text property select the Common Property category and click on Advanced  Property option to select the template binding to Content as shown in the screen below.

10

Now we are done with our design and the user interface will look like below. We can see the button customized and look with a rich user interface as shown in the screen below.

11

Now go back to the Visual Studio IDE and load the project, we can see a alert window that some of the resources are changed outside Visual Studio and do we need to restore the changes. Click on Yes to All and proceed further as shown in the screen below.

12

Now build and execute the application by pressing F5 button from the keyboard or by directly selecting the Build solution. We can see the application loaded on to the Windows Phone 7 Emulator and we can see the output as shown in the screen below.

13

Conclusion:

So in this article we have seen how to use the Expression Blend to design a rich user interface for the Windows Phone 7 Application and load it to the Windows Phone Emulator.

Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.

F5Debug FacebookF5debug LinkedInF5debug TwitterF5debug GooglePlusF5debug RSSFeed

Posted in Windows Phone 7 | Tagged: , , , , , , , , , , , , | 3 Comments »