Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Docking Legends

This topic explains, with a code example, how to dock a legend to the XamDataChart™ control.

Introduction

Legends, just like other User Interface (UI) controls can be docked to the XamDataChart control plot area. Legends are docked by first wrapping the XamDataChart and Legend controls with the xamDock™ container control and then setting the respective docking properties. (Table 1 below) Alternatively, you can wrap the XamDataChart and the other controls with WPF host controls like the StackPanel, Grid, and others.

xamDataChart Legend Docking 01.png

Figure 1: The XamDataChart control with Legend controls docked in different locations of the chart plot area

Docking Properties

Table 1 explains the available properties for docking Legend objects to the XamDataChart control.

Table 1: Properties for docking child controls in the xamDock control

Property Name Type Description Default Value

xamDock.Edge

Determines dock edge of a child control in the xamDock container. The available values are:

  • Central

  • InsideBottom

  • InsideLeft

  • InsideRight

  • InsideTop

  • OutsideBottom

  • OutsideLeft

  • OutsideRight

  • OutsideTop

InsideTop

xamDock.VerticalDockAlignment

VerticalAlignment

Determines vertical dock alignment of a child control in the xamDock container. The available values are:

  • Top

  • Center

  • Bottom

  • Stretch

Top

xamDock.HorizontalDockAlignment

HorizontalAlignment

Determines horizontal dock alignment of a child control in the xamDock container. The available values are:

  • Left

  • Center

  • Right

  • Stretch

Left

Code Example

The following example provides all possible docking locations of legends relative to the chart plot area. But only one of the Legend objects provided can be used at time and bound to the Legend property of the XamDataChart control. In order to display multiple legends per series then you need to bind the legend to Legend property of the Series object instead of that of the XamDataChart control. For further details, refer to the Multiple Legends topic.

Note
Note:

This example assumes that you know how to set up your application for the xamDock and XamDataChart controls and bind the data context to the chart. If you need information about this, refer to the Getting Started with Data Chart topic.

In XAML:

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

In 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>
    <!-- Note: These are other docking options for 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>

Related Content