Programmatically split a path into multiple paths

Question

I have a dynamically generated path whose data is composed of a PathGeometry composed of a PathFigure. This PathFigure contains a bunch of line segments. So the overall path is continuous, composed of straight lines. What is a good approach to split this path into many many different little paths? If you are curious, the reason I need to do this is to achieve a 'path fading away' effect, and there doesn't seem to be another way to do this.

So I want to take a path, and split it into many different little paths, and then I will set the opacity of the first little path to 0, and the last little path to 1, and interpolate for everything in between. Also, I could use this to make the tail of the path small, and interpolate up to the head of the path, which is big. There are many uses - I need a way to do this for my application.

Answer 1

See GradientPath by Charles Petzold it is implemented similar to how you describe and should be easy to tweak if you want to add support for altering the width of the path.

Answer 2

Rather than splitting up the path, it sounds like you may be able to simply use a linear gradient brush for the stroke color of the path to accomplish the same effect of your path fading. For example, try setting the brush below on your path.

In Xaml:

        <Path.Stroke>
            <LinearGradientBrush>
                <GradientStop Color="#00000000" Offset="0.0"/>
                <GradientStop Color="#FF000000" Offset="1.0"/>
            </LinearGradientBrush>
        </Path.Stroke>

In C#:

        var brush = new LinearGradientBrush();
        brush.GradientStops.Add(new GradientStop(new Color { A = 0, R = 0, B = 0, G = 0 }, 0.0));
        brush.GradientStops.Add(new GradientStop(new Color { A = 255, R = 0, B = 0, G = 0 }, 1.0));
        this._path.Stroke = brush;

Also, to address the original question, whether or not the above is what you're looking for, you have a couple of options to split up the Path. Since you know the Data is a PathGeometry composed of PathFigures, you can simply programatically access the segments and create more Path objects. For layout, because each Path itself is a new UIElement whose parent has to measure and arrange it, you need to put all the new Paths into a layout panel that will keep them in the same relative position.

I think there are several ways you could go about this, but one way to absolutely position them back together is to simply lay them out on a canvas with their Canvas.Top and Canvas.Left (or .Right, .Bottom depending on how you're laying them out) set to the relative offsets of the beginning of each segment in the path, and adjust the points so that they are relative to the new upper left corner of the new Path. For example, this

    <Path Stroke="Black">
        <Path.Data>
            <PathGeometry>
                <PathFigure>
                    <LineSegment Point="10,10"/>
                    <LineSegment Point="20,60"/>
                    <LineSegment Point="70,60"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

can become something like

    <Path Stroke="Black">
        <Path.Data>
            <PathGeometry>
                <PathFigure>
                    <LineSegment Point="10,10"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Black" Canvas.Top="10" Canvas.Left="10">
        <Path.Data>
            <PathGeometry>
                <PathFigure>
                    <LineSegment Point="10,50"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Black" Canvas.Top="60" Canvas.Left="20">
        <Path.Data>
            <PathGeometry>
                <PathFigure>
                    <LineSegment Point="50,0"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

It should be clear how you may do this by constructing several Path's given the PathGeometry object from C# as well, as it sounds like you may not be doing this in XAML from your question. Let me know if it isn't though and I can elaborate more.