overview of ui development for windows store apps

Magenta Purple Teal

Pink Orange Blue

Lime Brown

Red Green

Overview of UI Developmentfor Windows Store Apps

YoungSeok YoonInstitute for Software Research

Carnegie Mellon University([email protected])

05830: Advanced User Interface SoftwareApril 2nd, 2013

mailto:[email protected]

What will be covered today?

XAML

Introduction to Windows Store Apps

Language Projection

Dynamic Layout

Introduction to Windows Store Apps 3

What is a Windows Store app?

A new type of application that runs onWindows 8 devices (e.g., Microsoft Surface)

Tile-based look-and-feel (Windows 8 style UI)

Used to be called ‘Metro-Style App’

Relatively new: Windows 8 was officially released in Oct. 2012.


Example Windows Store Apps


Windows Runtime (WinRT)

A layer on which all the Windows Store apps run(similar to Java Virtual Machine, .NET Framework)

Unlike iOS/Android apps, Windows Store apps can run on Windows 8 desktop without any simulator

Not to be confused with “Windows RT”, which is an operating system designed for tablet devices


Windows 8 Architecture

Image Source: http://www.engadget.com/2011/09/13/windows-8-store-to-sell-both-metro-style-apps-and-conventional-w/


XAML


Language Projection

Dynamic Layout

Language Projection 13

“Building apps using what you know”

Several languages can be used

WinRT APIs can be directly used by all languages

These APIs are projected to each language

XAML

+

C# / VB / C++

HTML + CSS

+

JavaScript

DirectX

+

C++

UI

Logic

14

C# Projection

C#Applicatio

n Code

VB Projection

VBApplicatio

n Code

JavaScript Projection

JavaScriptApplicatio

n Code

Cross-platform

framework

Target platform

#1

Target platform

#2

Native API Native API Native API

…

Cross-platform mobile app development approaches

Application Code

Language projection in Windows Store app development

Target devices

Windows Runtime

VS. Cross-Platform App Development

Language Projection


A simple example: HelloWorldApp

A button control is in the center of the screen.

When clicked, it shows a standard message dialog saying “Hello, world!”

SpecXAML+C#HTML5+JavaScript


A simple example: HelloWorldAppSpecXAML+C#HTML5+JavaScript<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button x:Name="button1" Content="Click Me!" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid>

XAML code for button

// Event handler binding (in some initialization code)this.button1.Click += button1_Click;

// Event handler methodprivate async void button1_Click(object sender, RoutedEventArgs e){ MessageDialog dlg = new MessageDialog("Hello, world!", "AUIS"); await dlg.ShowAsync();}

C# code behind


A simple example: HelloWorldAppSpecXAML+C#HTML5+JavaScript<body> <div id="mainContent"> <button id="button1"> Click Me!</button> </div></body>

HTML code for button// Event handler binding (in some initialization code)var button1 = document.getElementById("button1");button1.addEventListener("click", button1Click, false);

// Event handler functionfunction button1Click(mouseEvent) { var dlg = new Windows.UI.Popups.MessageDialog("Hello, world!", "AUIS"); dlg.showAsync();}

JavaScript code behind

#mainContent {width: 100%; height: 100%; display: -ms-grid;-ms-grid-rows: 1fr; -ms-grid-columns: 1fr; }#button1 {-ms-grid-row-align: center;-ms-grid-column-align: center; }

CSS code for centering the button


Results


XAML


Language Projection

Dynamic Layout

XAML 21

XAML Overview

XAML: eXtensible Application Markup Language

XML-based declarative language for UIEach XML element maps to an object instanceEach attribute maps to a property of objectEvent handlers can be declared

Still the handlers should be implemented in the code-behind

… more features (will be explained shortly)

22

Visual Studio 2012Mainly for programmers

Most of the XAML editing features are provided

Can program application logic

Blend for VS 2012Mainly for UI designers

Visual states can be seen/edited without compiling

Can create complex animations

Tools for Editing XAML

XAML

XAML 23

XAML Editor in Visual Studio 2012

XAML 24

Blend for Visual Studio 2012

XAML 25

Shapes in XAML

Unlike many other declarative UI languages,non-widget shapes are supported in XAML

XAML 26

Resource Binding

Any property values can be stored as resources and then be reused

System resources (system-wide predefined values)Local resources (stored in local XAML)

Hard-coded local values can easily be converted to a resource

XAML 27

Converting Local Value to a Resource

The black little box on the right indicates that this value is local

Click

