#561 – Drawing a 3D Donut Using a Radial Gradient

May 18, 2012 3 Comments

Here’s another visual effect that you can easily create in WPF and Blend, using a gradient.

Let’s say that you want to draw a ring or donut-shaped object that looks 3D.  You can start by using the Ellipse shape to draw a circle.

Next, set the Fill property of the Ellipse to use a radial gradient.  Define five gradient stops, as shown, and use the gradient tool to position them as shown.

For the hole in the middle of the donut, you can use an opacity mask.  Use a paint program to create an opaque circle that is the same size as the circle, but with a smaller transparent circle in its center.  (Trick: Run your app and screen capture what you have so far, then tweak it in a paint program).  Finally, set this image as the OpacityMask of the Ellipse.

<Ellipse.OpacityMask>
    <ImageBrush ImageSource="Images\Mask.png"/>
</Ellipse.OpacityMask>

Voila.

Advertisement

Filed under Graphics Tagged with , , , , , ,

#535 – Drawing Symmetrical Shapes in Blend

April 12, 2012 Leave a comment

Using the Shape Tool in Blend, you can draw a Rectangle, Ellipse or Line by left-clicking and dragging with the mouse.

If you hold the Shift key down while dragging with the mouse, you will be constrained to drawing symmetrical shapes–squares (symmetrical rectangle) or circles (symmetrical ellipse).

If you hold the Shift key down while drawing a Line, you’ll be limited to drawing lines at multiples of 15 degrees.  This makes it easier to draw lines at common angles.

If you hold down the ALT key while drawing any of these shapes, your starting mouse position will be used as the center point of the shape, rather than one corner.

Filed under Blend Tagged with , , , , ,

#534 – Drawing Shapes with the Shape Tools in Blend

April 11, 2012 Leave a comment

There are three shape tools in the Tools Panel in Blend that will let you draw shapes on your user interface.  They share an icon on the Tools Panel, so you can see them all by clicking and holding the left button down.

These tools allow you to draw the following elements:

  • System.Windows.Shapes.Rectangle
  • System.Windows.Shapes.Ellipse
  • System.Windows.Shapes.Path  (a path with a single line segment)

With a shape tool enabled, you can draw directly on the artboard with your mouse.

	<Canvas>
		<Ellipse Fill="#FFF4F4F5" Height="63" Canvas.Left="84" Stroke="Black" Canvas.Top="119" Width="133"/>
	</Canvas>

Filed under Blend Tagged with , , , , , ,