Setting Bar Color

2 posts, 0 answers
  1. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 27 Aug 2012 Link to this post

    I would like to bind the color of a BarSeries to the ValueBinding value so that the color of the bar will change depending on the value the bar represents.  I am running into two problems:
    1. I cannot seem to bind to the background property of a border style.  I am getting the error message "Cannot set read-only property ''" (I'm using silverlight 4).
    2. Binding to the ValueBinding of the BarSeries element doesn't seem to be the correct approach.

    MainPage.xaml

    <UserControl x:Class="BarChartTest.MainPage"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
        xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
        xmlns:barChartData="clr-namespace:BarChartTest"
        xmlns:converter="clr-namespace:BarChartTest"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
          
        <UserControl.DataContext>
            <barChartData:ReadinessViewModel />
        </UserControl.DataContext>
          
        <UserControl.Resources>
            <converter:BarColorConverter x:Key="BarColorConverter" />
            <Style TargetType="Border" x:Key="BarColor">
                <Setter Property="Background"
                        Value="{Binding ValueBinding, ElementName=Bar, Converter={StaticResource BarColorConverter}}" />
            </Style>
        </UserControl.Resources>
      
        <Grid x:Name="LayoutRoot" Background="White">
            <chart:RadCartesianChart x:Name="ReadinessBarChart">
                <chartView:BarSeries x:Name="Bar"
                                     ItemsSource="{Binding ReadinessInfo}"
                                     ValueBinding="Percentage"
                                     CategoryBinding="ReadinessType"
                                     DefaultVisualStyle="{StaticResource BarColor}" />
                <chart:RadCartesianChart.HorizontalAxis>
                    <chartView:CategoricalAxis />
                </chart:RadCartesianChart.HorizontalAxis>
                <chart:RadCartesianChart.VerticalAxis>
                    <chartView:LinearAxis Minimum="0" Maximum="1" />
                </chart:RadCartesianChart.VerticalAxis>
            </chart:RadCartesianChart>
        </Grid>
    </UserControl>

    ReadinessViewModel.cs
    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Collections.Generic;
      
    namespace BarChartTest
    {
        public class ReadinessViewModel
        {
            private IEnumerable<ReadinessData> readinessInfo;
      
            public IEnumerable<ReadinessData> ReadinessInfo
            {
                get
                {
                    if (readinessInfo == null)
                    {
                        readinessInfo = new List<ReadinessData>()
                        {
                            new ReadinessData("DEPLOY", .85),
                            new ReadinessData("IMR", .75),
                            new ReadinessData("FIT", .65),
                            new ReadinessData("FILL", .55)
                        };
                    }
      
                    return readinessInfo;
                }
            }
        }
    }

    ReadinessData.cs
    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
      
    namespace BarChartTest
    {
        public class ReadinessData
        {
            private string readinessType;
            private double percentage;
      
            public string ReadinessType
            {
                get { return readinessType; }
            }
      
            public double Percentage
            {
                get { return percentage; }
            }
      
            public ReadinessData(string type, double percent)
            {
                readinessType = type;
                percentage = percent;
            }
        }
    }

    Coverter.cs
    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Data;
      
    namespace BarChartTest
    {
        public class Converter
        {
      
        }
      
        public class BarColorConverter : IValueConverter
        {
            object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                double score = Double.Parse(value.ToString());
                Color color = Colors.Red;
                if (score >= .7 && score < .8)
                    color = Colors.Yellow;
                else if (score >= .8)
                    color = Colors.Green;
                else if (score == -1.00)
                    color = Colors.Gray;
      
                return new SolidColorBrush(color);
            }
      
            object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    }
  2. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 27 Aug 2012 Link to this post

    I think I figured it out.  The trick is to use a BarSeries PointTemplate and then set the fill property of the rectangle to bind to DataItem.Percentage which is the value I'm using in the ValueBinding.

    MainPage.xaml
    <UserControl x:Class="BarChartTest.MainPage"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
        xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
        xmlns:barChartData="clr-namespace:BarChartTest"
        xmlns:converter="clr-namespace:BarChartTest"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
          
        <UserControl.DataContext>
            <barChartData:ReadinessViewModel />
        </UserControl.DataContext>
          
        <UserControl.Resources>
            <converter:BarColorConverter x:Key="BarColorConverter" />
        </UserControl.Resources>
      
        <Grid x:Name="LayoutRoot" Background="White">
            <chart:RadCartesianChart x:Name="ReadinessBarChart">
                <chartView:BarSeries x:Name="Bar"
                                     ItemsSource="{Binding ReadinessInfo}"
                                     ValueBinding="Percentage"
                                     CategoryBinding="ReadinessType">
                    <chartView:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding DataItem.Percentage, Converter={StaticResource BarColorConverter}}" />
                        </DataTemplate>
                    </chartView:BarSeries.PointTemplate>
                </chartView:BarSeries>
                <chart:RadCartesianChart.HorizontalAxis>
                    <chartView:CategoricalAxis />
                </chart:RadCartesianChart.HorizontalAxis>
                <chart:RadCartesianChart.VerticalAxis>
                    <chartView:LinearAxis Minimum="0" Maximum="1" />
                </chart:RadCartesianChart.VerticalAxis>
            </chart:RadCartesianChart>
        </Grid>
    </UserControl>
  3. DevCraft banner
Back to Top