Designing XAML Apps
using Blend for Visual
Studio 2013
Fons Sonnemans
@fonssonnemans
Topics
 Blend
 Layout Controls
 Basic Controls
 AppBar & CommandBar
 Animation
 Behaviors
 Styling & Templating
 D...
Fons Sonnemans
•Software Development Consultant
• Programming Languages
• Clipper, Smalltalk, Visual Basic, C#
• Platforms...
My Apps
Windows 8
Windows Phone
http://reflectionit.nl/apps
Device Window
Visual Studio versus Blend
Visual Studio
• Code Editing
• XAML Editing
• IntelliSense
• Formatting (Ctrl+E, D)
• Code Snip...
In-Box Controls
Button
Checkbox Radio Button
Hyperlink Combo Box
Context Menu Flyout
List BoxFlip View
App Bar
Panning Ind...
<Layout Controls />
Layout Controls
 Canvas
 Simplest, placement relative to two edges
 Not scalable
 Supports the following attached prop...
Canvas
 Is a Drawing Surface
 Children have fixed positions relative to top-left-corner
<Canvas Width="250" Height="200"...
XAML - Attached Properties
 Top & Left properties only make sense inside a
Canvas
<Canvas Width="250" Height="200" Backgr...
XAML - Attached Properties
=
<Rectangle Canvas.Top="25" Canvas.Left="25"/>
Rectangle rectangle = new Rectangle();
rectangl...
XAML - Syntax
 XAML is Case-Sensitive
 Attribute Syntax
 Property Element Syntax (<TypeName.Property>)
<Button Backgrou...
StackPanel
 The StackPanel will place its children in either a
column (default) or row. This is controlled by the
Orienta...
Nested Stackpanels
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel Orientation="Horizonta...
Grid
 The Grid is a powerful layout container.
 It acts as a placeholder for visual elements
 You specify the rows and ...
Layout Properties
<Basic Controls />
TextBox
 Normal
 Multi Line
 Border & Colors
<TextBox Text="Hello World" TabIndex="4" />
<TextBox Text="Hello World" He...
TextBox
 No Clear Button (“Blend default”)
 InputScope
<TextBox Text="Hello World"
TextWrapping="Wrap" />
<TextBox Input...
Image
 Supports BMP, JPG, TIF and PNG
 Source property
 External, starts with ‘http://’
 App
 Referenced Class Librar...
<AppBar vs
CommandBar />
AppBarButton, AppBarToggleButton,
AppBarSeparator
AppBar CommandBar
 Properties
 Foreground
 Background
 IsSticky
 IsOpen
 Children
 Events
 Opened
 Closed
 Prope...
AppBarButtons
• Windows 8.1 introduces new controls for XAML that let you
more easily create app bar command buttons that ...
AppBarButtons
• FontIcon
• The icon is based on a
glyph from the specified
font family.
• BitmapIcon
• The icon is based o...
AppBarButtons Links
• Images & Paths (Vectors)
• http://modernuiicons.com
• http://thenounproject.com
• http://www.thexaml...
<Resources />
Resources
 Reusable objects such as data, styles and templates.
 Assigned a unique key (x:Key) so you can reference
to i...
Convert to New Resource…
Resources in Blend
 Menu Window - Resources
 Shows all resources of all open XAML documents
 Link to Resource Dictionar...
Merged Resources
 Store resources in external files
 Declare once, use many times
 Makes XAML shorter and easier to rea...
<Animations &
Storyboards />
Key Frame Concept
 XAML supports key frames
 A key frame defines an objects target value on a
moment in an animation.
 ...
Storyboards
 Creating a storyboard in Expression Blend
37
Storyboards
 The Storyboard object has interactive methods to
Begin, Pause, Resume, and Stop an animation.
public void Bu...
<Behaviors />
Behaviors
ShowMessageBox Action
public class ShowMessageAction : DependencyObject, IAction {
#region Text Dependency Property
public...
<Styling and
Templating />
Styling and Templating
 XAML = UI flexibility
 Customize the look of an application without
changing it’s behavior
 Sty...
Styling
<Page.Resources>
<Style x:Key="HollandButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FFFF...
Implicit Styling
 If you omit the Style’s Key and specify only the
TargetType, then the Style is automatically applied
to...
BasedOn Styling
<Page.Resources>
<Style x:Key="HollandButtonStyle" TargetType="Button">
<Setter Property="Background" Valu...
Templating
Data Binding
Data Binding
 Data binding is the process that establishes a connection, or
binding, between the UI and the business obje...
Element to Element Binding
 Element binding is performed in the same manner as
Data Binding with one addition: the Elemen...
Data Window – Sample Data
Recap & Questions
@fonssonnemans
fons.sonnemans@reflectionit.nl
fonssonnemans
reflectionit.nl/blog
Laat ons weten wat u vindt van deze sessie! Vul de
evaluatie in via www.techdaysapp.nl en maak kans op een
van de 20 prijz...
Related sessions 16-4
Slot Title Speaker
07:45 Using native code in your Windows and Windows Phone Applications Maarten St...
Related sessions 17-4
Slot Title Speaker
07:45 Modern Apps for the Enterprise Dennis Mulder
09:15 Diagnosing performance i...
Designing XAML apps using Blend for Visual Studio 2013
Designing XAML apps using Blend for Visual Studio 2013
Designing XAML apps using Blend for Visual Studio 2013
Upcoming SlideShare
Loading in …5
×

Designing XAML apps using Blend for Visual Studio 2013

8,667 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,667
On SlideShare
0
From Embeds
0
Number of Embeds
2,077
Actions
Shares
0
Downloads
113
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing XAML apps using Blend for Visual Studio 2013

