Can't bind property with line color of line series chart & legend rectangle fill color

Jul 15, 2013 at 6:07 AM
I want to customize the data point size, color & line color. As per Filip's suggestion I searched about customizing the line color and data point color. I managed to apply binding to data point's color but chart's line series color is not getting applied. To regenerate the problem, try with the code given below.

So please can anyone help me to resolve this issue.

XAML
<Page.Resources>
    <converter:MyConverter x:Key="MyConverter" />
    <Style TargetType="charting:LineDataPoint" x:Key="MyDataPointStyle">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Background" Value="{Binding Color}"/>
        <!-- ABOVE BINDING IS NOT WORKING, IF I PASS HARD CODED VALUE LINE COLOR IS APPLIED -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:LineDataPoint">
                    <Grid>
                        <ToolTipService.ToolTip>
                            <ContentControl>
                                <TextBlock TextAlignment="Center">
                                    <Run Text="{Binding SeriesName}" />
                                    <LineBreak />
                                    <Run Text="{Binding Value,Converter={StaticResource MyConverter},ConverterParameter=TEST}" />
                                </TextBlock>
                            </ContentControl>
                        </ToolTipService.ToolTip>
                        <Ellipse Fill="{Binding Color}" Stroke="{Binding Color}" StrokeThickness="3" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<charting:Chart x:Name="LineChart" Title="Line Chart" Margin="70,0" />
C#
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LineSeries line;
    GenerateColors(20); //suppose I need to create 20 line series, that is dynamic value.
    for (int i = 0; i < 20; i++)
    {
        line = new LineSeries();
        line.Title = string.Format("Line [{0}]", i.ToString());
        line.IndependentValueBinding = GetBinding("Name");
        line.DependentValueBinding = GetBinding("Value");
        line.ItemsSource = GetItems();
        line.DataPointStyle = this.Resources["MyDataPointStyle"] as Style;
        this.LineChart.Series.Add(line);
    }
}

private List<NameValueItem> GetItems(int SeriesIndex)
{
    List<NameValueItem> items = new List<NameValueItem>();
    items.Add(new NameValueItem { Name = "Test1", Value = _random.Next(10, 100), Color = GetRandomColor(), SeriesName = "Population " + SeriesIndex.ToString() });
    items.Add(new NameValueItem { Name = "Test2", Value = _random.Next(10, 100), Color = GetRandomColor(), SeriesName = "Population " + SeriesIndex.ToString() });
    items.Add(new NameValueItem { Name = "Test3", Value = _random.Next(10, 100), Color = GetRandomColor(), SeriesName = "Population " + SeriesIndex.ToString() });
    items.Add(new NameValueItem { Name = "Test4", Value = _random.Next(10, 100), Color = GetRandomColor(), SeriesName = "Population " + SeriesIndex.ToString() });
    items.Add(new NameValueItem { Name = "Test5", Value = _random.Next(10, 100), Color = GetRandomColor(), SeriesName = "Population " + SeriesIndex.ToString() });
        
    return items;
}
Jul 18, 2013 at 3:46 PM
I haven't faced exactly this issue, but it might have to do with the datatype of "Color" within your definition of NameValuePair, which you didn't show. The datatype of 'Property="Background"' in your Setter wants to be SolidColorBrush. Here's how I did something similar (but wanting to hide datapoints) using code-behind instead:
        private static Style GetDataPointStyleWithNoPointsRandomLineColors()
        {
            // If you suppress data points, then all line colors are yellow-orange by default.  Replace with random colors.
            // Adapted from http://stackoverflow.com/questions/5956564/wpf-toolkit-line-chart-without-points-and-with-different-colors
            // By Sanguin Yin, May 17 2011
            Random ran = new Random();
            Color background = Color.FromArgb(255, (byte)ran.Next(255), (byte)ran.Next(255), (byte)ran.Next(255));
            Style style = new Style(typeof(DataPoint));
            Setter st1 = new Setter(DataPoint.BackgroundProperty, new SolidColorBrush(background));
            Setter st2 = new Setter(DataPoint.BorderBrushProperty, new SolidColorBrush(Colors.White));
            Setter st3 = new Setter(DataPoint.BorderThicknessProperty, new Thickness(0));
            Setter st4 = new Setter(DataPoint.HeightProperty, 0);
            Setter st5 = new Setter(DataPoint.WidthProperty, 0);
            //Setter st6 = new Setter(DataPoint.TemplateProperty, null); // causes exception
            style.Setters.Add(st1); style.Setters.Add(st2); style.Setters.Add(st3); style.Setters.Add(st4); style.Setters.Add(st5);
            return style;
        }
Jul 19, 2013 at 6:56 AM
Edited Jul 19, 2013 at 7:33 AM
The "Color" property, which is bound to Property="Background" in setter and <Ellipse Fill="{Binding Color}" Stroke="{Binding Color}" />, is type of SolidColorBrush. So the color is applied to data points i.e. Ellipse but lines and legends rectangle are not getting color.

Your solution is working fine. But I have to use template setter as I want to have custom ellipse and also I need to bind tool tip of those points.

Then I tried to have timer, on timer's tick I changed the background property of each line series so lines are getting color same as data points but the legends are not getting color. I also tried to set legend item style but it's not working, can you please see what's the problem ? If you want a sample project I can send you. I would be happy if you give me a better solution, I need to reach deadline of project.

Image
void timer_Tick(object sender, object e)
{
    timer.Stop();
    for (int i = 0; i < count; i++)
    {
        //Binding of Background property is not working so I am changing it in tick event. Even while creating chart, if I set background property, it's not working
        ((LineSeries)LineChart.Series[i]).Background = GetColorBrush(i);
    }
}
<Style TargetType="charting:LegendItem" x:Key="legendItemStyle">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:LegendItem">
                <Grid>
                    <StackPanel Orientation="Horizontal">
                        <!-- Rectangles are not getting color -->
                        <Rectangle Width="8" Height="8" Fill="{Binding Color}" Stroke="{Binding Color}" StrokeThickness="1"  Margin="0,0,3,0" />
                        <datavis:Title Content="{TemplateBinding Content}" />
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Jul 19, 2013 at 4:28 PM
Xyroid -
I've only been working with winRTXAMLtoolkit for 3 months (and XAML for 6 months), and haven't done anything special with the legends, other than to suppress them in one case. So not a lot of experience here. Just some thoughts...
1) Within your ControlTemplate, you have a <Grid><StackPanel><Rectangle> nest, while Filip uses <Border> in this example:
[http://stackoverflow.com/questions/14855075/winrt-xaml-toolkit-charting-controls-how-to-style-legend-items]
Could that make a difference?
2) Maybe there's someway to bind to the Fill color programmatically in your timer_Tick?
3) If all else fails, maybe suppress the built-in legend (shown below) and just create your own as an overlay?
<charting:Chart ... >
  <charting:Chart.LegendStyle>
    <Style TargetType="FrameworkElement">
      <Setter Property="Width" Value="0" />
   </charting:Chart.LegendStyle>
   ...
</charting:Chart>
Note that FrameworkElement will not be shown by VS Intellisense. This method works, while the obvious thing to try:
<Setter Property="Visibility" Value="Collapsed" />
doesn't.
Sep 22, 2014 at 10:14 PM
Marked as answer by xyzzer on 9/22/2014 at 2:47 PM