How to: Create a Scrollable Legend

• Jun 07, 2019
• 2 minutes to read

This example illustrates how to create a chart control with a scrollable legend. This may be required, for example, when a chart displays too many series, or a legend occupies too much space.

To accomplish this task, it is necessary to define a custom scrollable template and assign it to the Legend.Template property.

View Example

MainWindow.xaml

<Window x:Class="ScrollableLegend.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="516" Width="803"  Loaded="Window_Loaded">
    <Grid>
        <dxc:ChartControl Name="chart">
            <!--region #legend-->
            <dxc:ChartControl.Legend>
                <dxc:Legend>
                    <dxc:Legend.Template>
                        <ControlTemplate TargetType="dxc:Legend">
                            <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">
                                <ScrollViewer MaxHeight="200">
                                    <dxc:LegendItemsControl ReverseItems="True" 
                                                            ItemTemplate="{TemplateBinding ItemTemplate}" 
                                                            LegendItems="{Binding Path=Items, RelativeSource={RelativeSource TemplatedParent}}">
                                        <dxc:LegendItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Vertical"/>
                                            </ItemsPanelTemplate>
                                        </dxc:LegendItemsControl.ItemsPanel>
                                    </dxc:LegendItemsControl>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </dxc:Legend.Template>
                </dxc:Legend>
            </dxc:ChartControl.Legend>
            <!--endregion #legend-->
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D Name="xyDiagram" />
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports DevExpress.Xpf.Charts

Namespace ScrollableLegend

    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim rnd As New Random()
            Dim today As DateTime = DateTime.Today

            chart.BeginInit()
            For i As Integer = 0 To 19
                Dim areaSeries As New AreaStackedSeries2D()
                areaSeries.ArgumentScaleType = ScaleType.DateTime
                areaSeries.LabelsVisibility = False
                areaSeries.Transparency = 0.3
                areaSeries.DisplayName = "Area " & (i + 1).ToString()

                For j As Integer = 0 To 30
                    Dim p As New SeriesPoint(today.AddDays(j), rnd.Next(50, 100))
                    areaSeries.Points.Add(p)
                Next j

                xyDiagram.Series.Add(areaSeries)
            Next i
            chart.EndInit()
        End Sub
    End Class

End Namespace

MainWindow.xaml.cs

using System;
using System.Windows;
using DevExpress.Xpf.Charts;

namespace ScrollableLegend {

    public partial class MainWindow : Window {

        public MainWindow() {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e) {
            Random rnd = new Random();
            DateTime today = DateTime.Today;

            chart.BeginInit();
            for (int i = 0; i < 20; i++) {
                AreaStackedSeries2D areaSeries = new AreaStackedSeries2D();
                areaSeries.ArgumentScaleType = ScaleType.DateTime;
                areaSeries.LabelsVisibility = false;
                areaSeries.Transparency = 0.3;
                areaSeries.DisplayName = "Area " + (i + 1).ToString();

                for (int j = 0; j <= 30; j++) {
                    SeriesPoint p = new SeriesPoint(today.AddDays(j), rnd.Next(50, 100));
                    areaSeries.Points.Add(p);
                }

                xyDiagram.Series.Add(areaSeries);
            }
            chart.EndInit();
        }
    }

}