BUILD 2014 – Developing Apps Using the Common XAML UI Framework

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:

Advertisements

BUILD 2014 – What’s New for Windows and Windows Phone Developers

BUILD 2014, San Francisco
What’s New for Windows and Windows Phone Developers (9-001) – Charles Torre, Kevin Gallo

Day 1, 2 Apr 2014, 11:30AM-12: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.


Charles Torre – Exec Producer – App Experience

 


Kevin Gallo – Director of Windows Developer Platform
(Partner Director Program Management)

What is Universal app?

  • Write once, run on multiple devices
  • Tuned to each device

Common set of APIs

  • Work across all devices
  • 90-95% of APIs are shared
  • Small number are appropriate to only certain devices (e.g. SMS)
  • Basically the same API that we’ve had in the past

All languages—C#, VB, Javascript, et al

Two major new things

  • Larger subset of API on Windows Phone (90-95%)
  • Project system in Visual Studio supports cross-platform projects (shared template)

For existing Windows Phone apps

  • Written in Silverlight 8.0, doesn’t have access to new APIs
  • But latest version of Silverlight does

How to migrate old apps

  • Upgrade project from 8.0 to 8.1
  • Then have access to all APIs
  • Or use Light Up
    • Keep as 8.0
    • Use reflection to detect 8.1, take advantage of some features
    • App “lights up” when running on 8.1 phone

Q: What’s difference between PCL-based application and Universal app?

  • PCL – subset of APIs that work across libraries; can share just code
  • Universal app – can share XAML, localization, etc.
    • Share more than just code
    • Natural evolution of PCL

Q: Can I make apps by using only HTML5/Javascript?

  • Choices
    • C#/XAML
    • DirectX / XAML
    • HTML5 / JavaScript
  • Flexibility
  • Can mix/match

Q: How to ensure quality apps on Windows devices?

  • Microsoft is providing tools for diagnostics & performances
  • Diagnostics help find bottlenecks
  • Reduces developer time for making great app

Q: Possible to create Universal App from existing WP8 app?

  • Some changes have been made to XAML
  • XAML is more “predictable”
  • Little bit of work to port, but not too bad

Q: Why choose Windows 8 platform over Android/iOS?

  • Not really about choosing
  • Rather, about reaching customer

Q: Do I need to know multiple languages to create a WP app?

  • No

Q: Full .NET on Win RT?

  • No

Q: Upgrade XNA to 8.1?

  • No, we haven’t done that much. Still need to port to DirectX

Q: DirectX 12 on phone?

  • Have not yet announced

Q: Universal App – separate app packages?

  • Yes, because they are different binaries
  • But Project system makes seamless
  • Two targets

Q: Option for devs to use 3rd party Javascript frameworks?

  • Yes, fully support 3rd party libraries
  • Goal is to help devs do cross-platform
  • Contributing WinJS to open source
  • Interop works (very important)

Q: When will SDK be available?

  • RC being released now, RTM later

Q: Some APIs that can’t be shared?

  • Not really
  • Mainly: SMS, printing
  • 90-95% of code will be shared

Q: Universal Apps support DirectX with C#?

  • No, just C or C++

Q: When will XBox One apps use this model?

  • Coming in the future

Q: What device are you using right now?

  • Nokia 1020 as Phone; Surface Pro as development for Windows

Shared Core, Shared Kernel, drivers?

  • We’ve merged Windows, Windows Phone, XBox kernels
  • From APIs down to drivers and kernel

Optimizations for power & memory management?

  • Have tuned for phone, and then every device is faster, due to shared codebase
  • E.g. Shared libs between different apps—they’ll just exist in one place on the phone

Q: Why no VB support for Universal Apps?

  • We do support VB.NET

Q: C++ and managed C++/CLI support for Universal Apps?

  • Same interface for C++ on Windows and Phone

Q: Will Universal App work on Win 7?

  • No. Just Win 8.1, Windows Phone 8.1
  • Stuff replaced is down at the OS level

Q: Can you use JavaScript code for Universal Apps?

  • Yes

Q: Support for 3rd party devs to write kernel drivers?

  • No comment

Q: Use C?

  • Yes

Q: New Live Tile APIs?

  • Can do updating from background a bit better
  • Better experience on tile

Background computing on power-constrained platform is challenging

  • Triggers—in background, CPU can run just a little bit of code when code wakes up
  • Makes app much more interactive
  • Conserves power, but gives user good experience

How granular can toast be? Can we drill down into app after clicking on toast

  • I think so

Action Center

  • Developer can access to see events that have happened in the past

Q: Traditional desktop apps being phased out?

  • Absolutely not
  • Not “phasing out” anybody’s code
  • Leverage investment that you’ve made in these apps
  • Maybe a bit tough to transition to use new technologies
  • Coming—more info on how we’ll stitch these two worlds together
  • Maybe a bit too hard to leverage new stuff in existing apps
  • WinRT Broker is first installment in this set of things to bridge worlds