バージョン

凡例のドッキング

このトピックは、コード例を示して、凡例を XamDataChart コントロールにドックする方法を説明します。

概要

凡例は、他のユーザー インターフェース (UI) コントロールのように、XamDataChart コントロールのプロット エリアにドックすることができます。凡例は、まず XamDataChart と 凡例 コントロールを、 xamDock コンテナを使ってラップしてから、それぞれのドッキング プロパティを設定することでドックします。(以下の図 1) あるいは、XamDataChart や他のコントロールを、StackPanel、Grid などの WPF ホスト コントロールでラップすることができます。

xamDataChart Legend Docking 01.png

図 1: チャート プロット エリアの様々なロケーションに凡例コントロールがドックされた XamDataChart コントロール

ドッキング プロパティ

テーブル 1 は、凡例オブジェクトを XamDataChart コントロールにドッキングするために利用可能なプロパティを説明しています。

テーブル 1: xamDock コントロールの子コントロールをドッキングするためのプロパティ

プロパティ名 タイプ 説明 デフォルト値

xamDock.Edge

xamDock コンテナの子コントロールのドックの端を決定します。使用可能な値は以下のとおりです。

  • Central

  • InsideBottom

  • InsideLeft

  • InsideRight

  • InsideTop

  • OutsideBottom

  • OutsideLeft

  • OutsideRight

  • OutsideTop

InsideTop

xamDock.VerticalDockAlignment

VerticalAlignment

xamDock コンテナの子コントロールの垂直ドックのアラインメントを決定します。使用可能な値は以下のとおりです。

  • 上

  • 中央

  • 下

  • 引き伸ばし

Top

xamDock.HorizontalDockAlignment

HorizontalAlignment

xamDock コンテナの子コントロールの水平ドックのアラインメントを決定します。使用可能な値は以下のとおりです。

  • 左

  • 中央

  • 右

  • 引き伸ばし

Left

コード例

以下の例は、チャート プロット エリアに対する凡例のすべての可能なドッキング ロケーションを提供します。ただし、提供される凡例オブジェクトは1度に 1 つのみ使うことができ、また XamDataChart コントロールの凡例プロパティとバインドすることができます。1 シリーズにつき複数の凡例を表示する場合、XamDataChart コントロールではなく、シリーズ オブジェクトの凡例プロパティにその凡例をバインドする必要があります。詳細は、複数の凡例のトピックを参照してください。

Note

注: この例は、xamDock と XamDataChart コントロールにアプリケーションを設定して、データ コンテキストをチャートにバインドする方法をユーザーが理解していることを前提としています。これについての詳細は、 データ チャートを使用した作業の開始 のトピックを参照してください。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

XAML の場合:

<ig:XamDock x:Name="dockContainer" >
    <ig:XamDataChart x:Name="dataChart"
                     ig:XamDock.Edge="Central"
                     Legend="{Binding ElementName=LegendOTL}" >
    </ig:XamDataChart>
    <ig:Legend x:Name="LegendOTC" Content="OutsideTopCenter"
                ig:XamDock.Edge="OutsideTop"
                ig:XamDock.HorizontalDockAlignment="Center"  >
    </ig:Legend>
    <!-- 注: 凡例の他のドッキングオプションがあります -->
    <ig:Legend x:Name="LegendOTL" Content="OutsideTopLeft"
                ig:XamDock.Edge="OutsideTop"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Left"  >
    </ig:Legend>
    <ig:Legend x:Name="LegendOTR" Content="OutsideTopRight"
                ig:XamDock.Edge="OutsideTop"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Right"  >
    </ig:Legend>
    <ig:Legend x:Name="LegendOLC" Content="OutsideMiddleLeft"
                ig:XamDock.Edge="OutsideLeft"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center"  >
    </ig:Legend>
    <ig:Legend x:Name="LegendORC" Content="OutsideMiddleRight"
                ig:XamDock.Edge="OutsideRight"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendOBL" Content="OutsideBottomLeft"
                ig:XamDock.Edge="OutsideBottom"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Left"   >
    </ig:Legend>
    <ig:Legend x:Name="LegendOBR" Content="OutsideBottomRight"
                ig:XamDock.Edge="OutsideBottom"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Right"    >
    </ig:Legend>
     <ig:Legend x:Name="LegendOBC" Content="OutsideBottomCenter"
                ig:XamDock.Edge="OutsideBottom"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendITC" Content="InsideTopLeft"
                ig:XamDock.Edge="InsideTop"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Left"  >
    </ig:Legend>
    <ig:Legend x:Name="LegendITL" Content="InsideTopCenter"
                ig:XamDock.Edge="InsideTop"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendITR" Content="InsideTopRight"
                ig:XamDock.Edge="InsideTop"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Right" >
    </ig:Legend>
    <ig:Legend x:Name="LegendIC" Content="InsideCenter"
                ig:XamDock.Edge="Central"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendILC" Content="InsideCenterLeft"
                ig:XamDock.Edge="InsideLeft"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendIRC" Content="InsideCenterRight"
                ig:XamDock.Edge="InsideRight"
                ig:XamDock.VerticalDockAlignment="Center"
                ig:XamDock.HorizontalDockAlignment="Center">
    </ig:Legend>
    <ig:Legend x:Name="LegendIBC" Content="InsideBottomLeft"
                ig:XamDock.Edge="InsideBottom"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Left" >
    </ig:Legend>
    <ig:Legend x:Name="LegendIBL" Content="InsideBottomCenter"
                ig:XamDock.Edge="InsideBottom"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Center" >
    </ig:Legend>
    <ig:Legend x:Name="LegendIBR" Content="InsideBottomRight"
                ig:XamDock.Edge="InsideBottom"
                ig:XamDock.VerticalDockAlignment="Top"
                ig:XamDock.HorizontalDockAlignment="Right" >
    </ig:Legend>
</ig:XamDock>

関連トピック