Styling C1Chart PlotElements: The MVVM Way

MVVM architecture is quite popular among developer community and is heavily used these days. MVVM in Silverlight/WPF unlike its other Data Model counterparts, follows a simple fundamental of Code-Free Views. Even though there are lot of conceptual features associated with MVVM, the term Code-Free Views best fits to tell what MVVM is all about. It specifically addresses the power of data-binding and allows for a clean separation between presentation and business logic. C1Chart for Silverlight/WPF provides a very powerful event PlotElementLoaded, which can be used to style the chart PlotElements (Symbols). You can apply animations, color, strokes etc in the above mentioned event. This all is good; however, when using MVVM, one would prefer to style those PlotElements in XAML. Let me walk you through simple XAML styles that can be used in this case. For implementation, lets consider a 'Color' property in Data Model Class. This property decides the fill color for the PlotElements.

<Style x:Key="ss1" TargetType="{x:Type c1chart:PlotElement}">  
 <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Self}, Path=DataPoint.DataObject.Color}"/>  
</Style>  

Now, this was simple. Moving ahead, following code snippet introduces DataTriggers(with an IValueConverter) used to fill PlotElements with different colors depending on X value:-

<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=DataPoint.X,Converter={StaticResource cc}}" Value="true">  
 <Setter Property="Fill" Value="Red" />  
</DataTrigger>  
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=DataPoint.X,Converter={StaticResource cc}}" Value="false">  
 <Setter Property="Fill" Value="Green" />  
</DataTrigger>  

Similarly, there are various other features you can handle this way. Lets consider another example to show a MouseEnter animation in Style (using EventTrigger). The below animation adds a growing animation to the PlotElements.

<Style x:Key="ss1" TargetType="{x:Type c1chart:PlotElement}">  
 <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>  
 <Setter Property="RenderTransform">  
  <Setter.Value>  
   <ScaleTransform  ScaleX="1" ScaleY="1"/>  
  </Setter.Value>  
 </Setter>  
 <Style.Triggers>  
  <EventTrigger RoutedEvent="MouseEnter">  
   <BeginStoryboard>  
    <Storyboard>  
     <DoubleAnimation Duration="00:00:00:01" Storyboard.TargetProperty="RenderTransform.ScaleX" To="4" From="1" AutoReverse="True" />  
     <DoubleAnimation Duration="00:00:00:01" Storyboard.TargetProperty="RenderTransform.ScaleY" To="4" From="1" AutoReverse="True"/>  
    </Storyboard>  
   </BeginStoryboard>  
  </EventTrigger>  
 </Style.Triggers>  
</Style>  

Refer to the attached sample for complete implementation.