Skip to main content

How to: Create a Movable Legend at Runtime

  • 3 minutes to read

This example shows how to provide the capability for end-users to move a chart’s legend at runtime.

For this, you need to assign a TranslateTransform object (named legendTransform) to the Legend.RenderTransform property. This allows you to control and modify a legend position.

Before changing a legend position, you should handle the ChartControl.MouseLeftButtonDown and ChartControl.MouseLeftButtonUp events to make sure that a legend has been dragged by a mouse. After that, it becomes possible to calculate a distance by which a legendTransform object should be moved. To accomplish this task, handle the ChartControl.MouseMove event.

<Window x:Class="scratch.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="350" Width="525" >
    <Grid>
        <dxc:ChartControl Name="chartControl1" MouseMove="chart_MouseMove" 
                          MouseLeftButtonDown="chart_MouseLeftButtonDown" 
                          MouseLeftButtonUp="chart_MouseLeftButtonUp">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:BarSideBySideSeries2D ColorEach="True">
                            <dxc:BarSideBySideSeries2D.LegendPointOptions>
                                <dxc:PointOptions PointView="Argument"/>
                            </dxc:BarSideBySideSeries2D.LegendPointOptions>
                            <dxc:BarSideBySideSeries2D.Points>
                                <dxc:SeriesPoint Argument ="A" Value="1"/>
                                <dxc:SeriesPoint Argument ="B" Value="2"/>
                                <dxc:SeriesPoint Argument ="C" Value="3"/>
                                <dxc:SeriesPoint Argument ="D" Value="4"/>
                                <dxc:SeriesPoint Argument ="E" Value="5"/>
                                <dxc:SeriesPoint Argument ="F" Value="4"/>
                                <dxc:SeriesPoint Argument ="G" Value="3"/>
                                <dxc:SeriesPoint Argument ="H" Value="2"/>
                            </dxc:BarSideBySideSeries2D.Points>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend x:Name="legend" Visibility="Visible">
                    <dxc:Legend.RenderTransform>
                        <TranslateTransform x:Name="legendTransform"/>
                    </dxc:Legend.RenderTransform>
                </dxc:Legend>
            </dxc:ChartControl.Legend>
        </dxc:ChartControl>
    </Grid>
</Window>