Everything a WPF Developer Needs to Know, in Bite-Sized Chunks
May 25, 2012 Leave a comment
Like other elements, you can set various properties of an effect in Blend using the Properties panel.
In the example below, we’ve added a DropShadowEffect to a Label. If you select the effect in the XAML editor or the Objects and Timeline panel, you’ll see several properties that we can set for this effect.
For example, we can increase the ShadowDepth, so that the shadow appears further away from the Label.
May 24, 2012 Leave a comment
When you’re working in Blend and have some scrollable content in a ScrollViewer, you won’t be able to see all of the content at design time because Blend doesn’t let you scroll the ScrollViewer.
This can be frustrating, since you want to see your content at design time. In the example above, I have a series of Image controls in a vertical StackPanel, but I can only see the first couple.
The trick to working around this limitation is to put your content into a UserControl and then put that UserControl into the ScrollViewer. You can then scroll the contents of the UserControl on the artboard.
Create a UserControl.
Move your content into the new UserControl.
Remove design-time width and height.
Go back to the window that contains your ScrollViewer. Find the UserControl in the Assets panel and drag it into the ScrollViewer.
You can now scroll at design time.
May 23, 2012 Leave a comment
An effect in WPF changes the appearance of a visual element. The .NET Framework comes with only a couple of effects, but you can find a few other third party effects on the web.
Here are some of the effects from the Pixel Shader Effects Library:
May 22, 2012 1 Comment
In addition to the two effects that come with the .NET Framework, you can get access to a number of other effects when you download and install the Expression Blend SDK for .NET 4.
Once you install the SDK, you’ll see the new effects show up in the Effects folder of the Assets panel.
The effects include:
May 21, 2012 3 Comments
You can set the value of the Effect property for any control deriving from UIElement. An effect is a two-dimensional graphical effect applied to the control when it is rendered.
To apply an effect to a control in Blend, start by left-clicking on the Effects folder in the Assets panel.
The .NET Framework comes with two pre-defined effects, located in PresentationCore–BlurEffect and DropShadowEffect. (The other effects shown above come from the Expression SDK for .NET 4). You can drag either of these effects onto a control on the artboard, or a control listed in the Objects and Timeline panel.
Two Label controls, before adding effects:
After adding effects:
Corresponding XAML:
<Label Content="Drop Shadow Effect" FontFamily="Cooper Black" FontSize="48" Margin="20,20,20,5" Foreground="#FF047800" HorizontalAlignment="Center"> <Label.Effect> <DropShadowEffect/> </Label.Effect> </Label> <Label Content="Blur Effect" FontFamily="Cooper Black" FontSize="48" Margin="20,5,20,20" Foreground="#FF047800" HorizontalAlignment="Center"> <Label.Effect> <BlurEffect/> </Label.Effect> </Label>
May 18, 2012 2 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>
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:
May 16, 2012 Leave a comment
You can use an opacity mask with simple shapes along with a gradient to get a style that looks like a gradient applied to a paper cutout. For example, you might want the following cloud-like effect.
To do this, start with a Rectangle and use a linear gradient for its Fill property.
<Rectangle Height="400" Stroke="Black" Width="600">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFBFBFB" Offset="0.504"/>
<GradientStop Color="#FFD6E1EA" Offset="0.734"/>
<GradientStop Color="#FF6EB5F5" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Now create an image with the shape of the clouds, using an opaque foreground (black in this example) and a transparent background (shown as checkerboard here).
Finally, use the new clouds image as an ImageBrush for the OpacityMask of the Rectangle.
<Rectangle Height="400" Stroke="Black" Width="600">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFBFBFB" Offset="0.504"/>
<GradientStop Color="#FF6EB5F5" Offset="1"/>
<GradientStop Color="#FFD6E1EA" Offset="0.734"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<ImageBrush ImageSource="Images\CloudsMask.png"/>
</Rectangle.OpacityMask>
</Rectangle>
May 15, 2012 1 Comment
When defining a gradient fill in Blend, the Offset property of each gradient stop indicates the location of the gradient stop along the gradient line, from StartPoint to EndPoint.
In the example below, the gradient runs from white at the top of the control to blue at the bottom.
<Button Content="Gradient Fill" HorizontalAlignment="Center" Padding="15,10" Margin="20"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="White" Offset="0"/> <GradientStop Color="Pink" Offset="0.75"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Button.Background> </Button>
You can easily reverse the order of the gradient stops by clicking on a button in Blend. The button is located on the color editing panel.
If we reverse the gradient stops for the example above, the offsets are reversed and the gradient flips upside down.
<Button Content="Gradient Fill" HorizontalAlignment="Center" Padding="15,10" Margin="20"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="White" Offset="1"/> <GradientStop Color="Pink" Offset="0.25"/> <GradientStop Color="Blue"/> </LinearGradientBrush> </Button.Background> </Button>
May 14, 2012 1 Comment
You’ll typically use a gradient brush as an opacity mask, to change the opacity of a control gradually.
You can also use an image as an opacity brush, making various regions of the target control opaque or transparent depending on the opacity at the same spot in the image.
Below, I’ve created a smiley face image in Paint.NET. I’ve made the background of the image transparent (shown in Paint.NET as a checkerboard).
Next I create a WPF project with a simple Image control.
<Image Source="Images\Rocks2Small.jpg" Width="400"/>
Now we specify an OpacityMask for this Image. But instead of using a LinearGradientBrush or RadialGradientBrush, we use an ImageBrush–a brush created from an image.
<Image Source="Images\Rocks2Small.jpg" Width="400">
<Image.OpacityMask>
<ImageBrush ImageSource="Images\FaceMask.png"/>
</Image.OpacityMask>
</Image>
Using the second image as the opacity mask for the first means–the first image will be transparent wherever the second image is transparent.
