Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Customizing Markers

In the XamDataChart™ control, most of the Series provide support for various markers. The appearance of markers is managed through the properties of the Chart Series that inherit from MarkerSeries class.

Markers Appearance

The following table lists all marker appearance properties: MarkerSeries object

Property Name Property Type Description

MarkerSeries. MarkerType

Determines type of markers displayed by the current series

MarkerSeries. MarkerBrush

Brush

Determines fill color of markers.

MarkerSeries. MarkerOutline

Brush

Determines outline color of markers.

MarkerSeries. MarkerStyle

Style

Determines the Style used by markers.

MarkerSeries. MarkerTemplate

DataTemplate

Determines template for markers of the current series.

The code snippets below demonstrate how to change the marker type in the SplineSeries object. The same logic can be applied to other series that inherit from the MarkerSeries class.

In XAML:

<ig:XamDataChart >
    <ig:XamDataChart.Series>
        <ig:SplineSeries MarkerType="Triangle"/>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

series = new SplineSeries();
series.MarkerType = MarkerType.Triangle;

In Visual Basic:

Dim series As New SplineSeries()
series.MarkerType = MarkerType.Triangle
xamDataChart RT Marker Types 01.png

Figure 1: The XamDataChart control with SplineSeries and Triangle markers.

Markers Templates

The shape of markers can also be customized by binding data templates to properties of the chart control listed in the following table.

Property Name Property Type Description

DataTemplate

Determines template for Circle marker type.

DataTemplate

Determines template for Diamond marker type.

DataTemplate

Determines template for Hexagon marker type.

DataTemplate

Determines template for Hexagram marker type.

DataTemplate

Determines template for Pentagram marker type.

DataTemplate

Determines template for Pentagon marker type.

DataTemplate

Determines template for Pyramid marker type.

DataTemplate

Determines template for Square marker type.

DataTemplate

Determines template for Tetragram marker type.

DataTemplate

Determines template for Triangle marker type.

The following code snippets demonstrate how to create data templates for markers in the XamDataChart control.

In XAML:

<UserControl.Resources>
    <DataTemplate x:Key="CircleMarkerTemplate">
        <Ellipse Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="DiamondMarkerTemplate">
        <Polygon Points="0 4 4 8 8 4 4 0"
                 Stretch="Fill" HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="HexagramMarkerTemplate">
        <Polygon Points="4 0 3 2.268 0.536 2 2 4 0.536 6 3 5.732 4 8 5 5.732 7.464 6 6 4 7.464 2 5 2.268"
                 Stretch="Fill" Margin="-2"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="HexagonMarkerTemplate">
        <Polygon Points="4 0 0.536 2 0.536 6 4 8 7.464 6 7.464 2"
                 Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="PentagramMarkerTemplate">
        <Polygon Points="4 0 2.8244 2.382 0.1956 2.764 2.098 4.618 1.6488 7.236 4 6 6.3512 7.236 5.902 4.618 7.8044 2.764 5.1756 2.382"
                 Margin="-2"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Stretch="Fill"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="PentagonMarkerTemplate">
        <Polygon Points="4 0 0.1956 2.764 1.65 7.236 6.35 7.236 7.8044 2.764"
                 Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="PyramidMarkerTemplate">
        <Polygon Points="0, 8 4, 0 8, 8"
                 Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="SquareMarkerTemplate">
        <Rectangle Stretch="Fill"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
                   Fill="{Binding ActualItemBrush}"
                   Stroke="{Binding Series.ActualMarkerOutline}"
                   StrokeThickness="0.5"
                   MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="TetragramMarkerTemplate">
        <Polygon Points="4 0 2.5856 2.5856 0 4 2.5856 5.4144 4 8 5.4144 5.4144 8 4 5.4144 2.5856"
                 Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
    <DataTemplate x:Key="TriangleMarkerTemplate">
        <Polygon Points="0, 0 4, 8 8, 0"
                 Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Fill="{Binding ActualItemBrush}"
                 Stroke="{Binding Series.ActualMarkerOutline}"
                 StrokeThickness="0.5"
                 MinWidth="20" MinHeight="20" />
    </DataTemplate>
</UserControl.Resources>
<ig:XamDataChart x:Name="dataChart"

                 CircleMarkerTemplate="{StaticResource CircleMarkerTemplate}"

                 TriangleMarkerTemplate="{StaticResource TriangleMarkerTemplate}"

                 PyramidMarkerTemplate="{StaticResource PyramidMarkerTemplate}"

                 SquareMarkerTemplate="{StaticResource SquareMarkerTemplate}"

                 DiamondMarkerTemplate="{StaticResource DiamondMarkerTemplate}"

                 PentagonMarkerTemplate="{StaticResource PentagonMarkerTemplate}"

                 HexagonMarkerTemplate="{StaticResource HexagonMarkerTemplate}"

                 TetragramMarkerTemplate="{StaticResource TetragramMarkerTemplate}"

                 PentagramMarkerTemplate="{StaticResource PentagramMarkerTemplate}"

                 HexagramMarkerTemplate="{StaticResource HexagramMarkerTemplate}"

                 >

            <!-- ...-->

</ig:XamDataChart>

Related Content