Powerpoint Edu

Overview of UI Development
for Windows Store Apps
Magenta
Purple
Teal
Lime
Brown
Pink
Orange
Blue
Red
Green
05830: Advanced User Interface

Software
YoungSeok Yoon
Institute for Software Research
April 2nd, 2013
Carnegie Mellon University

(youngseok@cs.cmu.edu)
What will be covered today?
Introduction
to Windows
Store Apps
XAML
Language
Projection
Dynamic
Layout
What is a Windows Store app?

A new type of application that runs on
Windows 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.
Introduction to Windows Store
Apps
Example Windows Store Apps

Apps

Apps

Apps

Apps

Apps

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

Apps
10
Windows 8 Architecture
Image Source: http://www.engadget.com/2011/09/13/windows-8-store-to-sell-both-metro-style-appsand-conventional-w/

Apps
11
Introduction
to Windows
Store Apps
XAML
Language
Projection
Dynamic
Layout
Building apps using what you know

Several languages can be used
XAML
HTML +
CSS
+
+
C# / VB /
C++
JavaScript
UI
DirectX
+
Logi
c
C++
WinRT APIs can be directly used by all languages

These APIs are projected to each language
Language Projection
13
VS. Cross-Platform App Development

Cross-platform mobile app
development approaches
Language projection in Windows

Store app development
Applicatio
n Code
C#
Applicatio
n Code
VB
Applicatio
n Code
JavaScript
Applicatio
n Code
Crossplatform
framework
C#
Projection
VB
Projection
JavaScript
Projection
Native API
Native API
Native API
Windows
Runtime
Target
platform
#1
Target
platform
#2
Target
devices
Language Projection
14
A simple example: HelloWorldApp

Spec
XAML+C#
HTML5+JavaScript
A button control is in the center of the

screen.
When clicked, it shows a standard
message dialog saying Hello, world!
Language Projection
15

Spec
XAML+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 method
private async void button1_Click(object sender, RoutedEventArgs e)
{
MessageDialog dlg = new MessageDialog("Hello, world!", "AUIS");
await dlg.ShowAsync();
}
C# code behind
Language Projection
16

Spec
XAML+C#
<body>
<div id="mainContent">
<button id="button1">
Click Me!</button>
</div>
</body>
HTML code for

button
HTML5+JavaScript
#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
// Event handler binding (in some initialization code)

var button1 = document.getElementById("button1");
button1.addEventListener("click", button1Click, false);
// Event handler function
function button1Click(mouseEvent) {
var dlg = new Windows.UI.Popups.MessageDialog("Hello, world!", "AUIS");
dlg.showAsync();
}
JavaScript code behind

Language Projection
17
Results
Language Projection
18
Results
Language Projection
19
Introduction
to Windows
Store Apps
XAML
Language
Projection
Dynamic
Layout
XAML Overview
XAML: eXtensible Application Markup Language
XML-based declarative language for UI
Each XML element maps to an object instance
Each attribute maps to a property of object
Event handlers can be declared
Still the handlers should be implemented in the codebehind
more features (will be explained shortly)

XAML
21
Tools for Editing XAML

Visual Studio 2012
Blend for VS 2012
Mainly for
programmers
Mainly for UI designers
Most of the XAML

editing features are
provided
Can program
application logic
XAML
Visual states can be

seen/edited without
compiling
Can create complex
animations
22
XAML Editor in Visual Studio 2012
XAML
23
Blend for Visual Studio 2012
XAML
24
Shapes in XAML
Unlike many other declarative UI languages,
non-widget shapes are supported in XAML
XAML
25
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
26
Converting Local Value to a Resource
Click
The black
little box on
the right
indicates
that this
value is local
XAML
The user provides a

name for the new
resource, and where
to put it
Now the box
turned into
green which
indicates
static
resource
27
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
28
Styles
Many UI elements of a same style can be used
e.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
29
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
30
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
31
Data Binding Dialog
Button is
enabled only
if the toggle
switch is on
XAML
32
More Data Binding Examples (1)

