Interactive legend in Mindscape plot control

Hi,

Is there already a feature or ways where I can have the legend in my plot to be interactive, as in, if I click a specific item in the legend, it highlights the curve on the plot?

Thanks!

Hello tulio

This is not currently a built in feature but it will be easy for you to still have this functionality in your application. All you need to do is create a legend item style that includes some way for the user to select it such as a checkbox or a toggle button. This control can then two-way bind to the DataSeries.IsSelected property. Then create a custom Legend style that applies the item template, and use this to set the LegendStyle property of all the Charts in your application. Here is a code example that uses a checkbox:

  <DataTemplate x:Key="SelectableLegendItemTemplate">
    <StackPanel Orientation="Horizontal">
      <CheckBox IsChecked="{Binding DataSeries.IsSelected, Mode=TwoWay}" />
      <ContentPresenter Content="{Binding}" ContentTemplate="{Binding LegendIconTemplate}" VerticalAlignment="Center" />
      <TextBlock Text="{Binding LegendLabel}" Margin="7,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
  </DataTemplate>

  <Style x:Key="SelectableLegendStyle" TargetType="ms:Legend">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="#CAE2FF" />
    <Setter Property="Header" Value="Legend" />
    <Setter Property="Margin" Value="0,6,6,0" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Padding" Value="6" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid>
            <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="{TemplateBinding Margin}">
              <Border BorderThickness="0" BorderBrush="#EFF6FF" Background="{TemplateBinding Background}" CornerRadius="3">
                <StackPanel Margin="{TemplateBinding Padding}">
                  <ContentControl Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
                                  ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                  Foreground="{TemplateBinding Foreground}" />
                  <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
                                ItemTemplate="{StaticResource SelectableLegendItemTemplate}" Margin="5,0,5,2" />
                </StackPanel>
              </Border>
            </Border>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Let me know if you have any questions about this.

Jason Fauchelle