RadDiagram - Dynamic Custom Polygons Shape - MVVM

[Nicolas]

Hello folks,

What I want to do :

Draw a RadDiagram with dynamic (dynamic means the custom shapes are not known in advance) custom polygon shapes in MVVM way.

What I tried :

 Firstly, I exclude the MVVM way, and i put this in my View.

<telerik:RadDiagram Height="400" Width="400">
            <telerik:RadDiagramShape x:Name="ConditionShape" 
                Content="condition" 
                FontWeight="Bold" 
                Geometry="{Binding Geometry}" 
                Position="160,80" />
</telerik:RadDiagram>

Geometry property is defined like that :

Polygon p = new Polygon();
p.Stroke = System.Windows.Media.Brushes.Black;
            p.Fill = System.Windows.Media.Brushes.Black;
            p.StrokeThickness = 5;
            p.HorizontalAlignment = HorizontalAlignment.Left;
            p.VerticalAlignment = VerticalAlignment.Center;
            System.Windows.Point Point1 = new System.Windows.Point(1, 50);
            System.Windows.Point Point2 = new System.Windows.Point(10, 80);
            System.Windows.Point Point3 = new System.Windows.Point(50, 50);
            PointCollection myPointCollection = new PointCollection();
            myPointCollection.Add(Point1);
            myPointCollection.Add(Point2);
            myPointCollection.Add(Point3);
            p.Points = myPointCollection;
            this.Geometry = p.RenderedGeometry;

When I do that, I just see the text "condition", but I don't see the polygon.

 

So secondly, I do that :

Create a custom shape control where I add a Points dependencyproperty (points for my polygon).

public class PolygonShape : RadDiagramShape
    {
        public static readonly DependencyProperty PointsProperty = DependencyProperty.Register(nameof(Points), typeof(PointCollection), typeof(PolygonShape));

        public PointCollection Points
        {
            get
            {
                return this.GetValue(PointsProperty) as PointCollection;
            }

            set
            {
                this.SetValue(PointsProperty, value);
            }
        }

        public PolygonShape() : base()
        {

        }
    }

And I set the following style :

<Style TargetType="viewmodels:PolygonShape">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" />
                        <GradientStop Offset="1" Color="#FFEDF4FF" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="viewmodels:PolygonShape">
                        <Polygon Points="{TemplateBinding Points}" Stroke="Black" StrokeThickness="4" Fill="Yellow" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This is almost working but I have two problems :

- It is not MVVM way how can I set the collection of shapes to draw (binding between my View and ViewModel)

- When I click on my polygon, the selection is a rectangle and do not follow the borders of my polygon

I guess I'm missing something.

Thanks in advance for your help.

Best regards.

[Vladimir Stoyanov]

Hello Nicolas,

Thank you for the provided information. 

You can check out the RadDiagram MVVM SDK example to see how you can populate the control in an mvvm manner. You can also check out the Create Custom Shape article for some more information on how to setup the RadDiagram with a customized shape. 

As for the selection, I am assuming that you are referring to the manipulation adorner, which is shown when a shape is clicked and also allows for resizing it. The RadDiagram does not support having a custom manipulation adorner that is not a rectangle. By default a rectangle is also shown for all of the different available shapes. 

I hope you find this information helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Nicolas]

Hello,

Thank you for your reply!

Best regards