Transcript Google Web Toolkit (GWT) Basics

Introduction to WPF
• Based on a Microsoft presentation
Introduction to WPF
UCN / 2012
1
.NET At The Core
Introduction to WPF
UCN / 2012
2
Topics
• Windows Presentation
Foundation
– Overview
– 2D
– Controls and Layout
– Styles, Templates & Resources
– Data Binding
– Animation
Introduction to WPF
UCN / 2012
3
Overview
Now
• GDI (20 years), GDI+, WinForms
• DirectX (11 years), Direct3D
• Quartz, DirectShow (8 years)
• Problems
– Showing their age
– Each API is different
– Mixing APIs is challenging
Introduction to WPF
UCN / 2012
5
Next Gen
• WPF – replaces GDI
• Direct3D – large games, used by WPF
• Media Foundation – ultimately will replace DirectShow
• MCML –markup language for Media Center Edition
applications
• XNA – small games
Introduction to WPF
UCN / 2012
6
WPF
• Compositing
– UI, Documents, Media, 3D, Browser, …
• Declarative programming with XAML
markup
• For Designers and Developers
• Rewritten from scratch
–
–
–
–
–
Built on top of Direct3D
Hardware accelerated
Vector based
Resolution independent
Retained graphics
Introduction to WPF
UCN / 2012
7
WPF Vision
• Integrated, vector-based
composition engine
– Utilizing the power of the PC
throughout the graphics stack
• Unified approach to UI,
Documents, and Media
– Integration as part of development and
experience
• Declarative programming
– Bringing designers directly into
application development
• Ease of deployment
– Allowing administrators to deploy and
manage applications securely
Introduction to WPF
UCN / 2012
8
Developer Designer Collaboration
Designer
Developer
Introduction to WPF
UCN / 2012
9
XAML
• XML for Applications Markup Language
<Button Name="button1">
Click Me!
</Button>
Button button1 = new Button();
button1.Content = "Click Me!";
Introduction to WPF
UCN / 2012
10
Properties as Attributes or Elements
<Button Content="Click Me!"
Background="LightGreen" />
<Button>
<Button.Background>
LightGreen
</Button.Background>
Click Me!
</Button>
Introduction to WPF
UCN / 2012
11
Attached Properties
<Canvas>
<Button Canvas.Top="30" Canvas.Left="40">
Click Me!
</Button>
</Canvas>
Introduction to WPF
UCN / 2012
12
2D Graphics
Shapes
• Elements of UI tree
– Just like controls and other elements
Rectangle
Ellipse
Polyline
Polygon
Path
Introduction to WPF
UCN / 2012
14
Shapes Example
<Canvas Width="100" Height="100">
<Ellipse Fill="Yellow" Stroke="Black"
StrokeThickness="7"
Width="100" Height="100" />
<Ellipse Fill="Black"
Width="10" Height="15"
Canvas.Left="28" Canvas.Top="28" />
<Ellipse Fill="Black"
Width="10" Height="15"
Canvas.Left="62" Canvas.Top="28" />
<Path Stroke="Black"
StrokeThickness="6"
Data="M 30,60 Q 50,90 70,60" />
</Canvas>
Introduction to WPF
UCN / 2012
15
Shapes and Code
• Shapes accessible from code behind
– Just like any element
• Change appearance by setting properties
– Screen is automatically updated
<Ellipse Fill="Yellow" x:Name="myEllipse"
StrokeThickness="7" Stroke="Black"
Width="100" Height="100" />
// ...in code behind
myEllipse.Width = 200;
Introduction to WPF
UCN / 2012
16
Transforms
• Any element can be transformed
– Scaling, rotation, shearing
• Optionally affects layout
Introduction to WPF
UCN / 2012
17
Hit Testing
• Built in for all drawing elements
• Takes transformations into account
• Bubbling event model
Introduction to WPF
UCN / 2012
18
Brushes
• Specifies how shape is filled
– Used for properties throughout WPF
• Polymorphic
• Composable
<Rectangle Fill="Red"
Width="200" Height="100" />
Introduction to WPF
UCN / 2012
19
Linear/RadialGradientBrush
• Fills across a range of colors
• Enables interesting visual effects
Introduction to WPF
UCN / 2012
20
ImageBrush
<TextBlock FontSize="72" FontFamily="Arial Black">
<TextBlock.Foreground>
<ImageBrush
ImageSource="c:\Windows\Blue Lace 16.bmp" />
</TextBlock.Foreground>
Hello, World!
</TextBlock>
Introduction to WPF
UCN / 2012
21
Composability: DrawingBrush
• Fill with vector image
– Scalable
Introduction to WPF
UCN / 2012
22
Composability: VisualBrush
• Fill with any UI element
• Makes certain design tricks easy
– Reflection of UI
– Use as 3D surface texture
Introduction to WPF
UCN / 2012
23
OpacityMask
• Apply opacity to any visual using any Brush
Introduction to WPF
UCN / 2012
24
Imaging and Video
• Elements
– Image
– MediaElement
• Integrate images and video into a brush
– Paint shapes
– Use as a 3D surface texture
• Extensive image handling support
– System.Windows.Media.Imaging
Introduction to WPF
UCN / 2012
25
Future Proofing the Platform
and Your Applications
• Resolution independent graphics
• Double precision floating point coordinates and
transformations
• Hardware capabilities are abstracted to better map to future
hardware advances
Introduction to WPF
UCN / 2012
26
Summary
• Modern integrated content platform
• Consistency across UI and development
• Higher quality through hardware advances
Introduction to WPF
UCN / 2012
27
Controls and Layout
Class Hierarchy
Introduction to WPF
UCN / 2012
29
Layout Controls
•
•
•
•
•
•
StackPanel
WrapPanel
Canvas
DockPanel
Grid
...
Introduction to WPF
UCN / 2012
30
Simple Controls
•
•
•
•
•
•
•
PasswordBox
ScrollBar
ProgressBar
Slider
TextBox
RichTextBox
...
Introduction to WPF
UCN / 2012
31
Content Controls
•
•
•
•
•
•
•
•
•
•
Button
RepeatButton
ToggleButton
CheckBox
RadioButton
Label
Frame
ListBoxItem
StatusBarItem
ScollBarViewer
•
•
•
•
•
ToolTip
UserControl
Window
NavigationWindow
...
Introduction to WPF
UCN / 2012
32
Headered Content Controls
•
•
•
•
Expander
GroupBoxItem
TabItem
...
Introduction to WPF
UCN / 2012
33
Items Controls
•
•
•
•
•
•
•
•
Menu
ContextMenu
StatusBar
TreeView
ListBox
ComboBox
TabControl
...
Introduction to WPF
UCN / 2012
34
Summary
•
•
•
•
Controls
Containers
Events
Commands
Introduction to WPF
UCN / 2012
35
Styles, Templates and
Resources
Developer
Designer
Introduction to WPF
UCN / 2012
37
Development Process
Introduction to WPF
UCN / 2012
Product
Styling &
Templates
Final
Skeleton
Design
38
Styles are about
setting properties…
Introduction to WPF
UCN / 2012
39
Setting
Properties
Styles
Trigger
Animations
Template
Introduction to WPF
UCN / 2012
40
Lookless Controls and Templates
• Control implies behaviour
• Probably supplies default look
– Designer free to supply new look
Introduction to WPF
UCN / 2012
41
Introduction to WPF
UCN / 2012
42
Styling and Resources
• Style rarely defined inline
– Tend to be reused for consistency
• Usually defined as resources
Introduction to WPF
UCN / 2012
43
Resource Dictionaries
• Simple Key, Value collection
• FrameworkElement.Resources
<Grid>
<Grid.Resources>
<Style x:Key="dapper">
<Setter Property="Background" Value="LimeGreen" />
</Style>
</Grid.Resources>
...
<Button Style="{StaticResource dapper}">Click</Button>
Introduction to WPF
UCN / 2012
44
Resource Hierarchy
<Window>
<Window.Resources>
...
</Window.Resources>
System Resources
Application
Resources
Application
Resources
Window/Page
Resources
Element
Resources
<Grid>
<Grid.Resources>
...
</Grid.Resources>
Window/Page
Resources
Element
Resources
Element
Resources
Element
Resources
<ListBox>
<ListBox.Resources>
...
</ListBox.Resources>
</ListBox>
</Grid>
</Window>
Introduction to WPF
UCN / 2012
45
Data Binding
Introduction to WPF
UCN / 2012
46
Agenda
• Element data binding
• Object and XML data binding
• Data templates
• Master / child relationships
• Debugging
Introduction to WPF
UCN / 2012
47
Data Binding Overview
• Target
Control
– Any property, any element
–
–
–
–
Property
• Source
CLR Object
WPF Element
ADO.NET
XML
• Dynamic
– INotifyPropertyChanged, DependencyProperty or
PropertyDescriptor
• Multiple models
– One Time
– One Way
– Two Way
Binding
• Value Converter
“Data Item”
Introduction to WPF
Property
UCN / 2012
48
Binding in Markup
<Image Source="truck.png"
Canvas.Left=
"{Binding Path=Value,
ElementID=horzPos}"
/>
<Slider Orientation=
"Horizontal"
Name="horzPos"
Value="40"/>
{Binding Path=Value, ElementName=horzPos}
Introduction to WPF
UCN / 2012
49
Object Data Providers
• Add to resource dictionary
– Named source objects
• Use with resource binding
– {StaticResource theCars}
<Window>
<Window.Resources>
<ObjectDataProvider
x:Key="myData"
ObjectType="
{x:Type Foo}" />
</Window.Resources>
...
<TextBlock TextContent="{Binding Path=Bar,
Source={StaticResource myData} }" />
Introduction to WPF
UCN / 2012
50
Share Common Source
StackPanel
DataContext=
{Binding
Source={StaticResource myData}}
HorizontalSlider
Image
Value=
{Binding Path=XPos}
Path=XPos,
Source={StaticResource myData}}
Canvas.Left=
{Binding Path=XPos}
Path=XPos,
Source={StaticResource myData}}
Introduction to WPF
UCN / 2012
51
Provide Data From Code
• May be easier to load data in codebehind
• Can set DataContext in code
Foo myDataObject = new Foo();
myDataObject.Bar = 42;
// Set DataContext
myWindow.DataContext = myDataObject;
Introduction to WPF
UCN / 2012
52
Binding to XML
cars.xml
<XmlDataProvider
x:Key="cars"
XPath="/Cars/Car"
Source="cars.xml" />
<Cars>
<Car Make="Ford"
Model="F-150">
<Image>truck.png</Image>
</Car>
<Car> ... </Car>
</Cars>
<TextBlock
TextContent="{Binding XPath=@Make,
Source={StaticResource cars}}"
/>
Introduction to WPF
UCN / 2012
53
Provide XML From Code
• Can load XML data in codebehind
– Just like any other data
XmlDocument doc = new XmlDocument();
doc.LoadXml("<Foo><Bar>Hello,
world</Bar></Foo>");
myGrid.DataContext = doc;
Introduction to WPF
UCN / 2012
54
Databases and Web Services
• No special support required
• Use object binding
– DataSet/DataTable support the TypeDescriptor system
Introduction to WPF
UCN / 2012
55
Data and Controls
• ContentControl – singular content
– Button, CheckBox, Label, ListBoxItem, …
• ItemsControl – plural content
– ListBox, ComboBox, Menu, TabControl, ToolBar, …
• Can use data objects as content
myButton.Content = new Car();
myListBox.Items.Add(new Car());
Car c = (Car) myListBox.SelectedItem;
Introduction to WPF
UCN / 2012
56
Data Templates
class Car
{
string Image {get;set}
string Model {get;set}
}
DataTemplate
<DataTemplate x:Key="carTemplate">
<Border BorderBrush="Blue" BorderThickness="2" Background="LightGray"
Margin="10" Padding="15,15,15,5">
<StackPanel>
<Image HorizontalAlignment="Center" Source="{Binding Path=Image}" />
<Border HorizontalAlignment="Center" BorderBrush="Navy"
Background="#DDF" BorderThickness="1" Margin="10" Padding="3">
<TextBlock FontSize="18" Text="{Binding Path=Model}" />
</Border>
</StackPanel>
</Border>
</DataTemplate>
Introduction to WPF
UCN / 2012
57
Choosing a Data Template
• By Name (resource dictionary key)
– ContentTemplate/ItemTemplate= {StaticResource myStyle}
• By Type
– <DataTemplate DataType="{x:Type cc:Car}">
– <DataTemplate DataType="Book"> for XML
Introduction to WPF
UCN / 2012
58
Summary
• WPF understands your data
– use your favorite data model: XML, objects, SQL, WS …
– Bind data to controls
• Templates give your data a face
• Controls “think” data
– Data is pervasive across and integrated into the platform
Introduction to WPF
UCN / 2012
59
Links
•
Sites
–
http://windowsclient.net/
–
http://wpf.netfx3.com/ (moving to windowsclient)
–
WPF Windows SDK Documentation
–
My Five Day Course For Hitting the WPF Curve/Cliff
–
www.brains-N-brawn.com/backRow/
–
http://sessions.visitmix.com/
–
http://wpf.netfx3.com/files/folders/labs/default.aspx
(The tutorials are from here)
–
http://devlicio.us/blogs/rob_eisenberg/default.aspx
(Søg efter ‘Crash Course’
Introduction to WPF
UCN / 2012
60
Exercise
• Make tutorials of free choice from the tutorial folder or from
the videos on http://windowsclient.net/
• The following are recommended:
– Creating Rich 2D and 3D Content in WPF
– ColorSwatch
– Using Data Binding in WPF
– LiveSearch (using a webservice and data binding)
– The video tutorials!
• You might also visit the video casts from the Mix
Conferences: http://sessions.visitmix.com/
• Challenge:
– Make a rotating cube with a playing video on each side.
– Might need some computing power to run :-(
Introduction to WPF
UCN / 2012
61