5 Things everyone should be Aware of in RadControls for Windows Phone

Introduction

Telerik’s RadControls for Windows Phone was officially released in early 2011. We were the first vendor to support Microsoft new mobile platform and have continued to invest in new controls and features ever since. Even though our controls suite has been out since 2011, I’ve found several people at conferences or on webinars that were not aware of what exactly our controls are capable of. That is where we will get begin today.

5 Things you should be aware of.

#1: A new template called, “RadControls for Windows Phone” is added to Visual Studio that allows you to customize your project to fit your needs.

The default Windows Phone Template provided by Microsoft offers no additional configuration options besides the project type. Once the project is created, then you are left on your own to figure out what to do next.

If you select the RadControls for Windows Phone project template, then you will see the project configuration wizard shown in Figure 1 after adding in any additional assemblies.

Figure 1: Project Configuration Wizard in a new RadControls for Windows Phone App.

You can easily select a different project type, such as the standard Windows Phone App, Databound App, Pivot or Panorama App as well as add the application bar back. The default Windows Phone template removes the application bar boilerplate code.

Next, we see several common pages found in any professional Windows Phone apps such as the “About” screen and “How to” screen. You can let RadControls for Windows Phone, generate those pages for you as well as structure them properly using the MVVM pattern.

We finally get to Building blocks, which allows us to add common functionality that we typically code in every app with a single checkmark. Let’s examine each of them briefly:

• Diagnostics: If your application crashes, then it allows you to collect the error information and email it to the author.
• Trial application reminder: Will remind your user that the application is a trial and prompt them to purchase it. You can specify when the reminder will display in a variety of ways.
• Rate application reminder: Will remind your user to rate the application in the store marketplace. There is also many different configuration options available.

Once you select finish on the project configuration wizard (using the default options), then you will see the project structure as shown in Figure 2.

Figure 2: Project Solution for a new RadControls for Windows Phone App.

Besides the additional references to Telerik’s controls and our new “About” page, you will see several new folders automatically created. But more importantly are the ones called “Commands” and “ViewModels”. Here you can see the project is already structured using the MVVM architectural pattern. If you’re not familiar with the pattern, then the stubbed out code provides a great way to get up to speed quickly. You can also review some of our sample apps mentioned later in the article.

#2: Error Diagnostics – Part of the Building Blocks in RadControls for Windows Phone.

After you have placed a checkmark in Diagnostics in the project configuration wizard or added it through the design templates, we automatically add several lines of code in your App.xaml.cs file to help you analyze where the error occurred. The end-user is presented with the following screen shown in Figure 3.

Figure 3: The Application Error Dialog being displayed.

Instead of a normal crash, where the app just exits out, by using our controls the end-user receives a dialog prompt that gently provides what just happened and a way to submit the report via email. You may also receive anonymous crash reports without user interaction as described in this post.

The error report looks like the following:

