バージョン

マーカーのカスタマイズ

XamDataChart コントロールでは、シリーズの多くで様々なマーカーをサポートしています。マーカーの外観は、 MarkerSeries クラスから継承する Chart シリーズ のプロパティで管理されます。

マーカーの外観

以下の表は、マーカーの外観プロパティ MarkerSeries オブジェクトの一覧です。

プロパティ名 プロパティ タイプ 説明

MarkerSeries.MarkerType

現在のシリーズによって表示されるマーカーのタイプを決定します。

MarkerSeries.MarkerBrush

Brush

マーカーの塗りつぶし色を決定します。

MarkerSeries.MarkerOutline

Brush

マーカーのアウトライン色を決定します。

MarkerSeries.Thickness

double

マーカーのアウトライン色を決定します。

MarkerSeries. Thickness

double

マーカーのアウトラインの太さを決定します。

MarkerSeries.MarkerStyle

Style

マーカーで使用されるスタイルを決定します。

MarkerSeries.MarkerTemplate

DataTemplate

現在のシリーズのマーカーのテンプレートを決定します。

以下のコードは、 SplineSeries オブジェクトのマーカー タイプの変更方法を示します。MarkerSeries クラスを継承する他のシリーズに、同じロジックを適用できます。

XAML の場合:

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

C# の場合:

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

Visual Basic の場合:

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

図 1: SplineSeries および Triangle マーカーを含む XamDataChart コントロール。

マーカー テンプレート

以下の表のチャート コントロールのプロパティにデータ テンプレートをバインドすることで、マーカーの形状をカスタマイズすることもできます。

プロパティ名 プロパティ タイプ 説明

DataTemplate

円形マーカー タイプのテンプレートを決定します。

DataTemplate

ダイアモンド マーカー タイプのテンプレートを決定します。

DataTemplate

六角形マーカー タイプのテンプレートを決定します。

DataTemplate

六線星形マーカー タイプのテンプレートを決定します。

DataTemplate

星形五角形マーカー タイプのテンプレートを決定します。

DataTemplate

五角形マーカー タイプのテンプレートを決定します。

DataTemplate

ピラミッド マーカー タイプのテンプレートを決定します。

DataTemplate

正方形マーカー タイプのテンプレートを決定します。

DataTemplate

四面マーカー タイプのテンプレートを決定します。

DataTemplate

三角形マーカー タイプのテンプレートを決定します。

以下のコードは、XamDataChart コントロールでのマーカー用データテンプレートの作成方法を示します。

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>

関連コンテンツ