Slides for YoungSeok's talk
advertisement
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
April 2nd, 2013
Institute for Software Research
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
3
Example Windows Store Apps
Introduction to Windows Store Apps
4
Example Windows Store Apps
Introduction to Windows Store Apps
5
Example Windows Store Apps
Introduction to Windows Store Apps
6
Example Windows Store Apps
Introduction to Windows Store Apps
7
Example Windows Store Apps
Introduction to Windows Store Apps
8
Example Windows Store Apps
Introduction to Windows Store Apps
9
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
Introduction to Windows Store Apps
10
Windows 8 Architecture
Image Source: http://www.engadget.com/2011/09/13/windows-8-store-to-sell-both-metro-style-apps-and-conventional-w/
Introduction to Windows Store Apps
11
What will be covered today?
Introduction to
Windows Store
Apps
XAML
Language
Projection
Dynamic
Layout
“Building apps using what you know”
Several languages can be used
XAML
HTML + CSS
DirectX
+
+
+
C# / VB / C++
JavaScript
C++
UI
Logic
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
Application
Code
C#
Application
Code
VB
Application
Code
JavaScript
Application
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
A simple example: HelloWorldApp
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
A simple example: HelloWorldApp
Spec
XAML+C#
HTML5+JavaScript
<body>
<div id="mainContent">
<button id="button1">
Click Me!</button>
</div>
</body>
#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; }
HTML code for button
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
What will be covered today?
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 code-behind
… 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
Visual states can be
seen/edited without
compiling
Can program
application logic
Can create complex
animations
XAML
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
More Data Binding Examples (2)
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
More Data Binding Examples (2)
A data converter is needed, which can be reused
XAML
35
What will be covered today?
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
Dynamic Layout
Stretch=“None”
No stretch at all
Stretch=“Fill”
Stretch to fill the entire
space
Stretch=“Uniform”
Stretch while keeping the
aspect ratio
Stretch=“UniformToFill”
Aspect ratio is preserved
but the source content is
clipped as necessary
37
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 sociotechnical 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,” Addison-Wesley
Professional
48
