windows_universal_header

I’d like to take a moment and time travel back to late 2010, when Windows Phone 7 officially launched. Microsoft developers everywhere were excited that they could reuse their existing skillset and begin to build native mobile applications. Not only were Microsoft developers happy, but so was Telerik. We had been working closely with Microsoft to deliver a CTP of our Windows Phone control suite right at launch and become the first vendor to enter this space.

By mid-2011, Microsoft released the first public beta of Windows 8 to developers which included another SDK specific to the platform. Windows 8 was publicly released in mid-2012 and was a milestone in the company’s history as it was designed for touch. This meant Microsoft’s OS was headed for the tablet for the very first time. This was another victory for Microsoft developers as they could now develop for tablets running Windows 8. Again, Telerik had been working with Microsoft to deliver our Windows 8 control suite right at launch and we were the first commercial library available on the market.

Fast forward to //Build in April 2014, Microsoft acknowledged the convergence of Windows 8.1 and Windows Phone 8.1 and gave it the title of Windows Universal Apps. For the first time in history, you could now create applications that target the phone and tablet and share a single code base. It should come to no surprise that Telerik is yet again among the first vendors on the market to release a control suite for Windows Universal Apps. This shows our commitment over the years to Microsoft and, more importantly, to you as the developer. So now that we’ve had our history lesson, let’s go to class and learn more about Windows Universal Apps and how Telerik fits in.

Let’s begin by Looking at the Structure of a Universal App

Before we jump in, Windows Universal Apps require Visual Studio 2013 Update 2 or later. Once installed, expand the “Store Apps” node and you will see a category called “Universal Apps”. Select “Blank App” and give it a name. A blank app simply creates a single-page app that uses the Windows Runtime and targets both Windows and Windows Phone. The solution explorer looks like the following as shown in Figure 1.

Figure 1 : The Solution Explorer for a "Blank Windows Universal App".

Figure 1 : The Solution Explorer for a “Blank Windows Universal App”.

Note that there are actually three projects created upon launch:

  1. Windows 8.1 App
  2. Windows Phone 8.1 App
  3. Shared Project – This is a container for code that runs on both platforms. Everything in this project is automatically included in both projects and in their build output.

If you look under references, then you will notice that both the Windows 8.1 and Windows Phone 8.1 have a reference to the Shared project. This is where the magic starts to happen. Notice that the App.xaml and App.xaml.cs is only included in the Shared project. By using preprocessor directives such as the following, we can isolate sections of code to a specific platform:

#if WINDOWS_PHONE_APP
        //run Windows Phone specifc code
#endif

#if WINDOWS_APP
        //run Windows specific code
#endif

Now that we’ve examined the structure of an app, let’s dive deeper and add some functionality.

A Quick Windows Universal App Demo

If you examine the contents of the MainPage.xaml in each project, then the only difference you will see is how the background color is set in each project. Windows 8.1 defines it in a Grid, whereas Windows Phone 8.1 declares it in the Page. Either approach works, so for this demo, lets drag and drop the MainPage.xaml file to our shared project and delete it from our Windows Phone 8.1 project.

Go ahead and open the MainPage.xaml file from the Shared Project folder and take a look at the Toolbox and you will notice that Microsoft has supplied several controls that work just like they did in Windows 8 and Windows Phone 8. For the purpose of this demo, we are going to drag and drop a TextBlock onto the MainPage.xaml, and provide text and a font size. We can see our changes as we switch between Windows 8.1 and Windows Phone 8.1 in the designer as shown in Figure 2:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Hello from Telerik HQ!" FontSize="42"/>
</StackPanel> 
Figure 2 : Switching the designer mode from Windows 8.1 to Windows Phone 8.1 to reflect the changes.

Figure 2 : Switching the designer mode from Windows 8.1 to Windows Phone 8.1 to reflect the changes.

This application will run successfully if deployed to the Windows 8 simulator or Windows Phone emulator since the OnLaunched event in the App.xaml.cs has the following code looking for the MainPage file:

if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
{
    throw new Exception("Failed to create initial page");
}

Since both projects are using the Windows Runtime, you could even use some common classes previously only found in Windows 8 in the MainPage.xaml.cs. This would trigger an appropriate MessageDialog on either platform.

public MainPage()
{
    this.InitializeComponent();
    Loaded += MainPage_Loaded;
}

async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var dialog = new MessageDialog("Telerik Rocks!");
    await dialog.ShowAsync();
}

Cleaning up our Shared Project

While we have a working application, as you continue to build Windows Universal Apps, you should adhere to the structure provided below to organize your code better. Using the HubApp as a Template, my Shared project now looks like Figure 3:

Figure 3 : Properly Structured Shared Project.

Figure 3 : Properly Structured Shared Project.