  1. 1. Designing XAML Apps using Blend for Visual Studio 2013 Fons Sonnemans @fonssonnemans
  2. 2. Topics  Blend  Layout Controls  Basic Controls  AppBar & CommandBar  Animation  Behaviors  Styling & Templating  Data Binding
  3. 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: www.reflectionit.nl
  4. 4. My Apps Windows 8 Windows Phone http://reflectionit.nl/apps
  5. 5. Device Window
  6. 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. 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. 8. <Layout Controls />
  9. 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. 10. Canvas  Is a Drawing Surface  Children have fixed positions relative to top-left-corner <Canvas Width="250" Height="200" Background="Gray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> </Canvas> The Canvas The Rectangle
  11. 11. XAML - Attached Properties  Top & Left properties only make sense inside a Canvas <Canvas Width="250" Height="200" Background="Gray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> </Canvas>
  12. 12. XAML - Attached Properties = <Rectangle Canvas.Top="25" Canvas.Left="25"/> 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. 13. XAML - Syntax  XAML is Case-Sensitive  Attribute Syntax  Property Element Syntax (<TypeName.Property>) <Button Background="Blue" Foreground="Red" Content="This is a button"/> <Button> <Button.Background> <SolidColorBrush Color="Blue"/> </Button.Background> <Button.Foreground> <SolidColorBrush Color="Red"/> </Button.Foreground> <Button.Content> This is a button </Button.Content> </Button> http://msdn.microsoft.com/en-us/library/cc189036(VS.95).aspx
  14. 14. StackPanel  The StackPanel will place its children in either a column (default) or row. This is controlled by the Orientation property. <StackPanel Orientation="Vertical"> <Button Content="Button" /> <Button Content="Button" /> </StackPanel>
  15. 15. Nested Stackpanels <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal" Margin="0,0,0,12"> <TextBlock Text="Username" FontSize="48" Width="240" TextAlignment="Right" Margin="0,0,20,0"/> <TextBox FontSize="48" Width="300"/> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,12"> <TextBlock Text="Password" Margin="0,0,20,0" FontSize="48" Width="240" TextAlignment="Right"/> <PasswordBox Margin="0" FontSize="48" Width="300"/> </StackPanel> <Button Content="Login" HorizontalAlignment="Left" Margin="257,0,0,0" FontSize="48"/> </StackPanel>
  16. 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 it’s contents  Star size: whatever space is left over from fixed- and auto-sized columns is allocated to all of the columns with star-sizing <Image Grid.Column="3" Source="demo.png" Stretch="None"/>
  17. 17. Layout Properties
  18. 18. <Basic Controls />
  19. 19. TextBox  Normal  Multi Line  Border & Colors <TextBox Text="Hello World" TabIndex="4" /> <TextBox Text="Hello World" Height="200" AcceptsReturn="True" /> <TextBox Text="Hello World" BorderThickness="3" BorderBrush="Black" SelectionHighlightColor="Blue" Background="LightGray" />
  20. 20. TextBox  No Clear Button (“Blend default”)  InputScope <TextBox Text="Hello World" TextWrapping="Wrap" /> <TextBox InputScope="Search" />
  21. 21. Image  Supports BMP, JPG, TIF and PNG  Source property  External, starts with ‘http://’  App  Referenced Class Library  Local storage <Image Source="http://www.server.com/Images/Windows8.png" /> <Image Source="/MyImages/Windows8.png" /> <Image Source="ms-appx:///ClassLibrary1/MyImages/Windows8.jpg" /> <Image Source="ms-appdata:///local/MyFolder/Windows8.jpg" />
  22. 22. <AppBar vs CommandBar /> AppBarButton, AppBarToggleButton, AppBarSeparator
  23. 23. AppBar CommandBar  Properties  Foreground  Background  IsSticky  IsOpen  Children  Events  Opened  Closed  Properties  Foreground  Background  IsSticky  IsOpen  PrimaryCommands  SecondaryCommands  Events  Opened  Closed
  24. 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. 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. 26. AppBarButtons Links • Images & Paths (Vectors) • http://modernuiicons.com • http://thenounproject.com • http://www.thexamlproject.com • http://www.syncfusion.com/downloads/metrostudio • Symbols • http://msdn.microsoft.com/en-us/library/windows/apps/jj841126.aspx • http://www.geekchamp.com/icon-explorer/introduction • http://www.fontello.com/ • http://fontastic.me
  27. 27. <Resources />
  28. 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. 29. Convert to New Resource…
  30. 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. 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. 32. <Animations & Storyboards />
  33. 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. 34. Storyboards  Creating a storyboard in Expression Blend 37
  35. 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. 36. <Behaviors />
  37. 37. Behaviors
  38. 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: • http://reflectionit.nl/Blog/2013/windows-8-xaml-tips-creating-blend-behaviors • http://blendbehaviors.net/
  39. 39. <Styling and Templating />
  40. 40. Styling and Templating  XAML = UI flexibility  Customize the look of an application without changing it’s behavior  Styling = Small Visual Changes on an Element (Font, Background Color, etc.)  Templating = Replacing Element’s entire Visual Tree
  41. 41. Styling <Page.Resources> <Style x:Key="HollandButtonStyle" TargetType="Button"> <Setter Property="Background" Value="#FFFF9E00"/> <Setter Property="FontSize" Value="24"/> <Setter Property="FontStyle" Value="Italic"/> </Style> </Page.Resources> <Grid> <Button Content="Button" Style="{StaticResource HollandButtonStyle}"/> </Grid>
  42. 42. Implicit Styling  If you omit the Style’s 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. <Style TargetType="TextBox"> <Setter Property="FontFamily" Value="Arial Black"/> <Setter Property="FontSize" Value="16"/> </Style>
  43. 43. BasedOn Styling <Page.Resources> <Style x:Key="HollandButtonStyle" TargetType="Button"> <Setter Property="Background" Value="#FFFF9E00"/> <Setter Property="FontSize" Value="24"/> <Setter Property="FontStyle" Value="Italic"/> </Style> <Style x:Key="GermanButtonStyle" TargetType="Button" BasedOn="{StaticResource HollandButtonStyle}"> <Setter Property="Background" Value="White"/> <Setter Property="Foreground" Value="Black"/> </Style> </Page.Resources> <Grid > <Button Content="Button" Style="{StaticResource GermanButtonStyle}"/> <Button Content="Button" Style="{StaticResource HollandButtonStyle}"/> </Grid>
  44. 44. Templating
  45. 45. Data Binding
  46. 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. 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. <Grid> <TextBlock Text="{Binding Value, ElementName=mySlider}" FontSize="32"/> <Slider x:Name="mySlider" Maximum="10" Value="6" /> </Grid>
  48. 48. Data Window – Sample Data
  49. 49. Recap & Questions
  50. 50. @fonssonnemans fons.sonnemans@reflectionit.nl fonssonnemans reflectionit.nl/blog
  51. 51. Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via www.techdaysapp.nl 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 www.techdaysapp.nl and possibly win one of the 20 prizes*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge.
  52. 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 Phone Rob Miles 14:50 Crossplatform development using Mapping data and features Joost van Schaik 16:20 Building Windows Store and Windows Phone XAML apps Harikrishna Ajithkumar Menon 16:20 Lap Around Windows Phone 8.1 voor de enterprise developer Matthijs Hoekstra 16:20 Making money with Apps Fons Sonnemans 16:20 Van één app honderd apps maken? Tom Droste 16:20 Lap around Windows Phone 8.1: Introduction to the new developer platform Andy Wigley 17:45 App Analytics voor Windows Phone en Windows Store Mark Monster 17:45 Je hebt een app. Nu alleen nog verkopen! Dennis Vroegop
  53. 53. Related sessions 17-4 Slot Title Speaker 07:45 Modern Apps for the Enterprise Dennis Mulder 09:15 Diagnosing performance issues in Xaml based Windows Phone and Windows Store Apps with Visual Studio 2013 Harikrishna Ajithkumar Menon 09:15 Designing XAML Apps using blend for Visual Studio 2013 Fons Sonnemans 09:15 Building Windows Store apps for Windows Phone 8.1 Andy Wigley 09:15 Jouw apps op alle schermen en resoluties Martin Tirion 09:15 Combineer Windows, Windows Phone en SharePoint apps voor succesvolle enterprise oplossingen Dave Smits 10:50 Hergebruik van JavaScriptkennis bij het bouwen van Windows Store apps Timmy Kokke 10:50 Making the most from Windows Phone App Studio Tom Verhoeff 13:15 Creating games for Windows 8 and Windows Phone 8 with monogame Rob Miles 13:15 A Lap Around the PRISM Framework for Windows 8 Store Apps Mike Taulty 14:50 Bouwen en distribueren van je Enterprise apps voor Windows Phone 8.1 Matthijs Hoekstra 14:50 Zoeken in Windows en in jouw app Martin Tirion 14:50 Succesvol Enterprise apps aanbieden via de Windows en Office Store Dave Smits 16:20 Networking, Mobile Services and Authentication on Windows Phone 8.1 Andy Wigley 16:20 TypeScript en Windows Store apps Timmy Kokke

×