1 / 48

Overview of UI Development for Windows Store Apps

Overview of UI Development for Windows Store Apps. 05830: Advanced User Interface Software April 2 nd , 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.

kamali
Download Presentation

Overview of UI Development for Windows Store Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Overview of UI Developmentfor Windows Store Apps 05830: Advanced User Interface Software April 2nd, 2013 YoungSeok Yoon Institute for Software Research Carnegie Mellon University (youngseok@cs.cmu.edu)

  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 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/ 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 • C#Application Code • VBApplication Code • JavaScriptApplication Code • Application Code • C# Projection • VB Projection • JavaScript Projection • Cross-platform framework • Native API • Native API • Native API • Windows Runtime • Target platform #1 • Target platform #2 • … • Target devices 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="{StaticResourceApplicationPageBackgroundThemeBrush}"> <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 privateasyncvoid button1_Click(object sender, RoutedEventArgs e) { MessageDialogdlg = newMessageDialog("Hello, world!", "AUIS"); awaitdlg.ShowAsync(); } C# code behind Language Projection

  17. A simple example: HelloWorldApp • SpecXAML+C# 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 <body> <divid="mainContent"> <buttonid="button1"> Click Me!</button> </div> </body> HTML code for button // Event handler binding (in some initialization code) varbutton1 = document.getElementById("button1"); button1.addEventListener("click", button1Click, false); // Event handler function function button1Click(mouseEvent) { vardlg = newWindows.UI.Popups.MessageDialog("Hello, world!", "AUIS"); dlg.showAsync(); } JavaScript code behind 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: eXtensibleApplication 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 UI designers Visual states can be seen/edited without compiling Can create complex animations • Mainly for programmers • Most of the XAML editing features are provided • Can program application logic 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 The user provides a name for the new resource, and where to put it Click 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="{StaticResourceMyButtonText}"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 <Page.Resources> <StyleTargetType="Button"> <SetterProperty="BorderThickness"Value="5"/> <SetterProperty="Foreground"Value="Blue"/> <SetterProperty="BorderBrush"> <Setter.Value> <LinearGradientBrushStartPoint="0.5,0"EndPoint="0.5,1"> <GradientStopColor="Yellow"Offset="0.0"/> <GradientStopColor="Red"Offset="0.25"/> <GradientStopColor="Blue"Offset="0.75"/> <GradientStopColor="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: • 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.Maximum(OneWay) Displays slider.Minimum(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 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) • 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: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx 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 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! • 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

More Related