Beautiful UWP apps with Windows.UI

Beautiful UWP apps with Windows.UI

windowsui1_1

Short introduction

Creating Universal Windows 10 Apps is real pleasure especially when you decide to have your user interface crafted to perfection. Why? Because of new Visual Layer with Windows.UI.Composition namespace. It allows developers to to get great visual performance and custom UI experiences with XAML and C#.

You can see below how Windows.UI framework is built:

windowsui2

Let’s see how it works with some code samples!

 

What do I need to start?

1) Visual Studio 2015 Community (for free) or higher

 

Let’s start

There are a lot of samples available but I decided to show you only some more interesting of them on my GitHub . That is why I decided to create sample UWP application.

windowsui3

windowsui4

windowsui5_5

Before you start playing with demo app there are few things worth mentioning.

 

The Visual family

To enable fast and very fluid effects you have to understand what is happening in the background:

  • System compositor (also called DWM) – agnostic to the UI thread element which doesn’t really care about being on the UI thread or blocking threads. Things happen very quickly at the system compositor level, where everything that is about to be sent to the display screen gets put together like for instance your effects before they are displayed.

Now Visual Family consists of Visuals, ContainerVisuals and SpriteVisuals created basing on three classes:

  • SpriteVisual (inherits from ContainerVisual)
  • ContainerVisual (inherits from Visual)
  • Visual (top class)

There is also Compositor class at the top that is responsible for creating visual objects and manages relationship between your UWP app and compositor process.

How does it work from the developer point of view?

Imagine that you have XAML code and Grid control declared and SpriteVisual object assigned to it. Once you grab hold of this backing SpriteVisual object you can start to animate it using the composition animation system.

 

Effects system

There is a lot of new effects like linear transform, distant specular, distant diffuse, spot specular, spot diffuse, point specular, point diffuse, and Gaussian blur. Shorthand effects: opacity, crossfade, alphamask and tint. There are also included Windows Presentation Foundation effects like 2D affine transforms, arithmetic composites, blends, color source, composite, contrast, exposure and more.

 

Animations system

There is huge animations system update in Windows.UI. Besides performance update (running animations 60 frames per second without involving UI thread) there are new things like:

  • Creating animations that automatically run on visual property changes using implicit animations
  • Creating connected animations that can animate content across pages in an application
  • Creating layout animations that run automatically in response to XAML layout updates
  • Creating custom UI-thread independent manipulation experiences using the InteractionTracker (about which you can read more here)

 

XAML interop

XAML interop enables developers to apply animations and effects to XAML elements. It what lets you grab a backing visual and manipulate it. There is great example connected with movie making how to think about XAML interop. It is like using green screen. Everything what you do in XAML can be compared to actors and stunts. Windows.UI.Composition is something what is happening after creating the movie and applying selected background for this green screen (like animations and effects).

 

Sum up

If you decide to create beautiful UWP apps you should definitely be interested in the Windows.UI. It enables great effects and animations. You can find a lot of samples here.

Advertisements