CODEWITHSUNDEEP
wpfdata-bindingpathgeometryshapes
Michael Clausing
Michael Clausing

Reputation: 52

Databinding shapes and lines in WPF

I am working on an application that needs to be able to manipulate shapes and lines in WPF. My original thought was to databind a collection to ListBox and use Rectangles in the datatemplate, setting each of the fill properties to the image. This has worked well for the majority of shapes, except for circles and a few rectangles. Since re-sizing an image causes pixelation and the lines to change sizes, the result is less than stellar.

I have spent some time browsing SO and a few other sites regarding Path elements, but haven't found anything that really meets my needs. My guess is I will need to generate paths differently for each type of shape and databind them using a converter similar to Path drawing and data binding or use http://www.telerik.com/help/wpf/raddiagram-overview.html or similar rad tool.

My questions: Is there an easier way of accomplishing this or any other examples?

EDIT: I also need to be able to add text. Not sure how I can do that with a path...maybe a ContentControl?

Upvotes: 1

Views: 4502

Answers (1)

codekaizen
codekaizen

Reputation: 27429

You can draw all manner of shapes by databinding a Path.Data to a Geometry. You can generate the Geometry from a list of points. A converter is perfect for this adaptation.

For example, I draw spirals by databinding the Path.Data property to a StreamGeometry which I generate off of a list of points managed by the view model, and it works quite well for my needs:

// ViewModel ...
public class ViewModel 
{
    [Notify]
    public IList<Point> Points { get; set; }
}

// Converter ... 
public class GeometryConverter : IValueConverter
{
    public Object Convert(Object value, Type targetType, Object parameter, CultureInfo culture)
    {
        if (value == null || value == DependencyProperty.UnsetValue)
        {
            return value;
        }

        var points = (IList<Point>)value;            
        var i = 0; 
        var newPath = new StreamGeometry();

        using (var context = newPath.Open())
        {
            var begun = false;

            for (var i = 0; i < points.Count; i++)
            {
                var current = points[i];

                if (!begun)
                {
                    begun = true;
                    context.BeginFigure(current, true, false);
                }
                else
                {
                    context.ArcTo(current, new Size(radius, radius), angle, false, SweepDirection.Counterclockwise, true, true);
                }
            }
        }

        newPath.Freeze();
        return newPath.GetFlattenedPathGeometry();
    }
}

XAML:

<Canvas>
    <Path StrokeThickness="{Binding StrokeWidth}"
          Canvas.Top="{Binding Top}"
          Canvas.Left="{Binding Left}"
          Data="{Binding Points, Converter={StaticResource GeometryConverter}}">
        <Path.Stroke>
            <SolidColorBrush Color="{Binding CurrentColor}" />
        </Path.Stroke>
    </Path>
</Canvas>

As for the text, wouldn't it be better to bind TextBlock elements and arrange those on a 'Canvas` as needed?

Upvotes: 2

Related Questions