Neon/Glow effect in C#/WPF
Asked Answered
M

1

5

I'd like to create a neon(-like) effect in wpf/c#, to be used on a series of polylines.

The closest i come to this was using blur (not very close, but eh), but the it dims the colors too dark and I have no idea how to make even that glow. Is there an effect close to this, or I should try to write a shader for it somehow?

I'd like to do this for a school project and i'd rather not turn in a bunch of outside libraries for a small amount of self-written code. Also about google: most of the stuff i found were pretty much using blur/dropshadow to create these fading colors, not something that actually has this neon-y effect.

Majunga answered 16/9, 2014 at 14:30 Comment(6)
Perhaps this is what you're looking for: #5251562Behl
The DropShadowEffect class is what you're after... you just need to pick your colours carefully. It is entirely possible though, as I have previously created a digital LED clock face with bright, glowing digits on it.Kazan
I cant get such a strong effect out of Dropshadow, and Polyline::Effect does not seem to take bitmap effects as an argument.Majunga
<DropShadowEffect ShadowDepth="0" Color="#CF5DFFF8" BlurRadius="10" />Kazan
@Kazan Wish larger blur radiuses would be noticable, but this indeed works. Thank you.Majunga
Wish larger blur radiuses would be noticeable... yeah, I noticed that too. It is disappointing.Kazan
W
10

As others have already suggested you should use DropShadowEffect to achieve a neon-like effect:

  <Canvas Height="120" Width="280" Background="Black">
  <Polyline
    Points="10,110 60,10 110,110 105,110 60,18 15,110 10,110"
    Stroke="#BB0000"
    Fill="#FF0000"
    StrokeThickness="2" >
    <Polyline.Effect>
        <DropShadowEffect Color="#FF9999" ShadowDepth="0" Direction="0" BlurRadius="25"  />
      </Polyline.Effect>
    </Polyline>

  <Polyline
    Points="10,105 110,105 110,10 115,10 115,110 10,110 10,105"
    Stroke="#00BB00"
    Fill="#00FF00"
    StrokeThickness="2"
    Canvas.Left="150">
    <Polyline.Effect>
        <DropShadowEffect Color="#99FF99" ShadowDepth="0" Direction="0" BlurRadius="25"  />
      </Polyline.Effect>
    </Polyline>
  </Canvas>

Unfortunately there is no built-in effect which is specifically designed to create neon effect, but by tweaking the colors you can create quite good (or at least acceptable) results (especially for a school project...):

enter image description here

Wintry answered 16/9, 2014 at 15:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.