There are various ways to show progress on status bar, with new trendy ways the user wants to see visual progress not only with the status text but with something more. Here is where WPF animation comes to picture.
I came across such a requirement where the operation is in process has to be notified to the user in terms of black arc rotating, this Is what I termed as Circular Progress Control. Off course circular progress control can be anything where the progress indication is circular (like ‘dancing lights’ arranged in round fashion).
First this was to develop the control which looks like
There are many ways to do this but on higher level there are two,
- Either to create an image
- Draw the control using WPF (uses vector graphics)
I was thinking to draw the control using path as it would have vector processing but I decided to read pros and cons. Following is what I understood (source http://msdn.microsoft.com/en-us/library/ms748373.aspx)
Vector Graphics
WPF uses vector graphics as its rendering data format. Vector graphics—which include Scalable Vector Graphics (SVG), Windows metafiles (.wmf), and TrueType fonts—store rendering data and transmit it as a list of instructions that describe how to recreate an image using graphics primitives. For example, TrueType fonts are outline fonts that describe a set of lines, curves, and commands, rather than an array of pixels. One of the key benefits of vector graphics is the ability to scale to any size and resolution.
Unlike vector graphics, bitmap graphics store rendering data as a pixel-by-pixel representation of an image, pre-rendered for a specific resolution. One of the key differences between bitmap and vector graphic formats is fidelity to the original source image. For example, when the size of a source image is modified, bitmap graphics systems stretch the image, whereas vector graphics systems scale the image, preserving the image fidelity.
The following illustration shows a source image that has been resized by 300%. Notice the distortions that appear when the source image is stretched as a bitmap graphics image rather than scaled as a vector graphics image.
Differences between raster and vector graphics
Thus the way to first step was clear, create the control using WPF, I decided to use Path geometry for this. WPF provides a number of ready to use “Shape” objects, Path is one of them. Each Shape object supports
- Stroke: Describes how the shape's outline is painted.
- StrokeThickness: Describes the thickness of the shape's outline.
- Fill: Describes how the interior of the shape is painted.
- Data properties: to specify coordinates and vertices, measured in device-independent pixels.
Path class enables us to draw complex shapes; we can describe the layout using geometry objects. Thus for our case we needed an arc, a thick arc. We can have two concentric circles and then use LinearGradientBrush to have two colors gradients in it, black and transparent. For all this we need to update Path’s Data and Fill property, such as.
<Path Stretch="Fill" Name="pathCircular">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
<EllipseGeometry Center="20,20" RadiusX="15" RadiusY="15"/>
</GeometryGroup>
</Path.Data>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.3" EndPoint="0.3,1">
<GradientStop x:Name="GradientStop1" Color="Black" Offset="0"/>
<GradientStop x:Name="GradientStop2" Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
Here in the path geometry we drew two circles using EcllipseGeometry which are concentric: this becomes the data for Path object. Now in order to get black and transparent color gradients we ‘Fill’ it construct a LinearGradientBrush with the colors and specify the start point and end point.
After this what we get is something like this,
So that’s it we have got the control we needed using vector graphics.
To animate it, in next post.
No comments:
Post a Comment