Introduction: Introduction WPF ('Avalon') andamp; Aurora Overview
Author: Gary Fuhr, VP Software Development
Mobiform Software Inc.
Agenda: Copyright 2005-2006, MOBIFORM Software Inc. Agenda Introduction
XML to XAML
WPF Overview
Shapes
Brushes
Controls
Panels andamp; Grids
Aurora Overview
Aurora Integration
Closing
XML to XAML : Copyright 2005-2006, MOBIFORM Software Inc. XML to XAML
Growth of XML: Copyright 2005-2006, MOBIFORM Software Inc. Growth of XML
So Why XML?: Copyright 2005-2006, MOBIFORM Software Inc. So Why XML? Simple
Extensible
Interoperable
Open Standard
Experience
The Next Step!: Copyright 2005-2006, MOBIFORM Software Inc. The Next Step!
What is XAML?: Copyright 2005-2006, MOBIFORM Software Inc. What is XAML? Extensible Application Markup Language
Declarative Language
Based on XML
Hierarchy of CLR objects and properties
Tags = Objects
Attributes = Properties
XAML Now!: Copyright 2005-2006, MOBIFORM Software Inc. XAML Now! Supports all the controls, plus more
Supports rendering 2D and 3D graphics
*Natively understood by IE 7.0
Ink Canvas
Data Binding
Has all capabilities of HTML, PDF, and Flash
100% XML based
Hello XAML!: Copyright 2005-2006, MOBIFORM Software Inc. Hello XAML! andlt;Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'andgt;
andlt;Labelandgt;Hello XAML!andlt;/Labelandgt;
andlt;/Canvasandgt;
What is .NET 3.0?: Copyright 2005-2006, MOBIFORM Software Inc. What is .NET 3.0? A set of managed object-oriented APIs
Extends the existing .Net Framework
Available on Windows Vista andamp; Future OSs
4 key parts:
WPF – Windows Presentation Foundation
WCF – Windows Communication Foundation
WF – Windows Workflow Foundation
WCS – Windows CardSpace
WinFX Requirements: Copyright 2005-2006, MOBIFORM Software Inc. WinFX Requirements Current release .Net 3.0 RTM
Operating Systems:
Windows XP SP2
Windows 2003 Server SP1
Windows Vista
Processor: recommend 1Ghz Pentium
RAM: recommend 256MB
Hard Disk: up to 500MB
Display: recommend 1024x768, 32-bit color
What is WPF?: Copyright 2005-2006, MOBIFORM Software Inc. What is WPF? Windows Presentation Foundation
Formerly codenamed 'Avalon'
Blends UI, documents and media content
Supports Tablet and other forms of input
Improved imaging and printing pipeline
Accessibility and UI automation infrastructure
Data driven UI and improved visualization
Stronger integration points into Windows shell
WPF Technologies: Copyright 2005-2006, MOBIFORM Software Inc. WPF Technologies Text: Fonts, Glyphs, Adobe CFF…
Editing: Text, Rich Text, Ink, …
Controls: Basic, Viewers, Advanced, …
Flow Documents: Pagination, Text Flow, ...
Visuals: 2D, 3D, Animation
Media: Image, Audio, Video
Speech: Recognition, Synthesis
Printing
WPF Namespaces: Copyright 2005-2006, MOBIFORM Software Inc. WPF Namespaces
.NET 3.0 Projects: Copyright 2005-2006, MOBIFORM Software Inc. .NET 3.0 Projects Windows Application (WPF)
Web Browser Application (WPF)
Custom Control Library (WPF)
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Our First .NET 3.0 Application 'Hello XAML!'
'FirstAppDemo'
WPF Overview: Copyright 2005-2006, MOBIFORM Software Inc. WPF Overview
Important Concepts: Copyright 2005-2006, MOBIFORM Software Inc. Important Concepts Logical Tree
Visual Tree
Dependency Properties
Routed Events
Logical Tree: Copyright 2005-2006, MOBIFORM Software Inc. Logical Tree Logical hierarchy of elements at run time
Not intended to be manipulated directly
Important for understanding
Inheritance
event routing
LogicalTreeHelper – static helper class
Find a logical node
Get children for a node
Get parent for a node
Schematic of a Logical Tree: Copyright 2005-2006, MOBIFORM Software Inc. Schematic of a Logical Tree andlt;Canvas ID='ParentElement'andgt;
andlt;!-- andlt;Canvas.Childrenandgt; --andgt;
andlt;Labelandgt;Select a Fruitandlt;/Labelandgt;
andlt;ListBoxandgt;
andlt;!-- andlt;ListBox.Items --andgt;
andlt;ListItemandgt;Appleandlt;/ListItemandgt;
andlt;ListItemandgt;Orangeandlt;/ListItemandgt;
andlt;ListItemandgt;Pearandlt;/ListItemandgt;
andlt;!-- andlt;/ListBox.Items --andgt;
andlt;/ListBoxandgt;
andlt;!-- andlt;/Canvas.Childrenandgt; --andgt;
andlt;/Canvasandgt;
Visual Tree: Copyright 2005-2006, MOBIFORM Software Inc. Visual Tree Accumulation all visual elements
in code and markup
Each element consists of multiple visuals
Rendering order
starts with root visual
children from left to right
a child’s children before child’s siblings
Provides lower-level control over drawing
VisualTreeHelper – static helper class
Schematic of a Visual Tree: Copyright 2005-2006, MOBIFORM Software Inc. Schematic of a Visual Tree
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Visual Tree
'VisualTreeDemo'
Dependency Properties: Copyright 2005-2006, MOBIFORM Software Inc. Dependency Properties Most properties have corresponding static DP
DP is a property name with the 'Property' suffix
Example: DP for 'Width' property is 'WidthProperty'
Referenced by Class.andlt;DependencyPropertyandgt;
Implement a dependency properties when …
data binding, styling, animation, default value, inheritance, or invalidation is required
DependencyProperty.Register(…)
Attached Dependency Properties: Copyright 2005-2006, MOBIFORM Software Inc. Attached Dependency Properties Specialized form of dependency properties
Child elements store unique values on parent
Child informs parent how to present it on the UI
Usage similar to a static property
XAML Usage: Class.Property
Example: Canvas.Top, DockPanel.Dock
Code Usage: SetValue(), GetValue(), …
If parent not found, attached property is ignored
Routed Events: Copyright 2005-2006, MOBIFORM Software Inc. Routed Events 3 types
Direct (Window Forms type event routing)
Tunneling (prefixed with 'Preview')
Bubbling
Provides reference to 2 objects
Sender : object that raised the event
Source : object where event handler was invoked
Handled = true
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Tunneling / Bubbling Routed Events
'RoutedEventDemo'
Base Elements: Copyright 2005-2006, MOBIFORM Software Inc. Base Elements Important classes:
DependencyObject
UIElement
FrameworkElement
ContentElement
FrameworkContentElement
Inheritance Hierarchy of a Button: Copyright 2005-2006, MOBIFORM Software Inc. Inheritance Hierarchy of a Button System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Control
System.Windows.Controls.ContentControl
System.Windows.Controls.Primitives.ButtonBase
System.Windows.Controls.Button
Â
Shapes Overview : Copyright 2005-2006, MOBIFORM Software Inc. Shapes Overview System.Windows.Shapes namespace
A type of UIElement
Can be used inside Panels andamp; most controls.
Available Shape objects include:
Rectangle, Ellipse, Line, Polyline, Polygon, Path
Features common to all shapes:
Stroke
StrokeThickness
Fill
Rectangle: Copyright 2005-2006, MOBIFORM Software Inc. Rectangle 'XAML'
andlt;Rectangle Name='Rect1' Width='100' Height='100' Fill='Red' Stroke='Black' StrokeThickness='2' /andgt; 'C#'
Rectangle r = new Rectangle(); r.Name = 'Rect1' r.Width = 100; r.Height = 100; r.Fill = Brushes.Red; r.Stroke = Brushes.Black; r.StrokeThickness = 2;
Ellipse: Copyright 2005-2006, MOBIFORM Software Inc. Ellipse 'XAML'
andlt;Ellipse Name='Ellipse1' Width='100' Height='100' Fill='Red' Stroke='Black' StrokeThickness='2' /andgt; 'C#'
Ellipse r = new Ellipse(); r.Name = 'Ellipse1' r.Width = 100; r.Height = 100; r.Fill = Brushes.Red; r.Stroke = Brushes.Black; r.StrokeThickness = 2;
Line: Copyright 2005-2006, MOBIFORM Software Inc. Line 'XAML'
andlt;Line Name='Line1' Stroke='Black' StrokeThickness='2' X1='300' Y1='100' X2='100' Y2='200' /andgt; 'C#'
Line line = new Line(); line.Name = 'Line1'; line.Stroke = Brushes.Black; line.StrokeThickness = 2; line.X1 = 300; line.Y1 = 100; line.X2 = 100; line.Y2 = 200;
Polyline: Copyright 2005-2006, MOBIFORM Software Inc. Polyline 'XAML'
andlt;Polyline Name='Polyline1' Stroke='Black' StrokeThickness='2' Points='200,200 250,250 300,250 350,200' /andgt; 'C#'
Polyline p = new Polyline(); p.Name = 'Polyline1'; p.Stroke = Brushes.Black; p.StrokeThickness = 2; PointCollection pc = new PointCollection(); pc.Add(new Point(200, 200)); pc.Add(new Point(250, 250)); pc.Add(new Point(300, 250)); pc.Add(new Point(350, 200)); p.Points = pc;
Polygon: Copyright 2005-2006, MOBIFORM Software Inc. Polygon 'XAML'
andlt;Polygon Name='Polygon1' Fill='Blue' Stroke='Black' StrokeThickness='2' Points='200,200 250,250 300,250 350,200' /andgt; 'C#'
Polygon p = new Polygon(); p.Name = 'Polygon1'; p.Fill = Brushes.Blue; p.Stroke = Brushes.Black; p.StrokeThickness = 2; PointCollection pc = new PointCollection(); pc.Add(new Point(200, 200)); pc.Add(new Point(250, 250)); pc.Add(new Point(300, 250)); pc.Add(new Point(350, 200)); p.Points = pc;
Path: Copyright 2005-2006, MOBIFORM Software Inc. Path Can draw open and closed shapes
Can draw multiple shapes
Can draw curved shapes
A path geometry composed 1+ path figures
A path figure is composed 1+ path segments
A path segment is one of …
Line, Arc, Bezier, Quadratic Bezier, Poly Quadratic Bezier, Polyline, Poly Bezier
Brushes Overview: Copyright 2005-2006, MOBIFORM Software Inc. Brushes Overview System.Windows.Media namespace
Types of Brushes
Solid Color Brush
Linear Gradient Brush
Radial Gradient Brush
Image Brush
Drawing Brush
Visual Brush
Video Brush (future)
Solid Color Brush: Copyright 2005-2006, MOBIFORM Software Inc. Solid Color Brush Paint an area with a solid color
'XAML'
Named color andlt;Line Stroke='Blue' /andgt;
Hexidecimal andlt;Line Stroke='#FF0000FF' /andgt;
Hexidecimal format is #AARRGGBB.
'C#'
Brushes.Blue;
SolidColorBrush scb = new SolidColorBrush(); scb.Color = Colors.Blue;
Linear Gradient Brush: Copyright 2005-2006, MOBIFORM Software Inc. Linear Gradient Brush Paints an area with a linear gradient
Contains 2 or more gradient stops
StartPoint andamp; EndPoint define the direction
'XAML' andlt;LinearGradientBrush StartPoint='0,0' EndPoint='1,1'andgt; andlt;GradientStopsandgt; andlt;GradientStop Color='Blue' Offset='0,0' /andgt; andlt;GradientStop Color='Red' Offset='1,0' /andgt; andlt;/GradientStopsandgt; andlt;/LinearGradientBrushandgt;
Radial Gradient Brush: Copyright 2005-2006, MOBIFORM Software Inc. Radial Gradient Brush Paints an area with a radial gradient
Contains 2 or more gradient stops
'XAML' andlt;RadialGradientBrush GradientOrigin='0.5,0.5' Center='0.5,0.5' RadiusX='0.5' RadiusY='0.5'andgt; andlt;GradientStopsandgt; andlt;GradientStop Color='Red' Offset='0,0' /andgt; andlt;GradientStop Color='Blue' Offset='1,1' /andgt; andlt;/GradientStopsandgt; andlt;/RadialGradientBrushandgt;
Image Brush: Copyright 2005-2006, MOBIFORM Software Inc. Image Brush Paints an area with an image
A type of Tile Brush
'XAML' andlt;ImageBrush AlignmentX='Center' AlignmentY='Center' ImageSource='file:///c:/Image.png' Opacity='1' Stretch='Fill' TileMode='FlipXY' Viewport='0.0,0.0,0.1,0.1' /andgt;
Drawing Brush: Copyright 2005-2006, MOBIFORM Software Inc. Drawing Brush Paints an area with a drawing
A type of Tile Brush
Drawing consists shapes, text, images and video
Shapes can be painted with a brush; even drawing
Offer performance benefits over Shape objects
Suitable for clipart and backgrounds
Types of drawing objects
GeometryDrawing, ImageDrawing, GlyphRunDrawing
DrawingGroup to combine multiple drawings
Visual Brush: Copyright 2005-2006, MOBIFORM Software Inc. Visual Brush Paints an area with a visual object
A type of Tile Brush
Project content from one area into another area
Most versatile and powerful of all brushes
can create reflection effects
can magnify portions of the screen
Controls Overview: Copyright 2005-2006, MOBIFORM Software Inc. Controls Overview System.Windows.Controls namespace
Can now control appearance and opacity
Standard Controls
Label, Button, TextBox, ListBox, ComboBox, etc.
New Controls
Expander, RichTextBox, TextBlock, Resizer, etc.
Controls Types: Copyright 2005-2006, MOBIFORM Software Inc. Controls Types Content Controls
Controls with a single piece of content
Label, ListBoxItem, ScrollViewer, ToolTip, …
Items Controls
Controls with multiple child elements
ToolBar, Menu, ListBox, StatusBar, Treeview, …
Primitives
Base class for other controls
RangeBase, ResizeGrip, TextBoxBase, Thumb, …
Layout: Copyright 2005-2006, MOBIFORM Software Inc. Layout Used to precisely position child elements
Available to Panel and Controls
The most important are:
HorizontalAlignment, relative to other child elements
VerticalAlignment, relative to other child elements
Margin, Thickness outside the element
Padding, Thickness inside the element
HoizontalContentAlignment, relative to bounding rect.
VerticalContentAlignment, relative to bounding rect.
Panels & Grids Overview: Copyright 2005-2006, MOBIFORM Software Inc. Panels andamp; Grids Overview System.Windows.Controls.Panel namespace
10 derived types of panels …
6 designed for Rich UI layout
Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel and WrapPanel
4 primitives for specific layout situations
BulletPanel, TabPanel, ToolBarOverflowPanel and UniformGrid
Canvas: Copyright 2005-2006, MOBIFORM Software Inc. Canvas Explicitly position child elements
Position child elements using attached DP
Canvas.Top, takes priority over Bottom
Canvas.Left, takes priority over Right
Canvas.Bottom
Canvas.Right
No inherent sizing constraints
No inherent alignment behaviors
Child elements drawn in the order coded
DockPanel: Copyright 2005-2006, MOBIFORM Software Inc. DockPanel Child elements arranged horizontally or vertically, relative to each other
Position child elements using attached DP
DockPanel.Dock
If property 'LastChildFill = true'
Last child element always fills remaining space
Last child’s dock value will be ignored
Grid: Copyright 2005-2006, MOBIFORM Software Inc. Grid A flexible grid consisting of columns and rows
Position child elements using attached DP
Grid.Row, Grid.Column
Grid.RowSpan, Grid.ColumnSpan
Grid supports content layering
Margin property for precise positioning
RowDefinition defines Height of each row
ColumnDefinition defines Width of each column
Number of Cells =
RowDefinition count x ColumnDefinition count
StackPanel: Copyright 2005-2006, MOBIFORM Software Inc. StackPanel Child elements stacked in an assigned direction
Child elements stacked in a single line
Orientation property sets direction
Vertical (default) or Horizontal
HorizontalAlignment property defaults to Stretch
VerticalAlignment property defaults to Stretch
VirtualizingStackPanel offers a performance advantage only when items are data-bound
WrapPanel: Copyright 2005-2006, MOBIFORM Software Inc. WrapPanel Child elements arranged sequentially based on the FlowDirection and Orientation property
FlowDirection arranges child elements either left to right (default) or right to left
Orientation arranges child element either horizontally (default) or vertical
By default, child elements arrange left to right, breaking to next line down when the line is full
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Canvas
'CanvasDemo'
Grid
'GridDemo'
Dock Panel
'DockPanelDemo'
Stack Panel
'StackPanelDemo'
Stack Panel 2
StackPanelDemo2
Wrap Panel
'WrapPanelDemo'
Topics Not Covered: Copyright 2005-2006, MOBIFORM Software Inc. Topics Not Covered Styling
3D
Animation
Data Binding
Resources
Speech
Printing
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Animation Demo
'AvalonClockDemo'
Recap: Copyright 2005-2006, MOBIFORM Software Inc. Recap Pros
XML based
Separation of UI elements from UI logic
Windows, Web apps and Documents use same object model
Vector based
Cons
XAML not designed for humans
Is extremely verbose
Requires a LOT of typing
Microsoft Only, but don’t forget WPF/E
Aurora Overview: Copyright 2005-2006, MOBIFORM Software Inc. Aurora Overview
Aurora to the Rescue!: Copyright 2005-2006, MOBIFORM Software Inc. Aurora to the Rescue! Create WPF UI using a GUI designer
Typing XAML is optional
Integrates with Visual Studio 2005
Complete XAML in a fraction of the time
Supports 3rd party WPF controls
Can preview document
Can integrate into your WFP application
DEMO - Integration: Copyright 2005-2006, MOBIFORM Software Inc. DEMO - Integration
Demo Aurora integrated with Visual Studio 2005
DEMO – The UI: Copyright 2005-2006, MOBIFORM Software Inc. DEMO – The UI Aurora Designer User Interface
'Review components and tools'
'Review application settings'
DEMO – Drawing Document: Copyright 2005-2006, MOBIFORM Software Inc. DEMO – Drawing Document Creating a Drawing Document
'Create new Drawing document'
'Demo adding shapes'
'Demo adding controls'
'Demo setting brushes'
'Demo rotating elements'
'Demo skewing elements'
Aurora Custom Controls: Copyright 2005-2006, MOBIFORM Software Inc. Aurora Custom Controls Pie Chart and Pie Slice
Drive, Folder and File Controls
Connectable Line andamp; Polylines
3rd Party Controls
DEMO – Grid Document: Copyright 2005-2006, MOBIFORM Software Inc. DEMO – Grid Document Creating a Grid Document
'Create new Grid document'
'Demo adding content'
'Demo setting row/column span'
'Setting row height'
'Setting column width'
Aurora Integration: Copyright 2005-2006, MOBIFORM Software Inc. Aurora Integration
Why Integrate?: Copyright 2005-2006, MOBIFORM Software Inc. Why Integrate? Provide custom editing of XAML document within your application
Designers are expensive to build, saves $$$
Skin-able – Themes
Object Model
Aurora Interface: Copyright 2005-2006, MOBIFORM Software Inc. Aurora Interface IAuroraDesigner, top level interface of the designer
Load, Save andamp; Create XAML documents
Notification when document or editor changes
Access to designer registration services
IAuroraEditor, interface for current content editor
Access to current editor’s commands
IAuroraDocument, interface for current document
Access to current document’s elements
Other useful interfaces
ISolutionExplorer, ISelectionService, IControlPanel
DEMO: Copyright 2005-2006, MOBIFORM Software Inc. DEMO Aurora Integration Application
'AuroraIntegration'
Closing: Copyright 2005-2006, MOBIFORM Software Inc. Closing
Important Points: Copyright 2005-2006, MOBIFORM Software Inc. Important Points XAML is a hierarchy of CLR objects and properties
Logical Tree vs. Visual Tree
Understanding of dependency properties
Knowledge of event tunneling and bubbling
WFP delivers on Rich UI layout
WPF runs on current OSs (XP and Server 2003)
WPF is available now
Aurora will save you time and $$$
Important Links: Copyright 2005-2006, MOBIFORM Software Inc. Important Links Mobiform: www.mobiform.com
XAML.Net: www.xaml.net
Aurora Newsgroup: http://groups.yahoo.com/group/xaml/
Aurora API Online: http://mobiform.com/AuroraAPI/
Download Aurora: http://www.mobiform.com/Eng/aurora.html
Mobiform Blog Website: http://mobiformsoftware.blogspot.com/
Download Latest .NET 3.0 Runtime and SDK: http://www.microsoft.com/downloads keyword: WinFX
Microsoft .Net Framework 3.0 Newsgroup: http://msdn.microsoft.com/windowsvista/ Select Community, Forums andamp; Newsgroups