This is a migrated thread and some comments may be shown as answers.

Display MarkerShape independently?

1 Answer 31 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Enill
Top achievements
Rank 1
Enill asked on 04 Jun 2010, 07:43 PM
Hi,
i am actually creating a custom legend that is not using the 'ChartLegend' class of the teleriks controls.

The lines in my chart have the showpointmark set to true, the markershape is different from a line to another.

What i am trying to do, and this is my question, is to be able to add a markershape in a grid.

So, is it possible to display , exemple: circle, triangle, star, etc...(the shape only) as a 'UIElement' in another container like a grid or stackpanel?

Thanks in advance!

1 Answer, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 10 Jun 2010, 11:11 AM
Hello Jean-Philippe Savard,

The marker shape is a Path with predefined different options for Data geometry.
For example you can use the following Path wherever you need it:
<Path Width="16"
      Height="16"
      Stretch="Fill"
      Fill="Red"
      Stroke="Black"
      StrokeThickness="1">
     <Path.Data>
          <PathGeometry>
               <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="1, 0">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment Point="-1, 0" Size="1, 1" SweepDirection="Clockwise" />
                                    <ArcSegment Point="1, 0" Size="1, 1" SweepDirection="Clockwise"    />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
</Path>

The path above is the ellipse shape of the markers in the ChartLegend.

Here are the Data geometries for some of the rest shapes:

Square:
<Path.Data>
    <PathGeometry>
        <PathGeometry.Figures>
            <PathFigureCollection>
                <PathFigure IsClosed="True">
                    <PathFigure.Segments>
                        <PathSegmentCollection>
                            <LineSegment Point="0, 1" />
                            <LineSegment Point="1, 1"  />
                            <LineSegment Point="1, 0"  />
                        </PathSegmentCollection>
                    </PathFigure.Segments>
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry.Figures>
    </PathGeometry>
</Path.Data>

Triangle:
<Path.Data>
    <PathGeometry>
        <PathGeometry.Figures>
            <PathFigureCollection>
                <PathFigure StartPoint="0.5, 0" IsClosed="True">
                    <PathFigure.Segments>
                        <PathSegmentCollection>
                            <LineSegment Point="0, 1" />
                            <LineSegment Point="1, 1"  />
                        </PathSegmentCollection>
                    </PathFigure.Segments>
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry.Figures>
    </PathGeometry>
</Path.Data>

Rounded Square:
<Path.Data>
    <PathGeometry>
        <PathGeometry.Figures>
            <PathFigureCollection>
                <PathFigure StartPoint="217.778, 346.979" IsClosed="True">
                    <PathFigure.Segments>
                        <PathSegmentCollection>
                            <BezierSegment Point1="217.778, 356.379" Point2="210.157, 364" Point3="200.756, 364" />
                            <LineSegment Point="101.466, 364"  />
                            <BezierSegment Point1="92.0649, 364" Point2="84.4445, 356.379" Point3="84.4445, 346.979" />
                            <LineSegment Point="84.4445, 247.687"  />
                            <BezierSegment Point1="84.4445, 238.288" Point2="92.0649, 230.667" Point3="101.466, 230.667" />
                            <LineSegment Point="200.756, 230.667"  />
                            <BezierSegment Point1="210.157, 230.667" Point2="217.778, 238.288" Point3="217.778, 247.687" />
                        </PathSegmentCollection>
                    </PathFigure.Segments>
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry.Figures>
    </PathGeometry>
</Path.Data>


Hope this helps.

All the best,
Sia
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Chart
Asked by
Enill
Top achievements
Rank 1
Answers by
Sia
Telerik team
Share this question
or