Build a Windows 10 Universal App – First Look

Unless you have been living under a rock for the last couple of weeks, you probably already know that Microsoft’s new version of Windows is called Windows 10 and the free upgrade is now available for public.  I have been using the Windows 10 preview version in my Windows Phone and Surface and was really excited for the final launch. As a passionate developer, I would encourage every fellow developer to upgrade as soon as possible and experience why it is the right time be a Microsoft Developer.

This article is published from the DNC Magazine for .NET Developers and Architects. Download this magazine from here [PDF] or Subscribe to this magazine for FREE and download all previous and current editions

In this article, we will see what’s new in Windows 10 and as a developer, how you can make use of new features to build apps, or even turn your existing Websites to Apps (Yes! You heard it right) and use device features like Calendar, Notifications etc. At the end of the article, we will also develop a simple Universal App to see how it behaves in a Tablet/Desktop and Windows Phone.

Check out the other articles in this series:

Building a Sound Cloud Music Player in Windows 10

Universal Windows 10 Platform (UWP) Sound Cloud Music App for Windows Phone & Raspberry Pi2

HomePi - A Windows 10 & Raspberry Pi 2 IoT app - Part 1

Building a Windows 10 IoT app running on Raspberry Pi2 - Part 2

Why is Windows 10 different?

One OS

To counter the erosion of its once impregnable desktop market and the growing popularity of Linux servers, Microsoft’s strategy is very simple – run one version of Windows on everything. So unlike previous versions of Windows, Windows 10 will be a single operating system that will run across all devices starting from High End desktops and laptops, all the way through Tablets and Smart Phones, and even on IoT devices like Raspberry Pi 2, Intel Galileo etc.

As a developer, this means there are no more multiple packages and versions. You can maintain one code base and develop apps that run across a large number of devices running Windows 10.

One developer platform

We are already familiar with Universal apps which allows us to share code between Windows 8.1 app and Windows Phone app. Windows 10 introduces a completely new different way of developing apps targeting multiple devices and it is called UWP apps or Universal Windows Platform apps.

This new platform also allows us to easily activate/deactivate features, in different devices, using unique APIs that target them. This also means there is only One Dev Centre to manage our apps and One Store where users browse and download our apps.

Multiple device families

Windows 10 UWP apps target different variety of devices and they are grouped into Device families as shown below.

Grouping these devices makes it easier for us to identify unique APIs targeting a particular type of device. Developers can enable their apps to run in one, or all of the devices and use adaptive code to activate or deactivate features.

Later in this article, we will see how we can run a sample app in Windows 10 Tablet, Windows Desktop and Windows Phone.

API Contracts

API Contracts allow us to check the availability of a Windows feature during runtime. This makes it possible to use device specific unique features and provide a different experience for the user in different devices, but maintain the same code.

Adaptive UX

Windows 10 allows us to develop apps that use a single UI that can adapt itself in small or large screens, without writing any code behind. The new RelativePanel makes this easy for developers to implement layouts which is based on relationship between its child elements. This also means lesser and cleaner XAML code.

Adaptive Visual States allow us to change the UI based on the changes in size of the window without writing any extra code.

New controls like calendar, split view etc. have been introduced and existing controls have been updated to work well in different screens.

Device Preview toolbar in Visual Studio allows us to preview the UI in different devices without running the app. Here is a screenshot of the toolbar.

Adaptive Scaling makes it easy to reuse assets from other operating system projects like Android and iOS which will reduce a lot of design time. Common Input Handling makes it even easier to gather input from various sources like Touch, Keyboard, Xbox controller etc. with only a few lines of code.

Hosted Web Apps

If you are a Web Developer, you can convert your existing Web Apps to a Universal Windows Apps using this model and even use universal APIs like camera, calendar, contact list etc. Users will be able to download your App like any other app from the store. Any updates done to the website is reflected immediately in the app. Hosted Web Apps can also use Cortana to have unique user experience in their website.

If your website does not have a Windows App, then this may be a good starting point with very less code, time and investment.

Cortana

Cortana is now a part of Windows 10 and is more open for developers. Our App (even Hosted Web App) can now react to voice commands and even override the default app behaviour (Imagine developing a Weather App which will be the default weather app for Cortana)

Reference Links

Here are some links for you to get started with Windows 10

1. Windows 10 Inside Preview

2. Download Windows 10 Mobile Insider Preview

