Type of the Item in the C1ChartLegend.ItemTemplate?

Posted by: wkelly1 on 3 August 2018, 9:48 am EST

  • Posted 3 August 2018, 9:48 am EST

    Background

    I need to customize the legend of the C1Chart. The customer would like a check box to appear adjacent to each item. He would like to be able to turn the associated data series on and off.

    Current Approach

    I have tried customizing the legend's ItemTemplate.


    <c1:C1ChartLegend.ItemTemplate>
    <DataTemplate>
    <CheckBox Content="{Binding}" />
    </DataTemplate>
    </c1:C1ChartLegend.ItemTemplate>


    That results in the following:



    I'm assuming that the "{Binding}" on the Checkbox's Content property is displaying the ToString() method of the item being bound.

    Now, I need to display the color/dash/thickness of the associated data series. I am using XYDataSeries.

    Questions

    Is there a better way to accomplish this? Better than providing an ItemTemplate?

    What is the type of the object being bound in the ItemTemplate? Is it the associated Series? Is it the Label of the Series?
  • Replied 3 August 2018, 10:24 am EST

    I think I just found the answer to my second question, LegendItem:

    http://help.grapecity.com/componentone/NetHelp/c1wpfchart/webframe.html#C1.WPF.C1Chart.4~C1.WPF.C1Chart.LegendItem_members.html

  • Marked as Answer

    Replied 6 August 2018, 8:13 am EST

    Hello,

    For your 1st question, I think using ItemTemplate is the better and easier option to have custom controls for legend items.

    As for your second question, you are right that LegendItem is bound to ItemTemplate. So, you can directly use LegendItem.Symbol/LegendItem.Line for displaying shapes of symbols and connection lines. Please refer the attached sample(prj_CustomLegends.zip) for doing so.

    Thank you.
    prj_CustomLegends.zip
  • Replied 14 August 2018, 8:46 am EST

    For those using MVVM and data binding, you might need to know that LegendItem's Item property does not store the instances of the ChartData's SeriesItemsSource, as one might expect. Instead, the LegendItem.Item stores a references to the DataSeries (which you are likely defining in a DataTemplate). To get access to the item provided by the SeriesItemSource, you can store the item in the Tag property of the DataSeries.

    Here is my code. Notice how the Tag property is used.


    <c1:C1Chart>
    <c1:C1Chart.Data>
    <c1:ChartData DataContext="{Binding NotifyOnTargetUpdated=True}" SeriesItemsSource="{Binding ChartSeriesData}">
    <c1:ChartData.SeriesItemTemplate>
    <DataTemplate>
    <c1:XYDataSeries
    ChartType="Line"
    ItemsSource="{Binding Points}"
    Label="{Binding Label}"
    Tag="{Binding}"
    ValueBinding="{Binding Y}"
    Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"
    XValueBinding="{Binding X}" />
    </DataTemplate>
    </c1:ChartData.SeriesItemTemplate>
    </c1:ChartData>
    </c1:C1Chart.Data>
    <c1:C1ChartLegend>
    <c1:C1ChartLegend.ItemTemplate>
    <DataTemplate>
    <StackPanel Orientation="Horizontal">
    <CheckBox
    Margin="5"
    Content="{Binding Label}"
    IsChecked="{Binding Item.Tag.IsVisible}" />
    <ContentControl
    Width="24"
    Height="20"
    Content="{Binding Line}" />
    <ContentControl
    Width="14"
    Height="14"
    Content="{Binding Symbol}" />
    </StackPanel>
    </DataTemplate>
    </c1:C1ChartLegend.ItemTemplate>
    </c1:C1ChartLegend>
    </c1:C1Chart>


Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels