WPF Graphics and

Animations
2D and 3D Graphics and Animations

c ad e my.t e le r ik .com/
http://a
Doncho Minkov
Technical Trainer
http://www.minkov.it
Telerik Software Academy
academy.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 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 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
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
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 WPFs
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
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 doesnt provide any
properties for setting its location
The location is determined by the
container (e.g. Canvas, StackPanel,
<Canvas>
FlowPanel, )
<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
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 line between two
points
Controlling the location

X1 and Y1 define the start point,

and X2 and Y2 determine the end
<StackPanel Orientation="Vertical">
point
<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
Polylines
Polygon always draws a closed
<Polyline Fill="Orange" Stroke="Blue"
shape
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 Bzier 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.interact-
sw.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 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
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>
59
</Canvas>
Animatio
n Live Demo
 WPF Graphics and
? Animations
?
?
?

?
?

?
? ?

Questions?
?

?
?
?

?
?
? ?
?
?

, BG Coder - - online judge

,

http://academy.teler
ASP.NET - , , C#, .NET, ASP.NET
ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC
SEO - ,
, iPhone, Android, W P7, PhoneGap
, HTML, CSS, JavaScript, Photoshop -
free C# book, C#, Java, C# -
" "
" cloud " C# , ,
 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
 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
 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
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
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:
 Exercises (3)
19. Create
a WPF application that shows
the table below:

20. Create
a WPF application that shows
the table below:
 Free Trainings @ Telerik
Academy
Desktop Applications with C# and
WPF
academy.telerik.com/
Telerik Software Academy
academy.telerik.com
Telerik Academy @ Facebook
facebook.com/TelerikAcademy
Telerik Software Academy Forums
forums.academy.telerik.com