WPF Graphics - Telerik Academy
Download
Report
Transcript WPF Graphics - Telerik Academy
WPF Graphics and Animations
2D and 3D Graphics and Animations
Doncho Minkov
Technical Trainer
http://www.minkov.it
Telerik School Academy
schoolacademy.telerik.com
Table of Contents (2)
1.
Introduction to WPF Graphics
2.
WPF Drawing Model
3.
Resolution Independence
4.
Basic Graphics Objects
5.
Basic Shapes
6.
Bitmaps, Images and Effects
7.
Brushes and Pens
8.
Transformations
9.
Animation
2
Introduction to WPF
Graphics
Introduction to WPF Graphics
Graphical elements can be integrated into any
part of user interface
Free to mix them with any other kind of
element
Use graphical elements inside controls
E.g. put an ellipse inside a button
4
WPF Graphics – Example
<DockPanel>
<StackPanel DockPanel.Dock="Top"
Orientation="Horizontal">
<TextBlock Text="Mix text, " />
<Ellipse Fill="red" Width="40" />
<TextBlock Text=" and " />
<Button>Controls</Button>
</StackPanel>
<Ellipse DockPanel.Dock="Left" Fill="Yellow"
Width="100" />
<Button DockPanel.Dock="Left">z</Button>
<TextBlock FontSize="24" TextWrapping="Wrap">
And of course you can put graphics into
your text:
<Ellipse Fill="Cyan" Width="50" Height="20" />
</TextBlock>
</DockPanel>
5
Introduction to WPF
Graphics
Live Demo
WPF Drawing Model
WPF Drawing Model
In WPF we don't need to write a C# code to
respond to redraw requests\
WPF can keep the screen repainted for us
This is because WPF lets us represent drawings
as objects that can be represented as XAML
Objects are representing graphical
shapes in
the tree of user interface elements
When some property is changed, WPF will
automatically update the display
8
WPF Drawing Model –Example
<Canvas x:Name="MainCanvas" MouseLeftButtonDown=
"mainCanvas_MouseLeftButtonDown">
<Rectangle Canvas.Left="10" Canvas.Top="30"
Fill="Indigo" Width="40" Height="20" />
<Rectangle Canvas.Left="20" Canvas.Top="40"
Fill="Yellow" Width="40" Height="20" />
<Rectangle Canvas.Left="30" Canvas.Top="50"
Fill="Orange" Width="40" Height="20" />
</Canvas>
private void MainCanvas_MouseLeftButtonDown
(object sender, RoutedEventArgs e)
{
Rectangle r = e.Source as Rectangle;
if (r != null)
{ r.Width += 10; }
}
9
WPF Drawing Model
Live Demo
Resolution Independence,
Scaling and Rotation
Resolution Independence
What is
resolution independence?
Elements on the screen can be drawn at sizes
independent from the pixel grid
Resizing do not affect the image quality
WPF resolution
independence means that
If two monitors are set to their native resolution
and each of them is accurately reporting its DPI
settings to WPF
They will display the same WPF window at the
exactly the same size
12
Resolution Independence (2)
WPF is resolution
independent, but it has
logical units to give elements size
A WPF window and all the elements inside it
are using device-independent units
WPF defines a device-independent pixel
as
1/96th of an inch
WPF optimizes its rendering of graphical
features for any scale
It is ideally placed to take advantage of
increasing screen resolutions
13
Scaling and Rotation
WPF supports transformations
at a
fundamental level
Everything in the UI can be transformed
Not just the user-drawn graphics
E.g. text, images, graphical objects, lines,
ellipses, rectangles, controls, etc.
The LayoutTransform property
Available on all user interface elements in WPF
Rotation, scaling, effects (e.g. blur), etc.
14
Scaling and Rotation (2)
<Button>
<Button.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</Button.LayoutTransform>
...
<!--The result is-->
</Button>
<!--without scaling-->
<!--with scaling-->
The details
have become crisper
Graphic is clearer
Because WPF has rendered the button to look
as good as it can at the specified size
15
Basic Graphical Objects
Shapes, Brushes, and Pens
Most of the classes
in WPF’s drawing toolkit
fall into one of these three categories:
Shapes – geometrical figures, e.g. rectangle
Brushes – mechanisms to fill a shape
Pens – draw the shape borders
Shapes are objects that provide the basic
building blocks for drawing
Rectangle, Ellipse, Line, Polyline,
Polygon, and Path
17
Shapes, Brushes, and Pens (2)
The simplest brush is
the single-color
SolidColorBrush
For more interesting visual
effects use
LinearGradientBrush
RadialGradientBrush
Create brushes based on images
ImageBrush
DrawingBrush
VisualBrush – take any visual
tree
18
Shapes, Brushes, and Pens (3)
Pens are used to draw the outline of a shape
Pen is just an augmented brush
When you create a Pen object
You give it a Brush to tell it how it should paint
onto the screen
The Pen class adds more settings
Line thickness (1px, 2px, …)
Dash patterns (solid, dotted, dashed, …)
19
Basic WPF Shapes
Base Shape Class Properties
The Fill property
Specifies the Brush that will be used to paint
the interior
The Stroke property
Specifies the Brush that will be used to paint
the outline of the shape
The Stretch property
How the shape is stretched to fill the shape
object's layout space
21
Rectangle
It can be drawn
either filled in shape, as an
outline, or both filled in and outlined
Rectangle doesn’t provide any properties for
setting its location
The location is determined by the container
(e.g. Canvas, StackPanel, FlowPanel, …)
<Canvas>
<Rectangle Fill="Yellow" Stroke="Black"
Canvas.Left="30" Canvas.Top="10"
Width="100" Height="20" />
</Canvas>
22
Rectangle (2)
A Rectangle will
usually be aligned with the
coordinate system of its parent panel
If the parent panel has been rotated,
Rectangle will of course be also rotated
RadiusX and RadiusY properties
Draw a rectangle with rounded corners
RenderTransform property
Transforms a Rectangle relative to its
containing panel (rotate, scale, effects, …)
23
Ellipse
Ellipse is
similar to Rectangle
Size, location, rotation, fill, and stroke of an
Ellipse are controlled in exactly the same
way as for a Rectangle
<Ellipse Width="100" Height="50" Fill="Yellow"
Stroke="Black" />
<!--The result is-->
24
Line
Draws a straight
Controlling
line between two points
the location
X1 and Y1 define the start point, and X2 and Y2
determine the end point
<StackPanel Orientation="Vertical">
<TextBlock Background="LightGray">Foo</TextBlock>
<Line Stroke="Green" X1="20" Y1="10" X2="100" Y2="40" />
<TextBlock Background="LightGray">Bar</TextBlock>
<Line Stroke="Green" X1="0" Y1="10" X2="100" Y2="0" />
</StackPanel>
25
Ellipses and Lines
Live Demo
Polyline
Draw a connected series of line segments
Points property
Containing a list of coordinate pairs
<Polyline Stroke="Blue"
Points="0,30 10,30 15,0 18,60 23,30 35,30
40,0 43,60 48,30 160,30" />
<!--The result is-->
27
Polygon
Polygon is very similar
to Polyline
It has a Points property that works in exactly
the same way as Polyline’s
Polygon always
draws a closed shape
<Polyline Fill="Orange" Stroke="Blue"
StrokeThickness="2" Points="40,10 70,50 10,50"
<Polygon Fill="Orange" Stroke="Blue"
StrokeThickness="2" Points="40,10 70,50 10,50"
/>
/>
<!--The result is-->
28
Polygon (2)
FillRule property
If this number is odd, the point was inside the
shape
If it is even, the point is outside the shape
The default rule is EvenOdd
<Polygon Fill="Orange" Stroke="Blue"
StrokeThickness="2"
FillRule="Nonzero" Points="10,10 60,10 60,25 20,25
20,40 40,40 40,18 50,18 50,50 10,50" />
<!--The result is-->
29
Path
Path draws
more complex shapes
Data property specifies the Geometry
Three geometry types
RectangleGeometry
Correspond to the Rectangle
EllipseGeometry
Correspond to the Ellipse
LineGeometry
Correspond to the Line
30
Path (2)
GeometryGroup object
Create a shape with multiple geometries
<Canvas>
<Path Fill="Cyan" Stroke="Black">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="20, 40" RadiusX="20"
RadiusY="40" />
<EllipseGeometry Center="20, 40" RadiusX="10"
RadiusY="30" />
</GeometryGroup>
</Path.Data>
<!--The result is-->
</Path>
</Canvas>
31
Path
Live Demo
Path (3)
The ArcSegment
Add elliptical curves to the edge of a shape
Provides two flags
IsLargeArc – determines whether you get the
larger or smaller slice size
SweepDirection – chooses on which side of the
line the slice is drawn
Draw Bézier curves and combining shapes
33
Arc Segment – Example
<Path Fill="Cyan" Stroke="Black">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,11" IsClosed="True">
<ArcSegment Point="50,61" Size="70,30"
SweepDirection="Counterclockwise" />
</PathFigure>
<PathFigure StartPoint="30,11" IsClosed="True">
<ArcSegment Point="80,61" Size="70,30"
SweepDirection="Clockwise"
IsLargeArc="True" />
</PathFigure>
</PathGeometry>
<!--The result is-->
</Path.Data>
</Path>
34
ArcSegment
Live Demo
Bitmaps, Images
and Effects
Image
Image simply displays a picture
Place image anywhere in the visual tree
Source property
URL of the image file / resource
Setting the Source property to an absolute URL
<Image Source="http://www.interactsw.co.uk/images/M3/BackOfM3.jpeg" />
Using relative URL
<Image Source="/MyFunnyImage.jpeg" />
37
Image (2)
The Image element is able to resize the image
The default scaling
behavior
Use the same scale factor horizontally and
vertically
Stretch property
The image will fill the entire space of its
container
<Image Source="/MyFunnyImage.jpeg" Stretch="Fill"
Opacity="0.5" />
38
ImageSource
ImageSource is an abstract
base class
Represent an image
Two classes
derive from ImageSource
DrawingImage
It wraps a resolution-independent drawing object
BitmapSource – it also is abstract
Bitmap source types: BitmapFrame,
BitmapImage, CachedBitmap,
ColorConvertedBitmap, etc.
39
Creating Bitmaps
RenderTargetBitmap
Create a new bitmap from any visual
RenderTargetBitmap bmp =
new RenderTargetBitmap(300,150,300,300,
PixelFormats.Pbgra32);
Ellipse e = new Ellipse();
e.Fill = Brushes.Green;
e.Measure(new Size(96, 48));
e.Arrange(new Rect(0, 0, 96, 48));
bmp.Render(e);
<!-- The result is -->
40
Creating Bitmaps (2)
You can choose any resolution
you like for the
output
RenderTargetBitmap lets you build
a bitmap
out of any combination of WPF visuals
It is great if you want to build or modify a
bitmap using WPF elements
41
Bitmap Effects
BitmapEffects property
Apply a visual effect to the element and all of its
children
All of these effects use bitmap processing
algorithms
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<TextBlock Text="Normal Text"
TextAlignment="Center" FontWeight="Bold" />
<RadioButton Content="Better in position 1?"
GroupName="r" />
</StackPanel>
<!--The example continues-->
42
Bitmap Effects (2)
<StackPanel Orientation="Vertical" Margin="10,0">
<StackPanel.BitmapEffect>
<BlurBitmapEffect Radius="3" />
</StackPanel.BitmapEffect>
<TextBlock Text="Blurred Text" TextAlignment="Center"
FontWeight="Bold" />
<RadioButton Content="Or position 2?" GroupName="r" />
</StackPanel>
</StackPanel>
The built-in effects
BevelBitmapEffect
BitmapEffectGroup
BlurBitmapEffect
…
43
Bitmap Effects
Live Demo
Brushes and Pens
SolidColorBrush
SolidColorBrush uses one color
across the
whole area being painted
It has just one property – Color
<Rectangle Fill="Yellow" Width="100" Height="20" />
The XAML compiler will recognize Yellow as
one of the standard named colors from the
Colors class
Uses a numeric color value
Begin with a # symbol and contain hexadecimal
digits – Fill="#8F8"
46
LinearGradientBrush
The painted area
transitions from one color to
another
The StartPoint and EndPoint properties
Indicate where the color transition begins and
ends
These coordinates are relative to the area being
filled
47
LinearGradientBrush (2)
<Rectangle Width="80" Height="60">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
<!--The result is-->
</Rectangle.Fill>
</Rectangle>
Each GradientStop has an Offset property
Enables the fill to pass through multiple colors
48
ImageBrush
TileBrush
Base class for ImageBrush, DrawingBrush,
and VisualBrush
Decides how to stretch the source image to fill
the available space
Stretch property
Specifies how the content of this TileBrush
stretches to fit its tiles
Fill / Uniform / UniformToFill
49
ImageBrush (2)
AlignmentX and AlignmentY properties
Horizontal and vertical alignment of content in
the TileBrush base tile
Viewbox, Viewport, ViewboxUnits, and
ViewportUnits properties
Allow you to focus on any part of the image or
choose specific scale factors
TileMode property
50
ImageBrush
Live Demo
Pen
A Pen is always
based on a brush
Accessed through Stroke property
Describes how a shape is outlined
Important properties
Thickness and DashArray properties
<Rectangle Stroke="Black" StrokeThickness="5"
StrokeDashArray="10 1 3 1" />
<Rectangle Stroke="Black" StrokeThickness="5"
StrokeDashArray="6 1 6" />
52
Transformations
Transform Classes
TranslateTransform – displaces
the
coordinate system by some amount
RotateTransform – rotates coordinate
system
Angle, CenterX, CenterY properties
<Button Width="180" Height="60" Canvas.Left="100"
Canvas.Top="100">I'm rotated 35 degrees
<Button.RenderTransform>
<RotateTransform Angle="35"
CenterX="45" CenterY="5" />
</Button.RenderTransform>
</Button>
54
Transform Classes
ScaleTransform – scales the coordinate
system up or down
ScaleX, ScaleY, CenterX, CenterY properties
SkewTransform – warps
your coordinate
system by slanting it a number of degrees
AngleX, AngleY, CenterX, CenterX
MatrixTransform – modifies the coordinate
system using matrix multiplication
Matrix property
55
Transformations
Live Demo
XAML-Based
Animation
Animation
WPF and Silverlight
perform time-based
animation with Storyboard
Uses a property-based animation model
E.g. modify the value of a property over an
interval of time
To animate a property
you need to have an
animation class
To modify the color from some value to
another, use the ColorAnimation class
To modify a property, use DoubleAnimation
58
Animation – Example
<Canvas>
<Ellipse Width="200" Height="150" Fill="Orange"
x:Name="AnimatedEllipse">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard><Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
From="-50" To="300" Duration="00:00:0.88"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard></BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
59
Animation
Live Demo
WPF Graphics and Animations
Questions?
Exercises
1.
Write a program that visualize this figure.
Use only rectangles and RenderTransform.
2.
Draw the rectangles from the previous
exercise with rounded corners.
3.
Write a WPF program that visualize the figure below.
Use Polyline and Polygon
and
FillRule property.
4.
In the demo "Arc Segment" add rotation of 45
degrees (rotating the ellipses before slicing them).
5.
Draw few national flags (e.g. Bulgarian, German, …).
Make an animation that transits from one flag to
another by changing the opacity of the flags.
Exercises (2)
6.
Write a WPF program that visualize a
LinearGradientBrush with multiple colors (use
Offset property).
7.
Use TransformGroup to apply a ScaleTransform
and a RotateTransform to the RenderTransform
property of a TextBlock.
8.
Implement Storyboard animation that moves a
large blue rectangle from left to right and back. Add
a counterclockwise rotation to the animation. Finally
add a color-changing animation from blue to yellow.
Exercises (3)
9.
Implement a star field simulation in WPF. The
sky should be a Canvas panel with black
background. The stars should be light blue
circles with different size and transparency.
All stars should move from top to bottom
with different speed. Larger stars move faster
and are less transparent.
10. Add a space ship at the
bottom of the screen.
11. Make the ship move left
or right by keyboard keys.
64
Exercises
12.
Create a WPF application that shows
a circle, filled in orange color with black
borders.
13.
Create a WPF application that shows the text “Hello
world” with font family Consolas, size 100, and
color blue.
14.
Create a WPF application that shows three nested
rectangles with in different colors.
15.
Create a WPF application that shows a few
rectangles with rounded corners.
16.
Create a WPF application that shows all
fonts in "C:\Windows\Fonts".
65
Exercises (2)
17.
Create a WPF application that shows a
FlowDocument. The document should consist of
header (show in the center of the window, with
different font from the other text), a picture
(floating at the top left corner) and some other text.
18.
Create a WPF application that shows the lists below:
Use List and MarkerStyle, StartIndex properties.
Exercises (3)
19.
Create a WPF application that shows the table
below:
20.
Create a WPF application that shows the table
below: