#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 , , , , , ,

#560 – Using a Radial Gradient to Create a 3D Effect

May 17, 2012 Leave a comment

You can use a radial gradient in WPF to create a 3D effect on a shape.  In the example below, we set up a gradient on a circle (Ellipse shape) to make the circle look like a 3D sphere.

Start by drawing a simple circle (Ellipse).

Now specify a radial gradient for the Fill property.

Next, click on the Gradient tool and then slide the radial gradient off-center, relative to the ellipse.

Finally, adjust the gradient so that the center starts out white and fades to a darker color at the edge of the gradient.  You can also enlarge the gradient so that its outer edge lines up with the outer edge of the ellipse.

Here’s the final result:

Filed under Brushes Tagged with , , ,

#555 – Creating a Radial Opacity Mask

May 10, 2012 Leave a comment

You can define an opacity mask on a user interface element to cause the opacity to change across the element, depending on the mask.  The opacity mask is a brush, where the alpha channel at each point in the brush is used to define the opacity at each point on the element.

You will typically use either a linear or a radial gradient for an opacity mask, since a gradient brush allows you to create a range of alpha values across the brush.

You can use a radial gradient brush as the opacity mask to fade out the edges of a user interface element.  To start with, select a gradient brush for the OpacityMask property.

Change the gradient to be a radial gradient.

Select the outer gradient stop and set its alpha value to be transparent.

Finally, adjust the gradient stops to get the effect that you want.

Filed under Blend Tagged with , , , , ,

#533 – Using the Gradient Tool to Modify a Radial Gradient

April 10, 2012 1 Comment

You can use the Gradient Tool in Blend to adjust a radial gradient, as well as a linear gradient.

Below is a radial gradient that transitions from a darker green at the center of the region to a light green at the outside of the circle.

		<Border.Background>
			<RadialGradientBrush RadiusY="0.496" RadiusX="0.496">
				<GradientStop Color="#FF239D23"/>
				<GradientStop Color="#FFABD2AB" Offset="0.762"/>
				<GradientStop Color="#FFD9F1D9" Offset="1"/>
			</RadialGradientBrush>
		</Border.Background>

When you click on the Gradient Tool, you’ll see an arrow appear in Blend that represents the gradient.

As with linear gradients, you can click and drag any of the gradient stops, represented by the small circles on the arrow.  This will change the point on the radial line at which the gradient achieves the color specified for that gradient stop.

The origin of a radial gradient defaults to the center of the control.  You can change this origin by dragging the tail end of the arrow.





				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
			


				


					
#230 – Changing a Radial Gradient as Mouse Moves Over a Control


					

						

							February 27, 2011
																						2 Comments
																				

					


					
Here’s an example of one way to change a radial gradient at runtime, based on mouse movements.


The radial gradient is defined in the XAML:


		<Button x:Name="btnActiveGradient" Content="Click Me" Width="120" Height="30" Margin="30"
			MouseMove="btnActiveGradient_MouseMove"
			MouseLeave="btnActiveGradient_MouseLeave"
			Style="{DynamicResource ButtonStyle1}" >
			<Button.Background>
				<RadialGradientBrush x:Name="gradRadial" RadiusX="0.25">
					<GradientStop Color="AliceBlue" Offset="0.0"/>
					<GradientStop Color="LightSteelBlue" Offset="1.0"/>
				</RadialGradientBrush>
			</Button.Background>
		</Button>



We also need to disable the default rendering of the button while the mouse is over it.  We can do this by changing the RenderMouseOver property of the ButtonChrome object–found in the button’s control template–to False.


Finally, we add some code to the button’s MouseMove and MouseLeave events, to change the gradient’s origin and center as we move the mouse.


        private void btnActiveGradient_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            Point pt = Mouse.GetPosition(btnActiveGradient);
            gradRadial.GradientOrigin = new Point(pt.X / btnActiveGradient.Width, pt.Y / btnActiveGradient.Height);
            gradRadial.Center = gradRadial.GradientOrigin;
        }

        private void btnActiveGradient_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            gradRadial.GradientOrigin = new Point(0.5, 0.5);   // Default
            gradRadial.Center = gradRadial.GradientOrigin;
        }







				


				

					

						Filed under Graphics
						Tagged with , , , , 					

				


			


		
			


				


					
#219 – Changing the Radius of a Radial Gradient


					

						

							February 16, 2011
																						Leave a comment
																				

					


					
By default, the radius of a radial gradient is always half of the height and width of the control.  In other words, the gradient will extend exactly to the edge of the control.  In the example below, the gradient goes from white to dark blue and reaches dark blue at the edges of the ellipse.




We can change the radius of the gradient using the RadialGradientBrush.RadiusX and RadiusY properties.  The default value for both is 0.5, indicating that the gradient takes 1/2 the height or width of the circle to reach the final color.


If we change the radius to 0.25, we reach the final color of the gradient halfway out to the edge of the ellipse:


	<RadialGradientBrush x:Name="grad" RadiusX="0.25" RadiusY="0.25">
		<GradientStop Color="White" Offset="0.0"/>
		<GradientStop Color="LightBlue" Offset="0.5"/>
		<GradientStop Color="DarkBlue" Offset="1.0"/>
	</RadialGradientBrush>







				


				

					

						Filed under Graphics
						Tagged with , , , 					

				


			


		
			


				


					
#218 – Defining a Radial Gradient’s Focal Point


					

						

							February 15, 2011
																						1 Comment
																				

					


					
By default, the focal point of a radial gradient–the spot where the gradient starts–is at the center of the control in which it’s located.




You can specify a different focal point using the RadialGradientBrush.GradientOrigin property.  The GradientOrigin property specifies the start of the gradient in 2D (X,Y) space, with X ranging from 0.0 (left side of control) to 1.0 (right side) and Y ranging from 0.0 (top) to 1.0 (bottom).


Here’s the same gradient as above, with the origin at (0.2,0.4).






				


				

					

						Filed under Graphics
						Tagged with , , , , , 					

				


			


		
			


				


					
#217 – Using a Radial Gradient Brush


					

						

							February 14, 2011
																						1 Comment
																				

					


					
With a linear gradient, the color changes along the edge of a straight line, as it sweeps across a control.  You can also define a radial gradient, where the color change radiates out in a circle.


You define a radial gradient using a RadialGradientBrush, which you can use wherever a brush is expected.


In the following example, we draw an Ellipse and fill it with a radial gradient.  The gradient starts out white in the center of the circle and then changes to light blue and then dark blue as it expands out to the edges of the circle.  Note that, like a linear gradient brush, we specify a series of gradient stops, where the color changes.


		<Ellipse Height="200" Width="200">
			<Ellipse.Fill>
				<RadialGradientBrush>
					<GradientStop Color="White" Offset="0.0"/>
					<GradientStop Color="LightBlue" Offset="0.5"/>
					<GradientStop Color="DarkBlue" Offset="1.0"/>
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>







				


				

					

						Filed under Graphics
						Tagged with , ,