5. xaml & wpf - wpf graphics-and-animations
DESCRIPTION
WPF Graphics and AnimationsTelerik Software Academy: http://academy.telerik.com/school-academy/meetings/details/2012/02/02/desktop-applications-csharp-wpfThe website and all video materials are in Bulgarian.Introduction to WPF GraphicsWPF Drawing ModelResolution IndependenceBasic Graphics ObjectsBasic ShapesBitmaps, Images and EffectsBrushes and PensTransformationsAnimationTRANSCRIPT
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
http://academy.telerik.com/
2D and 3D Graphics and Animations
WPF Graphics and Animations
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. Animation2
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
5
<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>
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
9
<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; }}
WPF Drawing ModelLive 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)
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
<Button> <Button.LayoutTransform> <ScaleTransform ScaleX="2" ScaleY="2" /> </Button.LayoutTransform> ... <!--The result is--></Button> <!--without scaling--> <!--with scaling-->
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, …)
22
<Canvas> <Rectangle Fill="Yellow" Stroke="Black" Canvas.Left="30" Canvas.Top="10" Width="100" Height="20" /></Canvas>
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
24
<Ellipse Width="100" Height="50" Fill="Yellow" Stroke="Black" />
<!--The result is-->
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 point
25
<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>
Ellipses and LinesLive Demo
Polyline Draw a connected series of line segments
Points property Containing a list of coordinate pairs
27
<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-->
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
28
<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-->
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
29
<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-->
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
31
<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>
PathLive 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
34
<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>
ArcSegmentLive 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
Using relative URL37
<Image Source="http://www.interact-sw.co.uk/images/M3/BackOfM3.jpeg" />
<Image Source="/MyFunnyImage.jpeg" />
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
38
<Image Source="/MyFunnyImage.jpeg" Stretch="Fill" Opacity="0.5" />
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
40
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 -->
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
42
<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-->
Bitmap Effects (2)
The built-in effects BevelBitmapEffect BitmapEffectGroup BlurBitmapEffect …
43
<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>
Bitmap EffectsLive Demo
Brushes and Pens
SolidColorBrush SolidColorBrush uses one color across the whole area being painted It has just one property – Color
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
<Rectangle Fill="Yellow" Width="100" Height="20" />
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)
Each GradientStop has an Offset property Enables the fill to pass through
multiple colors 48
<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>
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 property50
ImageBrushLive 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
52
<Rectangle Stroke="Black" StrokeThickness="5" StrokeDashArray="10 1 3 1" /><Rectangle Stroke="Black" StrokeThickness="5" StrokeDashArray="6 1 6" />
Transformations
Transform Classes
TranslateTransform – displaces the coordinate system by some amount
RotateTransform – rotates coordinate system Angle, CenterX, CenterY properties
54
<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>
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
TransformationsLive 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
59
<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>
AnimationLive Demo
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
WPF Graphics and Animations
Exercises1. 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
Exercises12. 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:
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