Display MarkerShape independently?

2 posts, 0 answers
  1. Enill
    Enill avatar
    41 posts
    Member since:
    Apr 2010

    Posted 04 Jun 2010 Link to this post

    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!
  2. Sia
    Admin
    Sia avatar
    755 posts

    Posted 10 Jun 2010 Link to this post

    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.
Back to Top