Designing XAML apps using Blend for Visual Studio 2013

  • View

  • Download

Embed Size (px)


In deze sessie laat ik aan de hand van vele demos zien hoe je Windows Phone en Windows 8.1 apps ontwikkeld met behulp van Blend for Visual Studio 2013.

Text of Designing XAML apps using Blend for Visual Studio 2013

  • 1. Designing XAML Apps using Blend for Visual Studio 2013 Fons Sonnemans @fonssonnemans

2. Topics Blend Layout Controls Basic Controls AppBar & CommandBar Animation Behaviors Styling & Templating Data Binding 3. Fons Sonnemans Software Development Consultant Programming Languages Clipper, Smalltalk, Visual Basic, C# Platforms Windows Forms, ASP.NET (Web Forms, MVC), XAML (Silverlight, Windows Phone, Windows 8) Databases MS SQL Server, Oracle Role Trainer, Coach, Advisor, Architect, Designer, App Developer More info: 4. My Apps Windows 8 Windows Phone 5. Device Window 6. Visual Studio versus Blend Visual Studio Code Editing XAML Editing IntelliSense Formatting (Ctrl+E, D) Code Snippets (new in VS2013) Debugging Project Properties TFS Explorer Data Binding IntelliSense including Path (new in VS2013) Set Build Actions Blend UI Design Guides Animations Styling & Templating Visual States Data Binding TFS Check in/out 7. In-Box Controls Button Checkbox Radio Button Hyperlink Combo Box Context Menu Flyout List BoxFlip View App Bar Panning Indicator Grid View List View Semantic Zoom Text Box Progress Ring Progress Bar Clear ButtonSpell Checking Password Reveal Button Rating Radio Button Scroll Bar Toggle Switch Tooltip 8. 9. Layout Controls Canvas Simplest, placement relative to two edges Not scalable Supports the following attached properties Canvas.Top, Canvas.Left, Canvas.Zindex StackPanel Horizontal or vertical stacking Grid Uses rows and columns Flexible Positioning (similar to tables in HTML) Supports the following attached properties Grid.Column, Grid.Row, Grid.Columnspan, Grid.Rowspan More Border, ScrollViewer, Viewbox, VariableSizedWrapGrid 10. Canvas Is a Drawing Surface Children have fixed positions relative to top-left-corner The Canvas The Rectangle 11. XAML - Attached Properties Top & Left properties only make sense inside a Canvas 12. XAML - Attached Properties = Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25); = Rectangle rectangle = new Rectangle(); Canvas.SetTop(rectangle, 25); Canvas.SetLeft(rectangle, 25); 13. XAML - Syntax XAML is Case-Sensitive Attribute Syntax Property Element Syntax () This is a button 14. StackPanel The StackPanel will place its children in either a column (default) or row. This is controlled by the Orientation property. 15. Nested Stackpanels 16. Grid The Grid is a powerful layout container. It acts as a placeholder for visual elements You specify the rows and columns, and those define the cells. The placement of an element in the Grid is specified using attached properties that are set on the children of the Grid: Supports different types of row and column sizes in one Grid: Pixel size: Fixed value in pixels Auto size: The cell has the size of its contents Star size: whatever space is left over from fixed- and auto-sized columns is allocated to all of the columns with star-sizing 17. Layout Properties 18. 19. TextBox Normal Multi Line Border & Colors 20. TextBox No Clear Button (Blend default) InputScope 21. Image Supports BMP, JPG, TIF and PNG Source property External, starts with http:// App Referenced Class Library Local storage 22. AppBarButton, AppBarToggleButton, AppBarSeparator 23. AppBar CommandBar Properties Foreground Background IsSticky IsOpen Children Events Opened Closed Properties Foreground Background IsSticky IsOpen PrimaryCommands SecondaryCommands Events Opened Closed 24. AppBarButtons Windows 8.1 introduces new controls for XAML that let you more easily create app bar command buttons that reflect the proper design guidelines and behaviors: the AppBarButton, AppBarToggleButton, and AppBarSeparator controls. App bar buttons differ from standard buttons in several ways: Their default appearance is a circle instead of a rectangle. You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored. The button's IsCompact property controls its size. 25. AppBarButtons FontIcon The icon is based on a glyph from the specified font family. BitmapIcon The icon is based on a bitmap image file with the specified Uri. PathIcon The icon is based on Path data. SymbolIcon The icon is based on a predefined list of glyphs from the Segoe UI Symbol font. 26. AppBarButtons Links Images & Paths (Vectors) Symbols 27. 28. Resources Reusable objects such as data, styles and templates. Assigned a unique key (x:Key) so you can reference to it. Every element has a Resources property. Nesting Support All static resources are loaded on page load Resource is loaded even if not used 31 29. Convert to New Resource 30. Resources in Blend Menu Window - Resources Shows all resources of all open XAML documents Link to Resource Dictionary Edit Resource Rename Resource Move Resource Delete Resource Apply Resource by Drag & Drop 33 31. Merged Resources Store resources in external files Declare once, use many times Makes XAML shorter and easier to read Can be stored in external assemblies 34 32. 33. Key Frame Concept XAML supports key frames A key frame defines an objects target value on a moment in an animation. A key frame has an interpolation method. A Key Frame target can be a: Double (X, Y, Height, Width, Opacity, Angle, etc.) Color (Fill, Stroke, etc.) Object (Visibility, Text, etc) 34. Storyboards Creating a storyboard in Expression Blend 37 35. Storyboards The Storyboard object has interactive methods to Begin, Pause, Resume, and Stop an animation. public void ButtonStart_Click(object sender, MouseEventArgs e) { if (myStoryboard.GetCurrentState() == ClockState.Stopped) { myStoryboard.Begin(); } } public void ButtonPause_Click(object sender, MouseEventArgs e) { myStoryboard.Pause(); } public void ButtonResume_Click(object sender, MouseEventArgs e) { myStoryboard.Resume(); } public void ButtonStop_Click(object sender, MouseEventArgs e) { myStoryboard.Stop(); } 36. 37. Behaviors 38. ShowMessageBox Action public class ShowMessageAction : DependencyObject, IAction { #region Text Dependency Property public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShowMessageAction), new PropertyMetadata(string.Empty)); #endregion Text Dependency Property public object Execute(object sender, object parameter) { #pragma warning disable 4014 new MessageDialog(this.Text).ShowAsync(); #pragma warning restore return null; } } Links: 39. 40. Styling and Templating XAML = UI flexibility Customize the look of an application without changing its behavior Styling = Small Visual Changes on an Element (Font, Background Color, etc.) Templating = Replacing Elements entire Visual Tree 41. Styling 42. Implicit Styling If you omit the Styles Key and specify only the TargetType, then the Style is automatically applied to all elements of that target type within the same scope (it is implicitly applied). This is typically called a typed style as opposed to a named style. 43. BasedOn Styling 44. Templating 45. Data Binding 46. Data Binding Data binding is the process that establishes a connection, or binding, between the UI and the business object which allows data to flow between the two Enable clean view/model separation and binding Change UI presentation without code-behind modifications Every binding has a source and a target Source is the business object or another UI element Target is the UI element Binding Expressions can be one way or two way and supports validation & converters 47. Element to Element Binding Element binding is performed in the same manner as Data Binding with one addition: the ElementName property. ElementName defines the name of the binding source element. 48. Data Window Sample Data 49. Recap & Questions 50. @fonssonnemans fonssonnemans 51. Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via en maak kans op een van de 20 prijzen*. Prijswinnaars worden bekend gemaakt via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw badge. Let us know how you feel about this session! Give your feedback via and possibly win one of the 20 prizes*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge. 52. Related sessions 16-4 Slot Title Speaker 07:45 Using native code in your Windows and Windows Phone Applications Maarten Struys 07:45 Bluetooth and NFC phone to phone communication Rob Miles 10:50 What is new in XAML and tooling in Windows 8.1 Fons Sonnemans 10:50 Tiles, Notificaties en het Actiecentrum in Windows Phone 8.1 apps Rajen Kishna 10:50 Sites and Apps, hoe maak ik ze accessible Dennis Vroegop & Jeroen Hulscher 13:15 Windows and Windows Phone Build Apps for Both Mike Taulty 13:15 Optimizing Windows Store apps for varying form factors, resolutions and viewstates Tom Verhoeff 14:50 Talking to hardware with Windows Pho