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 (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 Introduction to Windows Store Apps
Example Windows Store Apps Introduction to Windows Store Apps
Example Windows Store Apps Introduction to Windows Store Apps
Example Windows Store Apps Introduction to Windows Store Apps
Example Windows Store Apps Introduction to Windows Store Apps
Example Windows Store Apps Introduction to 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 Introduction to Windows Store Apps
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
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 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
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
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
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
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
Results Language Projection
Results Language Projection
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
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
XAML Editor in Visual Studio 2012
Blend for Visual Studio 2012 XAML
Shapes in XAML Unlike many other declarative UI languages, non-widget shapes are supported in XAML XAML
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
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
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
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
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: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465381.aspx XAML
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
Data Binding Dialog Button is enabled only if the toggle switch is on XAML
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
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
More Data Binding Examples (2) A data converter is needed, which can be reused XAML
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 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
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
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
An Example Grid Some Tool Controls Auto * 2* * * Dynamic Layout
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
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
Grid App Template – 3 Levels Dynamic Layout
Split App Template – 2 Levels Dynamic Layout
CONCLUSION
Other interesting aspects of Windows Store app development Asynchronous programming Windows charms / App bar Live tiles …
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
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