Iris Classon
Iris Classon - In Love with Code

Common XAML UI Framework: Notes BUILD 2014

Notes from the session by Tim Heuer on the Common XAML UI framework, I’ve focused on what is new for us developers.

We now have a common UI language which allows us to share views, but we can still have separate implementations for certain parts of the view to cater for device differences and usage.


The new Universal App\s let us share code and any assets such as scaling folders, resource files, XML files, Views and more. The updates for Visual Studio that includes the new Universal Apps is available in express edition as well.

This is how you do it:

To create a new project select the Universal Apps node and select one of the available items

If you have an existing app, WP8 or Win8, right click and select Add Windows Phone 8.1 (if the other project was Windows Store App), and then confirm. This updates the project.

This add not only the Windows Phone 8.1 project but also a Shared project, where everything shared between the projects will be added.

When you run the application to switch between the phone emulator or windows simulator (etc), just use the dropdown menu next to run.

What is shared in XAML?


These are considered primitive controls and are the same:

Layout controls such as StackPanel, Grid, Border and Panel

Buttons, ProgressBars, Slider, CheckBox etc

Text controls

Shapes and Path

Tailored primitives

These have the same API but have different look and behavior

Hub, AppBar/Command

Noticeable change with AppBar. In WP8.1 you cannot use AppBar, you use the CommandBar


Flyouts on phone can go 100% fullscreen – which they do not on the desktop experience

Mediaplayer for WP is different

With Ads you need to reference the SDK in both projects

Can’t be used in shared markup language, but you can use #if #defs or abstractions to access the library in code-behind.

Hubcontrol on the phone gives a wrap around effect with paralaxing effect in the header, you can have the same effect on the background

Catering for different UIs

By creating the same UC in both projects (win8.1 and wp8.1) and referencing the control in the shared view the correct UC will be used and added to the package. This way we can create a composite UI where we cater for differences in the UI while being able to share most of the UI.


Amount of chrome differs from the two platforms (System Chrome), and Windows Phone has more chrome. You have the top row that displays battery, connectivity etc- the system tray. In 8.1 you can choose if you want to take up all of the window with DesiredBoundsMode(AppliacationViewBoundsMode.UseCoreWindow)

The command bar is also a part of System Chrome in WP, but not in Windows Store Apps

Framework areas

Navigation is the same

Animations- Theme animations and theme transitions

Text- New features made available to WP developers such as

  • Typography.Caps
  • OptimalMarginAlignment
  • TextureBounds
  • TextWrapping
  • TextClipping
  • MaxLines
  • Header

Accessibility features IsTextScaleFactorEnabled exists for WP not Win8

65 different tile templatesor so

XamlRenderingBacgroundTasklets you create custom tiles

Accent color returns just one color on Windows / on the phone device the one you’ve selected. Text styles for phones are available for phone as before.

Focus visuals do not exists on mobile

Theme overrides and high contrast are now the same


Leave a comment (via email)

Last modified on 2014-04-04