BUILD 2014, San Francisco
Developing Apps Using the Common XAML UI Framework (2-507) – Tim Heuer

Day 1, 2 Apr 2014, 1:00PM-2:00PM

Disclaimer: This post contains my own thoughts and notes based on watching BUILD 2014 keynotes and presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of Microsoft or of the presenters or speakers.

Tim Heuer – Program Manager, Windows Developer Experience Team, Microsoft

Focused on “native UI”–XAML is the public native UI surface area that we expose

Universal Windows apps, built on common Modern platform

• Now about evolution of existing Silverlight apps for Windows Phone
• Session also not about WPF
• Tomorrow—panel discussion on WPF

“Marketecture” slide:

For Phone 8.1, common model allows you to create apps that span all devices

• Platform & tooling

Present in Visual Studio 2013 Update 2 (currently RC)

Old world:

• Custom build camps, share just code files
• Maybe Portable Class Library (but didn’t support XAML)

Now:

• Can share any asset from your project, across devices
• E.g. Images, XML, resources, localized resources, shared UI (XAML)

Share your XAML UI

Other sessions: 3-591 – Using Visual Studio to build XAML Universal Apps (Saxena)

Goal is to maximize reuse of code

• 3″ device to 40″ device

But you also need/want to tailor the GUI to each device

• What should be common? What should be tailored?

Demo – Shared Projects in Visual Studio

Visual Studio Express also supports this

 

SportsLeague app in demo

Multiple projects in solution

• Windows 8.1 project
• Windows Phone 8.1 project
• Shared project
  • Doesn’t output anything
  • Place to declare shared assets
  • Merged into other projects in solution

Sharing various assets, e.g. ViewModels

“Project heads”—e.g. “Windows Phone head”—the project that builds the final Windows Phone target

Start from scratch—various templates

If you have existing app

• Rt-click existing Windows Phone project, then Add Windows Phone 8.1
• Converts your project to Universal App
• Doesn’t add any files—no assumptions about what you will want to share
• Some assumptions when you start with new project

(demo ends)

Old world:

Goal was completely merged platform

• We got close

What’s common and what’s not?

• Windows Phone unique stuff are controls like unique picker controls, etc. (e.g. DatePicker with flyout)
• Here’s raw data, gotten by doing diff

Three main areas to cover today:

We’ll focus only on Windows.UI.Xaml namespace today

Two main categories:

• Controls – what controls can I use
• Framework – e.g. data binding, input, etc.

Controls

• Also: 2-516: Building Great UI in XAML (Oster)

‘Primitives’ – same (on both devices)

• Layout: Panel, StackPanel, Grid, Border
• Buttons, Slider, ToggleSwitch, CheckBox, RadioButton, ProgressBar
• TextBox, TextBlock
• Shapes, Path

Demo – Same API/Behavior

Start with existing app, add Win Phone 8.1 project

• Move App.xaml, MainPage.xaml, etc. to Shared
• Open XAML from Shared project
• Can switch between views—different devices

E.g. StackPanel with Button

Intellisense works, same re-factoring works in editor

APIs that are the same, but where experience/behavior is slightly different

Fairly primitive—just three ComboBoxes

API is exactly the same on these devices

‘Primitives’ – same API, but with tailored behavior

• Hub – “hero image” on Win 8, but experience on phone wraps
  • API identical, but experience tailors/adapts to device
• AppBar/CommandBar
  • Can’t use AppBar on Win Phone 8.1
• Date/Time Pickers and List Pickers
  • List Pickers—6+ items, you go to second screen
• ListView
  • Multi-select; containers, swipe selection
  • Multi-select works differently on phone—checkboxes appear at left
  • But API is same, e.g. how you enable multi-select
• Flyouts
  • Available on both devices
  • Phone—full screen; desktop—”full windows” is more like 70% of window
• Media
• Ads SDK*
  • Not really in XAML platform, but worth mentioning
  • Ad units is different, depending on platform

Demo – Same API, tailored behavior

Use of user controls lets you to create composite UI chunks

Sports app

• Uses Hub control

Hub on Windows 8, when you get to the right, you’re done, can’t move further to the right

Run on Win Phone 8.1 emulator

• Hint: use low memory profiler

Can swipe right, because Hub wraps on phone

Parallax effect, image slowly slides

Looking at code, Hub page is shared

• <Hub> element
• <HubSection>
• XAML the same for both devices
• Actual content of section
  • Composite user control
  • E.g. DataTemplate is <views:CoverStoryView>
  • User control CoverStoryView
  • Creating this view in both device-specific projects
• This allows tailoring for each device in the user control
  • E.g. some textual changes, styling
  • Or in “points table”, show different # columns
• User control allows you to break out pieces of GUI and tailor them
  

