WPF Points to path geometry

Question

I have a canvas 150 height 500 width. In this canvas I wan to add some points to generate a line. Generating this line is not an issue. But I want to generate a line that's curved between the connecting points to get a smooth curve. Also the area below the line must be filled with a color like the example below.

To loop the points I use the following simple code:

Polyline line = new Polyline();

PointCollection collection = new PointCollection();

foreach (Point p in points)
{
    collection.Add(p);
}
line.Points = collection;
line.Stroke = new SolidColorBrush(Colors.Black);
line.StrokeThickness = 3;
canv.Children.Add(line);

How can I solve this?

Answer 1

You can use a

PolyBezierSegment

to do that for example

 <Canvas>
        <Path Stroke="#FF56C0E9" StrokeThickness="10" Fill="#FFC0E5FC" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="100,80" IsFilled="True">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <PolyBezierSegment Points="30 300,550 30,10 330" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

The above code generate a curve something like this

You have to set IsFilled Property of PathFigure to True

The same Can be done from code behind to for more details Check here

Answer 2

I realize the OP asked for a smooth shape but, for those looking for a non-smooth alternative:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Viewbox>
        <Path Stroke="Cyan" StrokeThickness="1" Fill="CornflowerBlue">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="100,100" IsClosed="True">
                            <LineSegment Point="100,30" IsStroked="False" />
                            <LineSegment Point="110,40" />
                            <LineSegment Point="120,70" />
                            <LineSegment Point="130,50" />
                            <LineSegment Point="140,10" />
                            <LineSegment Point="150,50" />
                            <LineSegment Point="160,10" />
                            <LineSegment Point="170,30" />
                            <LineSegment Point="180,40" />
                            <LineSegment Point="190,60" />
                            <LineSegment Point="200,30" />
                            <LineSegment Point="200,100" IsStroked="False"/>
                            <LineSegment Point="100,100" IsStroked="False"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Viewbox>
</Page>