The user provides a name for the new resource, and where to put it

Now the box turned into green which indicates static resource

XAML 28

Resulting XAML

<x:String x:Key="MyButtonText">Click Me!</x:String>

The resulting resource definition

<Button x:Name="button1" Content="{StaticResource MyButtonText}" HorizontalAlignment="Center" VerticalAlignment="Center" />

The button using the resource

XAML 29

Styles

Many UI elements of a same style can be usede.g., The following buttons use “AppBarButtonStyle”

A style defines visual property settings of UI elements

A style can be inherited to create a new style

XAML 30

A style example<Page.Resources> <Style TargetType="Button"> <Setter Property="BorderThickness" Value="5" /> <Setter Property="Foreground" Value="Blue" /> <Setter Property="BorderBrush" > <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style></Page.Resources>

A style definition for buttons

Source: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465381.aspx

XAML 31

Data Binding

Data binding can be used between two properties, as long as the following conditions are met:

1) Data source implements INotifyPropertyChanged interface

2) The two properties have the same data type,or there is a data converter

XAML UI elements all implement INotifyPropertyChanged interface

OneTime / OneWay / TwoWay

XAML 32

Data Binding Dialog

Button is enabled only if the toggle switch is on

XAML 33

More Data Binding Examples (1)

Displays slider.Value(TwoWay)

Displays slider.Minimum(OneWay)

Displays slider.Maximum(OneWay)

NOTE: Any value can be converted to a string using Object#ToString() method

XAML 34


Show / hide a group of elements with a switch?Expected behavior:

Not trivial, because of the data type mismatch

Visibility (Enum)VisibleCollapsed

Target Property

IsOn (Boolean)TrueFalse

Source Property

XAML 35


A data converter is needed, which can be reused


XAML


Language Projection

Dynamic Layout

Dynamic Layout 37

Scaling UI Elements

There is a special UI element called Viewbox, whose sole purpose is to resize content Stretch=“None”

Stretch=“Fill”

Stretch=“Uniform”

Stretch=“UniformToFill”

No stretch at all

Stretch to fill the entire space

Stretch while keeping the aspect ratio

Aspect ratio is preserved but the source content is clipped as necessary

Dynamic Layout 38

Truetype Font for UI SymbolsInstead of using bitmap images,frequently used UI symbols are definedin a true-type font called “Segoe UI Symbol”

Dynamic Layout 39

Grid Control and Auto/Star Sizing

Grid control provides a flexible way to distribute available screen space

Three ways of specifying a cell size(height of a row / width of a column)

1) Pixels2) “Auto” – fits to the child elements in the cell3) Star notation – represents a fraction of the

remaining available space

Dynamic Layout 40

An Example Grid

Some Tool Controls

* *

Auto

*

2*

Dynamic Layout 41

Semantic Zoom Control

SemanticZoom control provides two-level zoomable view composed of any two IZoomableView controls

Two ListView controls are the most commonly used

Image Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx

Dynamic Layout 42

Project Templates

Visual Studio provides 3 project templatesBlank App, Grid App, Split App

Grid / Split App comes with useful featuresDataConverters

BooleanNegationConverter, BooleanToVisibilityConverterLayoutAwarePage

Pre-defined visual states (snapped, portrait, landscape, …)SuspensionManager

Storing/restoring UI states upon switching between apps

ProblemsOften too heavy for simple appsPremature commitment – very difficult to change later

Dynamic Layout 43

Grid App Template – 3 Levels

Dynamic Layout 44

Split App Template – 2 Levels

45

CONCLUSION

46

Other interesting aspects ofWindows Store app development

Asynchronous programming

Windows charms / App bar

Live tiles

…

47

Conclusion

Windows App Store is a newly emerging socio-technical ecosystem

Most of these techniques are not dramatically new, but well put together to create a developer-friendly environment

Probably too soon to judge whether this platform is successful or not

Students can register for a Windows Store developer account for free, via Dreamspark program

48

Q & A

Thank you!

ReferencesMSDN: Developing Windows Store apps(http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229566.aspx)MSDN: White papers for Windows Store apps(http://msdn.microsoft.com/en-US/library/windows/apps/hh465413)Jeremy Likness, “Building Windows 8 Apps with C# and XAML,” Addison-Wesley Professional

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229566.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229566.aspx

http://msdn.microsoft.com/en-US/library/windows/apps/hh465413

http://msdn.microsoft.com/en-US/library/windows/apps/hh465413

overview of ui development for windows store apps

Documents