How in Blend to make a shape have blurry edges?

Question

I have one rectangle on top of another.

They have sharp edges.

I want them to blur together.

It seems there is a way to blur them with "Bitmap Effect" but I'm not finding that in my Rectangle property search in Blend.

How can I blur the edges of one rectangle so the two don't have sharp edges where they touch?

Answer 1

Add a border that has translucency.

Edit:

I was thinking that opacity would give you the desired affect. There is OpacityMask and BorderBrush to which you can supply an ImageBrush that might achieve the more advanced effect you are after.

Answer 2

In the Rectangle properties window, go down to the Miscellaneous section and their is an Effect property. Select New and you can select a BlurEffect

You need to be aware that this can have a negative impact on performance, particularly if the PC doesn't have a good graphics card. Also, at the moment, the BitmapEffect is not supported in Silverlight, so you would have to blur it in another graphics program and just display an image.

The resulting XAML looks like this:

 <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" HorizontalAlignment="Left" Margin="56,172,0,0" VerticalAlignment="Top" Width="107" Height="36">
  <Rectangle.Effect>
   <BlurEffect/>
  </Rectangle.Effect>
 </Rectangle>

Answer 3

If you have not found this effect yet in Blend do the following.

1. Select your rectangle in Blend as the current object with focus.
2. From the Properties Tab, select the expander down arrow under the Appearance tab. This will be just under the StrokeThickness property.
3. The first item in the expanded area is BitmapEffect. Using the combobox to the right of this, select Blur from the combobox drop down.
4. You can now adjust Blur by using either Gaussian or Box and adjusting the Blur Radius.