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.
7. 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
8. 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
10. 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
11. 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
12. 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>
14. 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
15. 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>
17. 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"/>
25. 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.
26. 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.
29. 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
31. 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
32. 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
34. 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)
41. 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
43. 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>
47. 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
48. 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>
53. 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.
54. 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
55. 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