How to Bind Color of series when Charting in a DataTemplate

Nov 29, 2013 at 9:11 AM
Edited Nov 29, 2013 at 9:14 AM
I am trying to use a LineSeries Chart within a DataTemplate so that i can draw multiple charts within one GridView. The Binding to the Data works and the lines are drawn in accordance to the given data. The XAML I use:
<DataTemplate x:Key="StockMarket_DataTemplate">
     <Grid Width="1116" Height="628">
           <charting:Chart Title="{Binding Name}">
                <charting:LineSeries ItemsSource="{Binding PriceHistory}"
                                  IndependentValueBinding="{Binding Path=X}"
                                    DependentValueBinding="{Binding Path=Y}">
                </charting:LineSeries>
          </charting:Chart>
     </Grid>
</DataTemplate>
I bind the Gridview that uses this Datatemplate like this:
<GridView x:Name="Stockmarket_By_Location_Chart_Gridview" 
           ItemsSource="{Binding}"
           ItemTemplate="{StaticResource StockMarket_DataTemplate}">
</GridView>
the simplified version of my Stockmarket object and its child StockTimeStamp object that gets bound to this gridview looks like this:
public class StockMarket
    {
        private Stock stock;

        /// <summary>
        /// The stock of this stockmarket
        /// </summary>
        public Stock Stock
        {
            get { return stock; }
        }

        private string name;

        /// <summary>
        /// The name of the stockmarket
        /// </summary>
        public string Name
        {
            get { return name; }
        }

        private ObservableCollection<StockTimeStamp> priceHistory;

        public ObservableCollection<StockTimeStamp> PriceHistory
        {
            get { return priceHistory; }
        }

        private int[] stockColor;

        public int[] Color
        {
            get { return stockColor; }
        }


        /// <summary>
        /// Creates a stockmarket with the given name and price
        /// </summary>
        /// <param name="StockmarketName">The name of the location in which this stockmarket should be initialized</param>
        /// <param name="StockPrice">The price with which the stock for this market should be initialized</param>
        public StockMarket(string StockMarketName, float StockPrice, int[] Collor_RGBA)
        {
            this.name = StockMarketName;
            this.stock = new Stock(this.name, StockPrice);
            this.stockColor = Collor_RGBA;

            this.priceHistory = new ObservableCollection<StockTimeStamp>() { new StockTimeStamp(0, StockPrice), new StockTimeStamp(1, StockPrice) };
        }

public class StockTimeStamp
    {
        int turn;
        
        public int X
        {
            get { return turn; }
            set { turn = value; }
        }

        double price;

        public double Y
        {
            get { return price; }
            set { price = value; }
        }

        /// <summary>
        /// Create a timestamp of the stockmarket for the current turn
        /// </summary>
        /// <param name="X_AxisValue">X-Axis is the current turn</param>
        /// <param name="Y_AxisValue">Y-Axis is the current price</param>
        public StockTimeStamp(int X_AxisValue, double Y_AxisValue)
        {
            turn = X_AxisValue;
            price = Y_AxisValue;           
        }      
    }
This works just great. But now i can't figure out how to bind the color of the Series to the StockMarket.Color of the respective StockMarket object. I have a RGBA to SolidColorBrush Converter that looks like this:
class RGBAtoSolidColorBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is int[] && ((int[])value).Length == 4)
        {
            int[] rgba = (int[])value;
            return new SolidColorBrush(Color.FromArgb((byte)rgba[3], (byte)rgba[0], (byte)rgba[1], (byte)rgba[2]));
        }
        return new SolidColorBrush(Colors.Azure);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is SolidColorBrush)
        {
            Color color = ((SolidColorBrush)value).Color;
            return new int[] { color.R, color.G, color.B, color.A };
        }
        return new int[] { Colors.Azure.R, Colors.Azure.G, Colors.Azure.B, Colors.Azure.A };
    }
}
I have tried setting the DataPointStyle of the LineSeries like this:
<common:RGBAtoSolidColorBrushConverter x:Key="RGBAtoSolidColorBrush" />
<Style x:Key="LineDataStyle" TargetType="charting:LineDataPoint">
    <Setter Property="Width" Value="10" />
    <Setter Property="Height" Value="10" />
    <Setter Property="Background" Value="{Binding Color, Converter={StaticResource RGBAtoSolidColorBrush}}"/>
    <Setter Property="BorderBrush" Value="{Binding Color, Converter={StaticResource RGBAtoSolidColorBrush}}"/>
</Style>
And changing the Style Attribute accordingly:
<DataTemplate x:Key="StockMarket_DataTemplate">
     <Grid Width="1116" Height="628">
           <charting:Chart Title="{Binding Name}">
                 <charting:LineSeries ItemsSource="{Binding PriceHistory}"
                                IndependentValueBinding="{Binding Path=X}"
                                DependentValueBinding="{Binding Path=Y}"
                                __DataPointStyle="{StaticResource LineDataStyle}"__>
                 </charting:LineSeries>
           </charting:Chart>
     </Grid>
</DataTemplate>
But this just doesn't display any lines at all! I would be very happy to figure this one out with your help. Please let me know if any further information is needed
Sep 22, 2014 at 11:43 AM
Marked as answer by xyzzer on 9/22/2014 at 2:52 PM