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:Seri开发者_开发技巧es
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.
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.
精彩评论