NOTE: Any value can be
converted to a string using
Object#ToString() method
Displays
slider.Maximum
(OneWay)
Displays
slider.Minimum
(OneWay)
Displays
slider.Value
(TwoWay)
XAML
33

Show / hide a group of elements with a switch?
Expected behavior:
Not trivial, because of the data type mismatch
XAML
Visibility (Enum)
Visible
Collapsed
IsOn (Boolean)
True
False
Target Property
Source Property
34

A data converter is needed, which can be
reused
XAML
35
Introduction
to Windows
Store Apps
XAML
Language
Projection
Dynamic
Layout
Scaling UI Elements
There is a special UI element called
Viewbox, whose sole purpose is to resize
content
Stretch=None
No stretch at all
Dynamic Layout
Stretch=Fill
Stretch to fill the

entire space
Stretch=Uniform
Stretch while keeping

the aspect ratio
Stretch=UniformToFil Aspect ratio is

l
preserved but the
source content is
clipped as37necessary
Truetype Font for UI Symbols

Instead of using bitmap images,
frequently used UI symbols are defined
in a true-type font called Segoe UI Symbol
Dynamic Layout
38
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) Pixels
2) Auto fits to the child elements in the cell
3) Star notation represents a fraction of the
remaining available space
Dynamic Layout
39
An Example Grid
Some Tool Controls
Auto
2*
Dynamic Layout
40
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
41
Project Templates
Visual Studio provides 3 project templates
Blank App, Grid App, Split App
Grid / Split App comes with useful features

DataConverters
BooleanNegationConverter, BooleanToVisibilityConverter
LayoutAwarePage
Pre-defined visual states (snapped, portrait, landscape, )
SuspensionManager
Storing/restoring UI states upon switching between apps
Problems
Often too heavy for simple apps
Premature commitment very difficult to change later
Dynamic Layout
42
Grid App Template 3 Levels
Dynamic Layout
43
Split App Template 2 Levels
Dynamic Layout
44
CONCLUSION
45
Other interesting aspects of

Windows Store app development
Asynchronous programming
Windows charms / App bar
Live tiles
46
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
47
Q&A
Thank you!
References
MSDN: 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, AddisonWesley Professional
48

Powerpoint Edu

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Powerpoint Edu

Загружено:

Авторское право:

Доступные форматы

Overview of UI Development

for Windows Store Apps

05830: Advanced User Interface

Carnegie Mellon University

What will be covered today?

What is a Windows Store app?

Example Windows Store Apps

Introduction to Windows Store

Example Windows Store Apps

Introduction to Windows Store

Example Windows Store Apps

Introduction to Windows Store

Example Windows Store Apps

Introduction to Windows Store

Example Windows Store Apps

Introduction to Windows Store

Example Windows Store Apps

Introduction to Windows Store

Windows Runtime (WinRT)

Introduction to Windows Store

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

What will be covered today?

Building apps using what you know

WinRT APIs can be directly used by all languages

VS. Cross-Platform App Development

Language projection in Windows

A simple example: HelloWorldApp

A button control is in the center of the

A simple example: HelloWorldApp

XAML code for button

A simple example: HelloWorldApp

HTML code for

CSS code for centering the button

// Event handler binding (in some initialization code)

JavaScript code behind

What will be covered today?

more features (will be explained shortly)

Tools for Editing XAML

Blend for VS 2012

Mainly for UI designers

Most of the XAML

Visual states can be

XAML Editor in Visual Studio 2012

Blend for Visual Studio 2012

Hard-coded local values can easily be

Converting Local Value to a Resource

The user provides a

The resulting resource definition

<Button x:Name="button1" Content="{StaticResource MyButtonText}"

The button using the resource

A style defines visual property settings of UI

A style definition for buttons

XAML UI elements all implement

Data Binding Dialog

More Data Binding Examples (1)

More Data Binding Examples (2)

Not trivial, because of the data type mismatch

More Data Binding Examples (2)

What will be covered today?

Stretch to fill the

Stretch while keeping

Stretch=UniformToFil Aspect ratio is

Truetype Font for UI Symbols