overview of ui development for windows store apps
Post on 23-Feb-2016
60 Views
Preview:
DESCRIPTION
TRANSCRIPT
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(youngseok@cs.cmu.edu)
05830: Advanced User Interface SoftwareApril 2nd, 2013
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.
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
Example Windows Store Apps
Introduction to Windows Store Apps 10
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 11
Windows 8 Architecture
Image Source: http://www.engadget.com/2011/09/13/windows-8-store-to-sell-both-metro-style-apps-and-conventional-w/
What will be covered today?
XAML
Introduction to Windows Store Apps
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
Language Projection 15
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
Language Projection 16
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
Language Projection 17
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
Language Projection 18
Results
Language Projection 19
Results
What will be covered today?
XAML
Introduction to Windows Store Apps
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
More Data Binding Examples (2)
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
More Data Binding Examples (2)
A data converter is needed, which can be reused
What will be covered today?
XAML
Introduction to Windows Store Apps
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
top related