windows store apps and winrt -...

Universal Apps

Jeff Prosise jeffpro@wintellect.com

Universal Apps

Announced at BUILD 2014 Require Visual Studio 2013 Update 2 (currently in RC)

Run on Windows 8.1, Windows Phone 8.1, and...

Universal App Solution

Windows 8.1 project Contains "head" for Windows version of

app

Windows Phone 8.1 project Contains "head" for Windows Phone

version of app

Shared project Contains code, resources, and other

assets shared by other projects No target platform; files in shared project

are shared with other projects via file linking

Shared Project

Contains source code files, images, and other assets used in Windows and Windows Phone projects Source code files must be able to compile in each project

Cannot contain references to other assemblies Add assembly references to Windows and Windows Phone projects References can include platform-specific assemblies, Portable Class Libraries

(PCLs), and even Windows Runtime components

Most code can be shared between projects because Windows Phone 8.1 implements more than 90% of WinRT

WinRT vs. WinPRT

http://firstfloorsoftware.com/Media/DiffLists/Windows%208.1-vs-Windows%20Phone%208.1.html

Windows (WinRT) Windows Phone (WinPRT) System.ServiceModel System.ServiceModel.* Windows.ApplicationModel.- Contacts.Provider Windows.ApplicationModel.- Search Windows.Data.Pdf Windows.Devices.- PointOfService Windows.Devices.Scanners Windows.Devices.Sms Windows.Devices.Usb Windows.Graphics.Printing Windows.Media.Playlists Windows.Security.Credentials.UI Windows.Storage.BulkAccess Windows.UI.ApplicationSettings Windows.UI.Input.Inking Windows.UI.Xaml.Printing

Windows.ApplicationModel.Chat Windows.ApplicationModel.Email Windows.ApplicationModel.Wallet Windows.Media.Playback Windows.Media.SpeechRecognition Windows.Services.Maps Windows.UI.Xaml.Controls.Maps Windows.Phone.* Common APIs

Your First Universal App

Platform-Specific Code in Shared Projects

Windows and Windows Phone projects can use platform-specific code, even in shared files e.g., adding settings commands to Windows' settings pane

Use #if statements to enclose small blocks of code Test for WINDOWS_APP in Windows projects Test for WINDOWS_PHONE_APP in Windows Phone projects

Use partial classes and partial methods for larger blocks Shared project contains partial class definition Other projects contain platform-specific implementations of partial methods

http://www.wintellect.com/blogs/jgarland/under-the-hood-with-windows-universal-projects

Using #if

#if WINDOWS_APP // TODO: Insert Windows code here #endif #if WINDOWS_PHONE_APP // TODO: Insert Windows Phone code here #endif

Using Partial Methods

// Partial class (shared project) public partial class PartialClass { public void DoSomethingInteresting() { DoSomethingPlatformSpecific(); } // Partial method can't be public, but can be called by // a public method partial void DoSomethingPlatformSpecific(); }

Using Partial Methods, Cont.

// Partial class (Windows project) public partial class PartialClass { partial void DoSomethingPlatformSpecific() { // TODO: Insert Windows code here } }

Using Partial Methods, Cont.

// Partial class (Windows Phone project) public partial class PartialClass { partial void DoSomethingPlatformSpecific() { // TODO: Insert Windows Phone code here } }

Platform-Specific Code in Shared Projects

Sharing Code

Source code files can be shared through shared projects

Assemblies can also be shared between projects Portable Class Libraries (PCLs) Windows Runtime Components

Be sure to reference shared assemblies in the Windows project and the Windows Phone project References cannot be added to the shared project However, code in the shared project can reference types in the shared libraries

Sharing Source Code

.cs files in shared project get compiled into other projects

Sharing Compiled Code through PCLs

PCL project contains shared components

Platform-specific projects contain references to PCL

Shared Code

Shared Views

Views can be shared between projects XAML files plus code-behind files

Shared views can adapt to available screen size Use ActualWidth and ActualHeight of root element to adapt UI to screen Beware reading ActualWidth and ActualHeight properties too early

Wait until root element fires Loaded event

Shared views can be styled using platform-specific resources (styles, data templates, etc.) Link to file containing resource dictionary (e.g., Styles.xaml) from App.xaml Provide platform-specific implementation of Styles.xaml in each project

Measuring the Available Screen Size

// XAML <Grid x:Name="LayoutRoot"> ... </Grid> // C# LayoutRoot.Loaded += (s, e) => { var width = CellGrid.ActualWidth; var height = CellGrid.ActualHeight; };

Linking to an External Resource Dictionary

// In shared App.xaml file <Application.Resources> <ResourceDictionary Source="Styles.xaml" /> </Application.Resources>

Implementing Platform-Specific Resources

// Styles.xaml in Windows project <ResourceDictionary ...> <DataTemplate x:Key="ItemDataTemplate"> <TextBlock Text="{Binding}" Foreground="Red" /> </DataTemplate> </ResourceDictionary> // Styles.xaml in Windows Phone project <ResourceDictionary ...> <DataTemplate x:Key="ItemDataTemplate"> <TextBlock Text="{Binding}" Foreground="Yellow" /> </DataTemplate> </ResourceDictionary>

Using Platform-Specific Resources

// ListView declared in shared view uses platform-specific // data template <ListView ... ItemTemplate="{StaticResource ItemDataTemplate}" />

Shared Views

Download the Code

http://1drv.ms/1ij2K71