CODEWITHSUNDEEP
silverlightsilverlight-4.0colorschartssilverlight-toolkit
pqsk
pqsk

Reputation: 2164

How to change the colors of each line in a silverlight 4 chart in xaml

How do I change the colors of each line in xaml for the silverlight 4 toolkit chart? I have seen a lot of code behind tricks, but I do not want to do that. Is there a way to do it using mvvm? I would prefer to do it in xaml.

This is what I have tried:

<toolkit:Chart Grid.Row="1" Title="Actuals + Forecast" DataContext="{Binding Path=SelectedSKU}">
            <toolkit:Chart.Series>
                <toolkit:LineSeries Title="Manual Forecast"
                                    ItemsSource="{Binding Path=LstChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" BorderBrush="#FFFF0300"/>
                <toolkit:LineSeries Title="Automatically Generated Forecast"
                                    ItemsSource="{Binding Path=LstAChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" Foreground="Green"BorderBrush="Green" />
                <toolkit:LineSeries Title="Actual History"
                                    ItemsSource="{Binding Path=LstMChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" Foreground="Blue" />
            </toolkit:Chart.Series>
        </toolkit:Chart>

I saw this article: http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx , but it says Silverlight 2. I hear it is completely different than Silverlight 4.

Upvotes: 2

Views: 3109

Answers (2)

S.Taylor
S.Taylor

Reputation: 49

One way is to provide a style that redefines a Palette for the graph:

<Style x:Key="newGraphPalette" TargetType="toolkit:Chart">

  <Setter Property="Palette">
     <Setter.Value>
       <toolkit:ResourceDictionaryCollection>
         <!-- set the first line color to red -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Red"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>

         <!-- set the second line color to green -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Green"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>


         <!-- set the third line color to blue -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Blue"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>
       </toolkit:ResourceDictionaryCollection>
     </Setter.Value>
  </Setter>

</Style>

And when you want to use this particular palette - use the 

Style="StaticResource newGraphPalette"

this will over write the default palette of the chart, and you only have to define the colors ones in a resource (style) that can be reused.

Hopefully this is helpful.

Upvotes: 0

pqsk
pqsk

Reputation: 2164

Figured it out:

<toolkit:Chart Grid.Row="1" Title="Actuals + Forecast" DataContext="{Binding Path=SelectedSKU}">
        <toolkit:Chart.Series>
            <toolkit:LineSeries Title="Manual Forecast"
                                ItemsSource="{Binding Path=LstChartData}"
                                IndependentValueBinding="{Binding Path=StrPeriod}"
                                DependentValueBinding="{Binding Path=DQuantity}">
                <toolkit:LineSeries.DataPointStyle>
                    <Style TargetType="toolkit:LineDataPoint">
                        <Setter Property="Background" Value="Lime" />
                        <Setter Property="Template" Value="{x:Null}"/>
                    </Style>
                </toolkit:LineSeries.DataPointStyle>
            </toolkit:LineSeries>
        </toolkit:Chart.Series>
    </toolkit:Chart>

the <Setter Property="Template" Value="{x:Null}"/> removes the actual point, so if you want the point take off that style.

@Vorrtex, your solution seems to over complicate my simple requirements. Not that it's bad, but just not what I was looking, but thank you for taking the time to help.

Upvotes: 1

Related Questions