How can you outline an ellipse without using stroke property?

Question

What I really want is a way to have a negative stroke Thickness value on a WPF shape such as an ellipse, so that the stoke outline paints outwards towards LEFT and TOP of Shape, rather than inside of the shape, over writing my text when I make the thinkness of the stroke too thick... I want the radius of my ellipse to stay constant, but the stroke to grow outwards with increased thinkness, and the LEFT, TOP placement of the shape to remain contant with the inner fill staying the same size and not getting covered up by stroke as it is increased in size.

I tried DropShadowEffect, but its kind of too blurry and not well defined enough...and looks kind of messy... really I just want a solid line going around the outside of the shape...

As you can see from attached picture above, I tried to put shadow around two the ellipses using this code below. the problem is that I want it to be a solid color around the outside like a scaletransform of another ellipse of a different color.

var e = new Ellipse();
DropShadowEffect effect = new DropShadowEffect();
effect.Color =Colors.Orange;
effect.Direction = 0;
effect.BlurRadius = 30;
effect.ShadowDepth = 4;
effect.Opacity=0;
e.Effect = effect;

t.Text   = string.Format("abc");
t.Measure(new Size(gwin.XStep, gwin.YStep));
t.Arrange(new Rect(t.DesiredSize));
e.StrokeThickness = 2;              
e.Stroke  = Brushes.Black;      
canvas.Children.Add(e);
canvas.Children.Add(t);

Another possible direction towards solving the problem:

<Ellipse RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>  
</Ellipse>

Convert to c# code and place one scaletransform ellipse centered inside another scaled transform ellipse of different colors... not sure how to set it up though.

Solution:

Based on suggestion below. I tried creating a grid, setting the width and height of the grid to the size of my ellipse, then adding two ellipses to the grid with different colors and one with a margin set to -10. and it works perfectly ... just need to place the larger ellipse with margin -10 behind the other ellipse when adding it to the grid...here's what it looks like now..

Solution is in here somewhere:

        g    = new Grid();
        e    = new Ellipse();
        h    = new Ellipse();
        t    = new TextBlock();
        t.HorizontalAlignment = HorizontalAlignment.Center;
        t.VerticalAlignment   = VerticalAlignment.Center;
        t.FontWeight          = FontWeights.ExtraBold;
        g.Children.Add(h);
        g.Children.Add(e);
        g.Children.Add(t);          
        gwin.canvas.Children.Add(g);
                t.Text = String.Format("{0}.{1}", x, y);
                g.Width  = gwin.XStep;
        g.Height = gwin.YStep;
        Canvas.SetLeft (g, gwin.X1 + gwin.XStep*x*2);
        Canvas.SetTop  (g, gwin.Y1 + gwin.YStep*y*2);           
        e.StrokeThickness = 2;              
        e.Stroke  = Brushes.Black;              

        h.Margin = new Thickness(-10);

Bizhan Bizhan · Accepted Answer · 2018-07-25T22:23:24

You can use double ellipses inside a grid overlaying each other like this:

<Grid Width="100" Height="100">
    <Ellipse Fill="Black"  Margin="-10"/>
    <Ellipse Fill="Red" />
</Grid>

The size of this compound is still 100x100 even though the first ellipse is bigger and rendered out of its boundaries.

You may also use a Path and then do this

How can you outline an ellipse without using stroke property?

2 Answers