Question

I have a ControlTemplate that contains a XamWebChart. For each pie slice created in my series, I would like its fill color bound to the same source the Value and Label are coming from.

The current xaml for my pie chart looks like:

<ControlTemplate x:Key="DataLocation">
 <Viewbox 
 Width="{TemplateBinding Width}" 
 Height="{TemplateBinding Height}"                
 Stretch="Fill">
 <Grid>
 <Grid.Resources>
 <Style x:Key="PieChartSeriesStyle" TargetType="Chart:Series">
  <Setter Property="Stroke" Value="#00FFFFFF" />                            
  <Setter Property="Marker">
    <Setter.Value>
     <Chart:Marker Foreground="#FFFFFFFF" />
    </Setter.Value>
  </Setter>
  </Style>
</Grid.Resources>
<Chart:XamWebChart x:Name="PieChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  <Chart:XamWebChart.Scene>
   <Chart:Scene>
    <Chart:Scene.GridArea>
      <Chart:GridArea BorderThickness="0" Background="#00FFFFFF" />
    </Chart:Scene.GridArea>
    </Chart:Scene>
   </Chart:XamWebChart.Scene>

<Chart:XamWebChart.Series>
  <Chart:Series 
   ChartType="Pie" 
   Style="{StaticResource PieChartSeriesStyle}" 
   DataMapping="Value=Amount;Label=Identifier"                                
   DataSource="{Binding Path=ToolTip.Details}" 
    Fill="{Binding DetailItem.ColorProvider.BackgroundColor}">
  </Chart:Series>                                   
</Chart:XamWebChart.Series>                        
</Chart:XamWebChart>
</Grid>
</Viewbox>
</ControlTemplate>

The objects that are Bound to this ControlTemplate are:

public sealed class GeographyDataItem{
        public IEnumerable<GeographyDataDetailItem> Details
        {
            get { return _details; }
        }

}

With children:

public sealed class GeographyDataDetailItem
    {
        private readonly IColorProvider _colorProvider;

        public IColorProvider ColorProvider
        {
            get { return _colorProvider; }
        }

        public string Identifier { get;  private set; }
        public double Amount { get; private set; }

        public GeographyDataDetailItem(string identifier, double amount, IColorProvider colorProvider)
        {
            _colorProvider = colorProvider;
            Identifier = identifier;
            Amount = amount;
        }        
    }

Where IColorProvider is:

public interface IColorProvider
{
    Color ForegroundColor { get; }
    Color BackgroundColor { get; }
}

The ControlTemplate binding is set to bind to GeographyDataItem elements.

The only issue I am having is binding the ForegroundColor property of GeographyDataDetailItem . IColorProvider to the Fill property of the Pie Data Series. I am not sure how to go about this.

Answer 1

I was unable to achieve what I wanted in XAML, but was able to support this use case in the control code-behind.

My solution is:

...
<Chart:XamWebChart.Series>
 <Chart:Series ChartType="Pie"
   Style="{StaticResource PieChartSeriesStyle}"
   DataMapping="Value=Amount;Label=Identifier"
   DataSource="{Binding Path=ToolTip.Details}" 
   Loaded="SeriesLoaded" /> 
<!-- Loaded Event Added !-->
...

And the Code beind:

  private void SeriesLoaded(object sender, RoutedEventArgs e)
    {
        var series = (Series) sender;
        ColorDataPointSeries(series);
    }

    /// <summary>
    /// Colors in <see cref="DataPoint"/> from the bound DataSource for the pie chart layer control.
    /// </summary>
    /// <param name="series"></param>
    private static void ColorDataPointSeries(Series series)
    {
        //If nothing is bound there is nothing to do.
        if (null == series.DataSource)
            return;

        var dataSource = ((IEnumerable<GeographyDataDetailItem>) series.DataSource).ToList();
        var dataPoints = series.DataPoints;

        //Note, I am depending on the control to have the exact number of dataPoints as dataSource elements here.
        for (var sourceIndex = 0; sourceIndex < dataSource.Count(); sourceIndex++)
        {
            //Iterate through each dataSoruce, looking for a color provider.
            //If one exists, change the Fill property of the control DataPoint.
            var colorProvider = dataSource[sourceIndex].ColorProvider;
            if (null != colorProvider)
                dataPoints[sourceIndex].Fill = new SolidColorBrush(colorProvider.BackgroundColor);
        }
    }            

So, now each time a XamWebChart is loaded for render, the Fill color is applied from the data source. Binding listening to property changes is not necessary as I do not expect the color to change following the render.

It would be nice to know an alternative to have this in XAML, to reduce this code-behind; however, for the time being this solved my problem.