3. Visual Studio 2015

4. Microsoft Virtual Academy – A Developer’s Guide to Windows 10

Sample Windows 10 App

Let us develop a simple Music Player app to see how the Adaptive UI works in different devices without writing any extra C# code.

Note: Since this is an introduction article, we are covering just one feature. In the forthcoming articles, we will be covering the others.

Step 1: Fire up the free Visual Studio 2015 Community Edition, create a new Windows Universal Blank App and name it MusicPlayer.

Step 2: Add the following XAML to the main Grid in MainPage.xaml

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualState x:Name="narrowView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="sldProgress.Visibility" Value="Collapsed"/>
                <Setter Target="txtEnd.Visibility" Value="Collapsed" />
                <Setter Target="txtStart.Visibility" Value="Collapsed" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1000" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="sldProgress.Visibility" Value="Visible"/>
                <Setter Target="txtEnd.Visibility" Value="Visible" />
                <Setter Target="txtStart.Visibility" Value="Visible" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="6*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Image Grid.Row="0" Source="Assets/Singer.jpg"  x:Name="albumArt"  Stretch="UniformToFill" Margin="0" HorizontalAlignment="Center" />
    <Grid x:Name="grid" Grid.Row="1" Background="#f0f1f2" >
        <Grid.RenderTransform>
            <CompositeTransform/>
        </Grid.RenderTransform>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0"  Source="Assets/Repeat.png" x:Name="btnRepeat" Height="25" Stretch="Uniform" />
        <Image Grid.Column="1" Source="Assets/Previous.png" x:Name="btnPrevious" Height="25" Stretch="Uniform" />
        <Image  Grid.Column="2" Source="Assets/Play.png" x:Name="btnPlay" Stretch="Uniform" Height="50" />
        <Image   Grid.Column="3" Source="Assets/Next.png" x:Name="btnNext"  Stretch="Uniform" Height="25"/>
        <TextBlock Margin="20,0" VerticalAlignment="Center"  Grid.Column="4" Foreground="#a2a7a9" x:Name="txtStart" Text="00:13" FontSize="30" />
        <Slider  Grid.Column="5"  Value="50" x:Name="sldProgress"  VerticalAlignment="Center" Width="450" />
        <TextBlock Margin="20,0" HorizontalAlignment="Right" VerticalAlignment="Center"  Grid.Column="6"  Foreground="#a2a7a9" x:Name="txtEnd" Text="00:13" FontSize="30"  />
        <Image Grid.Column="7" Source="Assets/Shuffle.png" x:Name="btnShuffle"  Stretch="Uniform" Height="25"/>
    </Grid>
</Grid>

In this code, we have added the following

1. A Grid with the following controls:

a. ‘Image’ Controls to display Album Art and other Media Control Buttons (Images are available in the sample code)

b. ‘TextBlock’ controls to display start and end time

c. ‘Slider’ control to display the progress

2. We also added two Visual States called wideView and narrowView to either display or not display the three controls (txtStart, txtEnd, sldProgress) using VisualState.Setters property.

3. We then use AdaptiveTrigger and MinWindowWidth property to enable or disable the state.

Step 3: Press F5 and adjust the width of the app to see how the UI changes. Here are some screenshots of the app on different devices.

Tablet/Desktop

Windows Phone

Here’s a link to the gif  in case you want to see the app in action.

In future articles, we will add more controls and functionality to this app and make it a fully functional Music Player that looks and behaves different in different devices.

Windows App Studio

As a side note, I thought of mentioning about the Windows App Studio, a free web-based tool that lets anyone create an app with ease. The app studio can now generate apps for Windows 10, as well as for Windows 8.1 and Windows Phone 8.1. Give it a shot!

Conclusion

The Universal Windows Platform Apps aims at changing the way we create apps. Instead of creating separate apps for different platforms, UWP apps would run across all major platforms with minor code changes. With Windows 10, Microsoft aims at bringing different platforms - PC, tablets, phones, XBox, Internet of Things (IoT) together and we sincerely hope that this platform and the benefits it brings, will create an attractive ecosystem for Windows 10 devices.

Download the entire source code from GitHub at bit.ly/dncm19-windows10apps

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

ShobanKumar is an ex-Microsoft MVP in SharePoint who currently works as a SharePoint Consultant. You can read more about his projects at http://shobankumar.com. You can also follow him on twitter @shobankr