Download presentation
Presentation is loading. Please wait.
1
Overview of UI Development for Windows Store Apps
05830: Advanced User Interface Software April 2nd, 2013 YoungSeok Yoon Institute for Software Research Carnegie Mellon University
2
What will be covered today?
Introduction to Windows Store Apps XAML Language Projection Dynamic Layout
3
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 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: Introduction to Windows Store Apps
12
What will be covered today?
Introduction to Windows Store Apps XAML Language Projection Dynamic Layout
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 Language Projection
14
VS. Cross-Platform App Development
Cross-platform mobile app development approaches Language projection in Windows Store app development Application Code C# Projection C# Application Code VB Projection VB Application Code JavaScript Projection JavaScript Application Code Cross-platform framework Target platform #1 Target platform #2 Native API … Target devices Windows Runtime Language Projection
15
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
16
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
17
A simple example: HelloWorldApp
Spec XAML+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 function function 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 Language Projection
20
What will be covered today?
Introduction to Windows Store Apps XAML Language Projection Dynamic Layout
21
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
22
Tools for Editing XAML Visual Studio 2012 Blend for VS 2012
Mainly for programmers Most of the XAML editing features are provided Can program application logic Mainly for UI designers Visual states can be seen/edited without compiling Can create complex animations XAML
23
XAML Editor in Visual Studio 2012
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 The resulting resource definition
<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 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
30
A style example A style definition for buttons <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: XAML
31
Data Binding Data binding can be used between two properties, as long as the following conditions are met: Data source implements INotifyPropertyChanged interface 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)
NOTE: Any value can be converted to a string using Object#ToString() method Displays slider.Minimum (OneWay) Displays slider.Maximum (OneWay) Displays slider.Value (TwoWay) 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) Visible Collapsed Target Property IsOn (Boolean) True False Source Property XAML
35
More Data Binding Examples (2)
A data converter is needed, which can be reused XAML
36
What will be covered today?
Introduction to Windows Store Apps XAML Language Projection 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 Symbols
Instead of using bitmap images, frequently used UI symbols are defined in 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) Pixels “Auto” – fits to the child elements in the cell 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: Dynamic Layout
42
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
43
Grid App Template – 3 Levels
Dynamic Layout
44
Split App Template – 2 Levels
Dynamic Layout
45
CONCLUSION
46
Other interesting aspects of Windows 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! References
MSDN: Developing Windows Store apps ( MSDN: White papers for Windows Store apps ( Jeremy Likness, “Building Windows 8 Apps with C# and XAML,” Addison-Wesley Professional
Similar presentations
