Knowledgebase: Legends
SciChartLegend ItemsPanel and ItemsTemplate
Posted by Admin - on 21 March 2014 11:20 AM

Introduction

This tutorial shows you how to fully customise the legend appearance by changing the SciChartLegend.ItemsPanel and SciChartLegend.ItemTemplate properties. 

Templating the Legend ItemsPanel

The SciChartLegend extends the ItemsControl. It binds the ItemsSource to an ObservableCollection of SeriesInfo (see the types of SeriesInfo here), where one SeriesInfo is generated per RenderableSeries in the chart.  

By default, the SciChartLegend.ItemsPanel is StackPanel with vertical orientation. Very often people want to change the orientation of the legend, so for convenience the SciChartLegend.Orientation property controls the items stacking order. What if you wanted to show legend items in a WrapPanel or other custom panel though?

It is possible to change the SciChartLegend.ItemsPanel via the corresponding ItemsPanel property inherited from the ItemsControl. Here is an example in XAML:

<!--  Declare the LegendModifier  -->
<SciChart:SciChartSurface.ChartModifier>
    <SciChart:ModifierGroup>
        <SciChart:LegendModifier x:Name="legendModifier" GetLegendDataFor="AllSeries" />
    </SciChart:ModifierGroup>
</SciChart:SciChartSurface.ChartModifier>

 

And the Legend control, defined as below:

<!--  Declare the SciChartLegend bound to the LegendModifier  -->
<SciChart:SciChartLegend x:Name="legendControl"
                         Margin="23,23"
                         Orientation="Horizontal"
                         LegendData="{Binding LegendData, ElementName=legendModifier}" >
    <SciChart:SciChartLegend.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="170" Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=SciChart:SciChartLegend}}" />
        </ItemsPanelTemplate>
    </SciChart:SciChartLegend.ItemsPanel>
</SciChart:SciChartLegend>



Templating the Legend Items 

The ItemTemplate property, inherited from the ItemsControl, should be used to template the actual legend items, each of which binds to one SeriesInfo instance (see the types of SeriesInfo here).

<SciChart:SciChartLegend x:Name="legendControl"
                    Grid.Row="1"
                    Margin="23,23"
                    Orientation="Horizontal"
                    LegendData="{Binding LegendData, ElementName=legendModifier}" >

    <SciChart:SciChartLegend.Resources>
        <SciChart:ColorToBrushConverter x:Key="ColorToBrushConverter" />
    </SciChart:SciChartLegend.Resources>

   
    <SciChart:SciChartLegend.ItemTemplate>
        <DataTemplate DataType="SciChart:XyzSeriesInfo">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Line Grid.Column="0"
                        VerticalAlignment="Center"
                        Stretch="Fill"
                        Width="40"
                        X1="0"
                        X2="1"
                        Y1="0.5"
                        Y2="0.5"
                        StrokeThickness="3"
                        Stroke="{Binding SeriesColor,
                        Converter={StaticResource ColorToBrushConverter}}" />

                <TextBlock Grid.Column="1"
                        Margin="5,0,10,0"
                        HorizontalAlignment="Center"
                        Text="{Binding SeriesName}" />

            </Grid>
        </DataTemplate>
    </SciChart:SciChartLegend.ItemTemplate>
</SciChart:SciChartLegend>

 

The output chart might look as follows:

Allowing Scrolling in a Legend

This is also covered in detail in the SciChartLegend API Overview article.

To change the default scrolling behavior for the Legend, the attached properties ScrollViewer.HorizontalScrollBarVisibility and ScrollViewer.VerticalScrollBarVisibility should be used:

<s:SciChartLegend Margin="75,28" Orientation="Horizontal" Height="200" ScrollViewer.VerticalScrollBarVisibility="Auto" LegendData="{Binding LegendData, ElementName=LegendModifier}" >
    <s:SciChartLegend.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="180" Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=s:SciChartLegend}}" />
        </ItemsPanelTemplate>
    </s:SciChartLegend.ItemsPanel>
</s:SciChartLegend>



The resulting legend might look as on the screenshot below:

NOTE: Full source code for the examples used as a base for this article is available online. Please, refer to the Chart Legends and SeriesSelection samples from SciChart online Demo.

(1 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725