[ExceptionMessage]:[FormatException]
[StackTrace]:[
   at System.DateTimeParse.Parse(String s, DateTimeFormatInfo dtfi, DateTimeStyles styles)
   at Treadmill_Assistant.Views.AddItem.OnNavigatedTo(NavigationEventArgs e)
   at Microsoft.Phone.Controls.PhoneApplicationPage.InternalOnNavigatedTo(NavigationEventArgs e)
   at System.Windows.Navigation.NavigationService.RaiseNavigated(Object content, Uri uri, NavigationMode mode, Boolean isNavigationInitiator, PhoneApplicationPage existingContentPage, PhoneApplicationPage newContentPage)
   at System.Windows.Navigation.NavigationService.Journal_NavigatedExternally(Object sender, JournalEventArgs args)
   at System.Windows.Navigation.Journal.OnNavigatedExternally(String name, Uri uri, NavigationMode mode)
   at System.Windows.Navigation.Journal.ShellPage_NavigatedTo(Object sender, NavigateToEventArgs args)
   at Microsoft.Phone.Shell.Interop.ShellPageCallback.FireOnNavigateTo(IntPtr thisPage, Direction direction, IntPtr pagePrevious)
]
[OccurrenceDate]:[Sun, 17 Mar 2013 21:44:20 GMT]
[AppInstallDate]:[Sun, 17 Mar 2013 21:41:10 GMT]
[AppTotalRuns]:[2]
[AppRunsAfterLastUpdate]:[2]
[AppPreviousRunDate]:[17-03-2013 18:41:10]
[AppVersion]:[1.3.0.0]
[Culture]:[es-CL]
[CurrentPageSource]:[/Views/AddItem.xaml?date=3-20-2013]
[NavigationStack]:[
/MainPage.xaml]
[DeviceManufacturer]:[NOKIA]
[DeviceModel]:[Lumia 610]
[DeviceHardwareVersion]:[112.1569.1.0]
[DeviceFirmwareVersion]:[1066.0000.8773.12160]
[OSVersion]:[Microsoft Windows CE 7.10.8773]
[CLRVersion]:[3.7.11140.0]
[DeviceType]:[Device]
[NetworkType]:[Wireless80211]
[DeviceTotalMemory(Mb)]:[165,5859]
[AppPeakMemoryUsage(Mb)]:[18,88672]
[AppCurrentMemoryUsage(Mb)]:[12,8125]
[IsoStorageAvailableSpace(Mb)]:[4454]
*[ScreenshotBase64String]:[
/9j/4AAQSkZJRgABAQEBBgEGAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI]
[DecodeScreenshotHere]:[http://www.motobit.com/util/base64-decoder-encoder.asp]

*Field truncated due to length.

As you can see, it provides vital information that will help you diagnose the error. From the stack trace, device info, to memory usage and much more.

Another excellent feature to call out is that it provides the Base64 string of where the error occurred. You can then decode the screenshot and see exactly what the user saw at the time of the error.

#3: Built-in Design Templates – 50+ Available in RadControls for Windows Phone.

I think that it is safe to say that a majority of us would love to have a designer at our own disposal. Someone who understands the design principals and guidelines behind a Windows Phone app. Thankfully, with RadControls for Windows Phone you have that at your fingertips.

If you simply right click on your solution and select “Add New Item”, you will see “Telerik item” listed. If you click on the “Add” button then you will be presented with the screen shown in Figure 4.

Figure 4: The 50+ design templates available with RadControls for Windows Phone.

You will see a variety of different templates created by our designer, that will that create pages in your application ranging from:

• Charts and Dashboards – to visualize your data in a variety of different ways.
• Navigation – from image carousel to expanding list and much more.
• Pages – Common static pages such as an “About” or “How To” to input forums such as user login information.
• Search, Sort and Filter – provides pages that helps your user find what they are looking for fast.
• Tables –is great for displaying list in a variety of ways.

For example, if I took the “Sign-up” form template found under Pages, the necessary references are automatically added to my project as well as the Commands, Helper classes (to perform validation on input – such as password length) as well as my DataModel is created. An example of this page is shown in Figure 5.

Figure 5: The Sign-Up page created by using the Design Template in RadControls for Windows Phone.

Again, we have not written one line of code and we have a MVVM friendly sign-up form with data validation baked in. Remember that this is just one of the 50+ design templates available at your disposal.

#4: Powerful Charts with just One-Click

From your Visual Studio Toolbox, you can simply drag and drop a Chart onto your designer and get a SmartTag that allows you to select from a variety of pre-built charts as shown in Figure 6.

Figure 6: The Smart Tag that allows you to pick from a variety of Chart Types.

Once you click on the SmartTag a variety of chart types appear as shown in Figure 7.

Figure 7: The variety of chart types that you may select.

Upon selecting a chart type, the XAML will be auto-generated for you including design-time data support as shown in Figure 8.

Figure 8: The Area Chart Type which is part of the RadControls for Windows Phone.

As you can see, it is very easy to see the different types of charts available in your phone app without writing one line of code.

#5: The Most Powerful and Flexible ListBox on the Market. Period.

It is hard to find a Windows Phone app that doesn’t include some sort of ListBox. It is the core control of almost any Windows Phone app. Not only is ours blazing fast and support three modes of data virtualization, but it includes features such as item animations as items are adding or removing from the ListBox. It also includes “Pull to Refresh” functionality that refreshes any given item list with a scroll command and is highly customizable. An example of “Pull to Refresh” can be found in Figure 9.

Figure 9: The “Pull to Refresh” option in DataBoundListBox.

We have a vast variety of other features available in this control that you may want to examine more carefully.

#6: Bonus Feature! Sample Apps Build by the Pros including a Whitepaper on “How to Market Your App”.

Everyone wants to see the code behind some of the most popular apps in the Windows Phone marketplace and Telerik provides the full-source to them.

a. ToDoList – Shows how we built our ToDoList application as well as a series on creating the wireframes and building the actual app.

b. Picture Gallery – Demonstrates how to create a native Windows Phone client for Flickr or another image service.

c. How to promote your Windows Phone app on a budget whitepaper. – Once your app is built, you will need to learn how to market it. This whitepaper offers tips and tricks from both the developer and marketing perspective. It is something you will definitely want to read.

Conclusion

To recap the “5 Things Everyone Should be Aware of in RadControls for Windows Phone”:

• A new template called, “RadControls for Windows Phone” is added to Visual Studio that allows you to customize your project to fit your needs.
• Error Diagnostics – Part of the Building Blocks in RadControls for Windows Phone.
• Built-in Design Templates – 50+ Available in RadControls for Windows Phone.
• Powerful Charts with Just One-Click.
• The Most Powerful and Flexible ListBox on the Market.
• Bonus Feature! Sample App Build by the Pros including a Whitepaper on How to Market Your App.

Even with that said, we have barely scratched the surface of what you get out-of-the-box with RadControls for Windows Phone. I’d encourage to take a look around the product page and also check out what our customers are building using our controls. On a side note, if you join the Nokia Premium Developer Program, than you get our controls for free.

If you have any questions or comments, then please leave them below.

Happy Windows Phone Dev’ing!

-Michael Crump (@mbcrump)