-1

I was looking around for some answers but couldn't find anything. I want to know if there's a way to make a custom stroke for an ellipse. I have a bunch of ellipses drawn on a canvas that, when clicked, the clicked ellipse is highlighted with a green stroke. I would like to make it so that there is a small black line INSIDE of the green stroke going around, to make things more visible. Is this possible to do?

pfinferno
  • 1,779
  • 3
  • 34
  • 62

1 Answers1

1

The "simplest" way I know to do that is to simply apply a RadialGradientBrush to the Ellipse's Stroke, putting your black color at Offset 0.5 and green colors just around.

The problem being that "just around" depends on your ellipse's stroke thickness; you will have to modify your RadialGradientBrush's RadiusX and RadiusY to accomodate it (as a side note, a StrokeThickness of 7 requires a radius of ~0.95 to be centered, while a thickness of 3 needs a radius of ~0.975).

Another issue is about making your inner circle looks thin enough, play with the green GradientStops's Offsets until you're satisfied.

It should produce a XAML looking like this:

<Ellipse StrokeThickness="3">
    <Ellipse.Stroke>
        <RadialGradientBrush RadiusX="0.975" RadiusY="0.975">
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Color="Green" Offset="0.505"/>
            <GradientStop Color="Green" Offset="0.495"/>
        </RadialGradientBrush>
    </Ellipse.Stroke>
</Ellipse>
Kilazur
  • 3,089
  • 1
  • 22
  • 48