Brush only parts of an Ellipse in WPF

Question

I'm having trouble to find the best way to draw the below shape. I'm using the below code to draw an Ellipse on visual layer.

But how can I only brush the quarters? I think it can be done using LinearGradientBrush or RadialGradientBrush but I don't know how use it.

var cntrpoint = space.FlipYAxis(x2, y2);
dc.DrawEllipse(Brushes.Transparent, pen, cntrpoint, 30, 30);

enter image description here

score 3 · Accepted Answer · answered May 17 '14 at 10:03

3

Like this:

var geometry = new GeometryGroup();
geometry.Children.Add(new RectangleGeometry(new Rect(1, 0, 1, 1)));
geometry.Children.Add(new RectangleGeometry(new Rect(0, 1, 1, 1)));
var drawing = new GeometryDrawing(Brushes.Black, null, geometry);
var brush = new DrawingBrush(drawing);

dc.DrawEllipse(brush, pen, cntrpoint, 30, 30);

answered May 17 '14 at 10:03

Clemens

123,504
12
155
268

Thank you so much Clemens. Can you please tell me what `RectangleGeometry` is doing here? I'm having a hard time understanding that part. – Vahid May 17 '14 at 10:06
1

The two RectangleGeometries (of width and height `1`) fill the lower left and upper right quadrants of a 2x2 grid. Hence the (relative) coordinates `(1, 0)` and `(0, 1)`. – Clemens May 17 '14 at 10:10
This answer is really elegant. Thanks. – Vahid May 17 '14 at 10:12

score 1 · Answer 2 · edited May 23 '17 at 11:57

I found a solution to do it in XAML
(inspired by this post: https://stackoverflow.com/a/5670388/3047078):

<Image Width="200" Height="200" Margin="20">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>

          <GeometryDrawing Brush="Black">
            <GeometryDrawing.Pen>
              <Pen Brush="Black" />
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="100,0"/>
                    <ArcSegment Point="200,100"  SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="White">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="200,100">
                  <PathFigure.Segments>
                    <ArcSegment Point="100,200" SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="Black">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="100,200"/>
                    <ArcSegment Point="0,100" SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="White">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="0,100"/>
                    <ArcSegment Point="100,0" SweepDirection="Clockwise" Size="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Thanks Flat, it does the job but what I want is a solution that implements a `Brush`. I don't want to do it combining separate geometries. — Vahid, May 17 '14 at 09:59

score 1 · Answer 3 · answered May 17 '14 at 09:58

You can do this using DrawingBrush and GeometryDrawing

<Ellipse Width="300" Height="300" Stroke="DarkGray" StrokeThickness="1.5">
    <Ellipse.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Brush>
                        <RadialGradientBrush>
                            <GradientStop Color="Black" Offset="1.0" />
                            <GradientStop Color="White" Offset="1.0" />
                        </RadialGradientBrush>
                    </GeometryDrawing.Brush>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,50,50" />
                            <RectangleGeometry Rect="50,50,50,50" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Ellipse.Fill>
</Ellipse>

Output:

enter image description here

Thanks, I don't know how to adapt this to my situation. Cause I'm drawing the ellipse in code behind. — Vahid, May 17 '14 at 10:03

Brush only parts of an Ellipse in WPF

3 Answers3

Linked