0

I'm using the following code to draw Rectangle objects on Visual Layer. I was wondering if there is a way I can apply Glow effect to these Rectangles? And since there are lots of them, is there a way to apply the effect to the parent container?

DrawingContext.DrawRectangle(Brushes.Red, new Pen(), new Rect(New Point(0,0), new Size (10,10));

Update (Might be the answer to this)

I'm currently using this code:

var dropShadowEffect = new DropShadowEffect
{
    ShadowDepth = 0,
    Color = Colors.Lime,
    Opacity = 1,
    BlurRadius = 100
};
ColumnsLayer.Effect = dropShadowEffect;
Vahid
  • 5,144
  • 13
  • 70
  • 146
  • Glow effect to every rectangle or to the whole area which may be different if for example rectangles intersect? – dkozl May 20 '14 at 12:55
  • 1
    You might want to look drawing the same thing on two superimposed [DrawingVisuals](http://msdn.microsoft.com/en-us/library/ms742254.aspx), with with the appropriate color brushes, and adding a Blur Effect to the DrawingVisual that's lower in the z-order. – 15ee8f99-57ff-4f92-890c-b56153 May 20 '14 at 14:48
  • @dkozl The rectangles do not intersect. Look at it as columns in column plan. – Vahid May 20 '14 at 14:56
  • @EdPlunkett Will I have to draw rectangles on the blurred one too? – Vahid May 20 '14 at 14:57
  • Oops, I was so focused on the blur thing that I didn't even realize you should just be able to do a DropShadowEffect on the whole thing, without redrawing anything. If the background is transparent. But it's not going to show up well, and you want your BlurRadius to be a lot smallar or it'll be too diffuse to see -- try setting that to 4 or so. – 15ee8f99-57ff-4f92-890c-b56153 May 20 '14 at 15:13
  • White glow on a black background by that method is visible, barely. It might be worth your while to redraw the figures after all, with a much heavier strokethickness on the glow layer. – 15ee8f99-57ff-4f92-890c-b56153 May 20 '14 at 15:15

1 Answers1

1

Barring special requirements you didn't mention, there's probably no technical reason to do any of this in C#. Here's a XAML solution, using Path Markup Syntax to draw the figure.

A centered DropShadow effect just doesn't have enough visual punch to be noticeable; you need to get the glow area out beyond the edges of the figure. If you want to reproduce the characteristic Android blue-glow effect, you could do two glow paths, one with a heavy blur, and another with a 1 or 2 px blur radius and partial opacity. 

<Canvas>
    <!-- Offset the whole thing so you can see the whole glow. -->
    <Canvas.RenderTransform>
        <TranslateTransform X="20" Y="20" />
    </Canvas.RenderTransform>
    <!-- You could also have a PathGeometry MyShape property on your 
         ViewModel and bind to that.
    -->
    <Canvas.Resources>
        <PathGeometry x:Key="MyShape">M 0,0 L 10,0 10,10 0,10 Z</PathGeometry>
    </Canvas.Resources>
    <!-- Glow path -->
    <Path Data="{StaticResource MyShape}"
          StrokeThickness="4"
          Stroke="Lime"
          Fill="Lime"
          >
        <Path.Effect>
            <BlurEffect Radius="6"/>
        </Path.Effect>
    </Path>
    <!-- Figure path -->
    <Path Data="{StaticResource MyShape}"
          StrokeThickness="0"
          Fill="Red"
          >
    </Path>
</Canvas>

If manual drawing in C# with the visual layer is an absolute requirement, the above can be reproduced that way without too awfully much hassle, except that you can't do everything directly on ColumnsLayer, because you need to overlay something with no effect on top of something with a blur effect.

15ee8f99-57ff-4f92-890c-b56153
  • 36,786
  • 7
  • 62
  • 114
  • Thanks Ed, I guess this is the nearest thing to what I have in mind. – Vahid May 20 '14 at 15:49
  • 1
    Unfortunately, doing this programmatically is just bound to be more work in WPF, since they obsoleted PushEffect on DrawingContext. In general, the best answer with anything visual in WPF tends to be Do It in XAML. – 15ee8f99-57ff-4f92-890c-b56153 May 20 '14 at 15:57