Here you can see we have the following folders:

  • Assets – Contains Images, Video, etc. that we would like each project to have access to.
  • Common – Is great for helper classes, process lifetime management, etc.
  • DataModel – Contains your data model which is specifically useful if you are using the MVVM pattern.
  • Strings – Store your .resw files to allow your application to be localized.

With a properly structured app, we are now ready to create an app!

But wait, something is missing. Where is my Chart, AutoCompleteBox and Rating control? What about a BusyIndicator that supports various animations instead of the one supplied by MS, or even a BusyIndicator that allows me to create my own animations. How about a customizable Date and Time Picker?

This is where Telerik fills in the gaps with Telerik UI for Universal Windows Apps.

Upon downloading and extracting it, you will have the binaries to reference all the UI controls mentioned earlier in your Windows Universal App, Help Documentation and a complete sample application that simulates a sales dashboard as shown in Figure 4.

Figure 4 : Telerik UI for Windows Universal Apps Sample Project.

Figure 4 : Telerik UI for Windows Universal Apps Sample Project.

A Powerful Universal Windows Area Chart in Seconds…

After you have referenced the binaries in each project in your Windows Universal App, you can create a chart in seconds. Simply add the following XML namespace to your MainPage.xaml:

xmlns:telerikChart="using:Telerik.Universal.UI.Xaml.Controls.Chart"

In this snippet below, we are creating a horizontal and a vertical axis. Specifying the proper axes depends on your data and how you want it visualized. Now you have a chart with two axes but no data. In order to visualize data you will need to add the desired chart series. You can either declare the data inside our chart as shown below or set the ItemsSource property of the series to bind the data to the DataContext of this series.

The complete XAML for the rich and vibrant chart is shown in Figure 5.

    <telerikChart:RadCartesianChart PaletteName="DefaultLightSelected">
        <telerikChart:RadCartesianChart.VerticalAxis >
            <telerikChart:LinearAxis/>
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:CategoricalAxis/>
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:AreaSeries CombineMode="Stack">
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.9"/>
            <telerikCharting:CategoricalDataPoint Value="1.9"/>
            <telerikCharting:CategoricalDataPoint Value="2.3"/>
            <telerikCharting:CategoricalDataPoint Value="2.1"/>
        </telerikChart:AreaSeries>
        <telerikChart:AreaSeries CombineMode="Stack">
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
        </telerikChart:AreaSeries>
        <telerikChart:AreaSeries CombineMode="Stack">
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
            <telerikCharting:CategoricalDataPoint Value="1.0"/>
        </telerikChart:AreaSeries>
    </telerikChart:RadCartesianChart>
Figure 5 : RadChart for Telerik UI for Windows Universal Apps.

Figure 5 : RadChart for Telerik UI for Windows Universal Apps.

For complete documentation of other series included in the beta, please consult the documentation included in the release folder.

Coming With the Official Release: RadChartGallery

Just like you are used to in Windows 8.1 and Windows Phone 8.1 apps, we will include the RadChartGallery to generate the XAML on the fly as shown in Figure 6.

Figure 6 : The RadChartGallery for Windows Universal Apps in Action!

Figure 6 : The RadChartGallery for Windows Universal Apps in Action!

I’m sure there are other questions that you would like answered, such as what else is coming in the official release? Which Telerik products can developers use to speed up their Universal Windows development? Thankfully, these questions have already been addressed in our official announcement.

Conclusion

Today marks an important milestone with Telerik’s commitment to the future of Windows Universal Apps. We are among the first vendors to support this new development stack and will continue to improve upon it. We already have shown our commitment to both platforms by releasing over 60 Windows Phone controls and 35+ Windows 8 controls. We will continue moving forward with Windows Universal Apps as each platform continues to grow.




Written by:

Michael Crump

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

  • Ahmad Pirani

    Though I am not a big fan of either Telerik or Syncfusion, I do like and prefer Telerik controls.
    However, note that Syncfusion’s WinRT controls that they released long time back for Windows 8 are already and automatically compatible with Windows Phone RT apps. You can easily create universal apps using them and I am currently doing that using their WinRT controls that I had got last year for WinRT development. I might be wrong but, I do not recall Telerik ever releasing WinRT controls for Windows 8.

    Hence, I would say that Syncfusion is at least ahead of you in universal Windows app space.

  • http://michaelcrump.net Michael Crump

    @ahmadpirani:disqus: Second paragraph of this article. :) We released Windows 8 (WinRT) controls at TechEd 2012. Here is the official product page: http://www.telerik.com/products/windows-8/overview.aspx

    Let me know if I can help further.
    -Michael

  • David A Larew

    I’m trying to port a win 8 html store app to win 8.1 phone…do you have any samples that show how to convert from winjs2.0 app to the universal win phone 8.1?