Home/ Questions/Q 7169867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T15:05:51+00:00

I’m need to create this shape in WPF. First, I thought is a path,

  • 0

I’m need to create this shape in WPF. First, I thought is a path, but the lines inside shows is a 3D shape.

How can I draw this shape including the lines?

Thanks a lot.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The outside/outline of your shape can be drawn pretty simply with Path and Ellipse objects. The top face of the cylinder can also be drawn with a number of lines (as Path objects) in a grid. You can just draw them so they all extend outside the top ellipse and use the top ellipse as a Mask to trim them.

    The vertical lines in the body of the cylinder are a little bit more complicated. Their coordinates can be determined by the following formula, assuming the left edge of the cylinder is at x=0 and the point where the left edge of the cylinder meets the left edge of the ellipse is y=0:

    For i = 0 to NumberOfDivisions
  HorizontalPosition = CircleRadius - (cos(pi/NumberOfDivisions * i) * CircleRadius)
  TopOfLine = sin(pi/NumberOfDivisions * i) * CircleRadius * 0.5 //The 0.5 assumes that the ellipse will only be half as tall as it is wide.
  BottomOfLine = TopOfLine + HeightOfCylinder
  //draw vertical line where:
  //X1=HorizontalPosition, Y1=TopOfLine
  //X2=HorizontalPosition, Y2=BottomOfLine
Next

    where NumberOfDivisions + 1 is equal to the number of lines that you want to show up on the cylinder.

    MSDN has some good examples for getting started with the Path class.

    If all you need is just a way to represent a 3D-looking cylinder, without the gridlines, a linear gradient brush and 2 path objects will do the trick:

        <Canvas  >
        <Path Width="111" Height="113.5" Canvas.Left="0" Canvas.Top="12.5" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 177,190C 176.999,196.903 152.375,202.5 122,202.5C 91.6246,202.5 67.0006,196.903 67,189.979L 67,90L 177,90L 177,190 Z ">
            <Path.Fill>
                <LinearGradientBrush StartPoint="-0.00454615,0.5" EndPoint="1.00455,0.5">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#FF28A528" Offset="0"/>
                        <GradientStop Color="#FF63B963" Offset="0.152943"/>
                        <GradientStop Color="#FF9FCE9F" Offset="0.362069"/>
                        <GradientStop Color="#FF006C00" Offset="0.991379"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>
        <Path Width="111" Height="26" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF2CF72C" Data="F1 M 122,77.4999C 152.376,77.4999 177,83.0964 177,89.9999C 177,96.9035 152.376,102.5 122,102.5C 91.6244,102.5 67.0001,96.9035 67.0001,89.9999C 67.0001,83.0964 91.6245,77.4999 122,77.4999 Z "/>
    </Canvas>

    enter image description here

    EDIT
    Ok, this questions intrigued me enough that I went to the trouble of writing a complete article for it on CodePoject, along with the source code for a simple project to draw the solution. Normally, I wouldn’t go to that much trouble, but this was a nice simple project for me to start learning C#.

    • 0