CommandBar in main page, shared XAML

• Add AppBarButton
• Then SecondaryCommands with some more AppBarButtons

Windows 8.1

• Primary commands on right, secondary on left
• Right-click or edge slide to invoke

Windows Phone 8.1

• CommandBar is up by default, don’t need to do anything to make it appear
• Secondary—list after clicking ellipsis, no visual

So the AppBar tailors itself for the device

• And gracefully ignore things that don’t apply (e.g. icons for secondary buttons)

E.g. What if you have 20 commands, what happens on Phone?

• Ignores the ones that won’t fit, beyond phone maximum

Can also add UI via code, but do it as shared

• E.g. Ads, first add Ad SDK to both platform-specific projects
• Ads team has controls for both platforms, but currently in different namespaces
• So can’t add them in XAML, but need to do it in code
• Can go into shared code-behind
• Add #if WINDOWS_APP / #else
  • using ads = Microsoft.Advertising.WinRT.UI
  • or: using ads = Microsoft.Advertising.Mobile.UI
• In Loaded event
  • Also #if
  • Set ad dimensions
  • Placeholder.Child = ads (new AdControl), where PlaceHolder is maybe a StackPanel defined in markup
• Or could have done ads in user control

Using localization for tailoring experience

Device-specific APIs – things that aren’t common between the platforms

• Windows
  • SearchBox
  • SettingsFlyout (these things don’t exist on phone, so not exposed from API on phone)
• Windows Phone
  • Pivot – control on phone, doesn’t exist on Windows
  • AutoSuggestBox – new control for Phone 8.1
    • Similar to SearchBox on Windows, but not associated with contract
  • ContentDialog
    • Dialog with arbitrary XAML
  • Maps
    • Can tap into maps platform on phone
    • Part of XAML platform on Phone
    • Desktop does have maps, but via Bing SDK
    • Probably do platform-specific user control to do map stuff
  • System Chrome
    • Progress area, in-call UI
    • Not a lot of system chrome on desktop/tablet

System chrome

• Blue at top – system chrome (system tray); contains in-call progress, notifications
  • Your page’s background
• Green/red in middle—your UI
• Bottom app bar is rendered as system UI, not part of your app
  • On desktop, it is part of your app

By default, render your app content in “visible bounds area”

• E.g. in red rectangle in this picture
• But you should set page background to the same as your app background color
• E.g. in this example, you’d set Page.Background to red

Or you can opt out by setting desired bound mode

• If you have game and want content to go edge to edge
• Now you’re responsible for all of it

2-516: Building Great UI in XAML (Oster) – building controls

Framework Areas

• Animation, text, navigation, background, scaling, styling
• (Data binding—identical across platforms)

Navigation Model

• Navigation APIs same
• Phone
  • Hardware Back button
• Windows
  • In-app Back button
• Project templates for Universal apps handle this already
• 2-537: Navigation Model for XAML Apps (Karman)

Animations

• API same
  • But device-specific on phone
• ThemeAnimations
• ThemeTransitions
• Navigation
• “ReaderBoard”
• But they expose basic phone animations and you can now use in your apps
  • E.g. Mail list flyouts
  • I.e. system level animations
  • ReaderBoard

Text – new features for phone developers; same APIs

• Typography.Caps
• OpticalMarginAlignment
• TextureBounds
• TextWrapping
• TextClipping
• MaxLines
• “Header” (Label) on input text controls

Text Enlargement

• Accessibility
• IsTextScaleFactorEnabled property

PasswordBox

• Phone
  • Delay character reveal
  • Show password checkbox
• Tablet
  • Just TextBox with password hide

Custom Tiles

• Something like 65 custom tiles that you can use
• Tiles rendered as background task
• Now: XamlRenderingBackgroundTask – so that you can do custom tile
• 2-253: Hidinger

Scale Factors and Effective Resolution

• You really need to think about it
• 3-541: From 4 to 40 Inches (Torr)

Styling and Theming

• Accent Color
  • SystemColorControlAccentColor/Brush (exposed)
• Text Styling
  • PhoneText
• Focus visuals
  • Do not exist on phone (because no keyboard)
  • These just don’t show up on phone
• Theme overrides and High Contrast—same!
  • Part of common platform
  • Override the theme that the user has picked

Other UI areas for XAML developers

• Control developers
  • Needing 2 SDKs, what approach should you take
  • How to think about ‘adaptive’ in your own controls
  • 3-591: Saxena
• Interaction areas with shell (share/settings)
  • File pickers (Continuation Model)
  • Share – entry point difference
  • Settings – entry point differences, no SettingsFlyout on Phone
  • E.g. Reserved spaces for these things on tablet

Other sessions that relate to this topic: