Assigning color to the rectangle near legend items

Question

I am adding lineseries to a chart dynamically as follows.

foreach (KeyValuePair<string, List<KeyValuePair<DateTime, double>>> tempSeries in yieldSeries)
{
	LineSeries lineSeries = new LineSeries();
	lineSeries.DependentValuePath = "Value";
	lineSeries.IndependentValuePath = "Key";
	lineSeries.ItemsSource = tempSeries.Value;
	lineSeries.Title = tempSeries.Key;
	lineSeries.SetResourceReference(FrameworkElement.StyleProperty,"CommonLineSeries");
	lineSeries.Tag = Brushes.Red;
	
	lineSeries.Background = Brushes.Red;
	
	yieldTrendChart.Series.Add(lineSeries);
}

I wish to assign specific color in specific order for the lineseries to attain this I have added a style for the polyline as follows

<Style x:Key="CommonLineSeries" TargetType="charting:LineSeries" BasedOn="{StaticResource {x:Type charting:LineSeries}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:LineSeries">
                <Canvas x:Name="PlotArea">
                    <Polyline Points="{TemplateBinding Points}" Stroke="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type charting:LineSeries}}}" Style="{TemplateBinding PolylineStyle}"/>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>        
</Style>

Problem The color is successfully assigned to the lines in the graph however the rectangle near the legend still shows the color assigned by .net randomly. How shall I assign the same color to the rectangle as I have assigned it to the line??

Answer 1

You need to edit LegendItem Style to change color of legend rectangle.

xaml

Window x:Class="WpfApplication8.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:datavis ="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="Window1" Height="500" Width="700">
<Window.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">
                        <Polyline Points="{TemplateBinding Points}" Stroke="{Binding Tag,RelativeSource={RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <chartingToolkit:Chart x:Name="mcChart"  >
        <chartingToolkit:LineSeries Tag="Green" x:Name="chart" DependentValuePath="Value"  IsSelectionEnabled="True" IndependentValuePath="Key" ItemsSource="{Binding}" Style="{StaticResource LineSeriesStyle1}">
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="chartingToolkit:LegendItem" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border BorderBrush="Black" BorderThickness="0">
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart,Path=Tag}" StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
</Grid>

c#

namespace WpfApplication8

{

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        LoadColumnChartData();
    }

    private void LoadColumnChartData()
    {
        ((LineSeries)mcChart.Series[0]).ItemsSource =
        new KeyValuePair<string, int>[]{
        new KeyValuePair<string,int>("Project Manager", 13),
        new KeyValuePair<string,int>("CEO", 23),};

    }
}

}

Result

Update

 <Window.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="Tag" Value="{Binding Tag,RelativeSource={RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}}"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">
                        <Polyline x:Name="polyline"  Points="{TemplateBinding Points}" Stroke="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Window.Resources>
<Grid>
    <chartingToolkit:Chart Name="lineChart">
        <chartingToolkit:LineSeries Name="chart1" Tag="Blue" Background="Green"  Style="{StaticResource LineSeriesStyle1}" Title="KW Gastats"  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}" IsSelectionEnabled="True">
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="{x:Type chartingToolkit:LegendItem}" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border >
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart1,Path=Tag}"  Stroke="{Binding Background}" StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart1,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
        <chartingToolkit:LineSeries Name="chart2" Tag="Green"   Style="{StaticResource LineSeriesStyle1}" Title="Preu KW"   DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}" IsSelectionEnabled="True" >
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="{x:Type chartingToolkit:LegendItem}" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border >
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart2,Path=Tag}"   StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart2,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
</Grid>

c# Code

InitializeComponent();

        List<KeyValuePair<DateTime, int>> llistaGastats = new List<KeyValuePair<DateTime, int>>();
        llistaGastats.Add(new KeyValuePair<DateTime, int>(DateTime.Now, 100));
        llistaGastats.Add(new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 200));
        List<KeyValuePair<DateTime, int>> llistaPreu = new List<KeyValuePair<DateTime, int>>();
        llistaPreu.Add(new KeyValuePair<DateTime, int>(DateTime.Now, 300));
        llistaPreu.Add(new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 300));
        var dataSourceList = new List<List<KeyValuePair<DateTime, int>>>();
        dataSourceList.Add(llistaGastats);
        dataSourceList.Add(llistaPreu);
        lineChart.DataContext = dataSourceList;

Result