How to draw this path in WPF?

Question

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.

Answer 1

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>

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#.