CODEWITHSUNDEEP
c#wpfglow
Vahid
Vahid

Reputation: 5444

Apply Glow effect to an object drawn on visual layer in WPF

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;

Upvotes: 0

Views: 2598

Answers (1)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37059

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.

Upvotes: 1

Related Questions