DataTrigger on LineColor

[Yves]

Hi,

First, sorry for my bad english, i'm a french student in internship.

Well, in my application, i'm using MVVM pattern, and I've created an UserControl, with a telerik chart (using LineSerie).

I would like to change the line color when a property change.

Here is an example of what I want to do:

<Grid DataContext="{Binding PublicationCollecteurVM}" Width="auto" Height="auto">
           <Grid.Resources>
              <Style TargetType="telerik:Chart">
                 <Style.Triggers>
                       <!-- Well, You can imagine that I'm trying to change Line color-->
                       <DataTrigger Binding="{Binding Path=GestionNiveau,NotifyOnSourceUpdated=True}" Value="2">
                           <Setter Property="Chart.LineColor" Value="#FCB143"/>
                       </DataTrigger>
                       <DataTrigger Binding="{Binding Path=GestionNiveau,NotifyOnSourceUpdated=True}" Value="1">
                           <Setter Property="Chart.LineColor" Value="#FFFF48"/>
                       </DataTrigger>
                       <DataTrigger Binding="{Binding Path=GestionNiveau,NotifyOnSourceUpdated=True}" Value="3">
                           <Setter Property="Chart.LineColor" Value="#FE761B"/>
                       </DataTrigger>
                 </Style.Triggers>
              </Style>
           </Grid.Resources>
           <telerik:RadChart x:Name="RadChart1"  telerik:StyleManager.Theme="Office_Black"  Grid.Row="1" Height="193" Width="372" Grid.Column="1" ItemsSource="{Binding NbHitLus}">
               <telerik:RadChart.DefaultView>
                   <telerik:ChartDefaultView>
                       <telerik:ChartDefaultView.ChartArea>
                           <telerik:ChartArea LegendName="CustomLegend">
                               <telerik:ChartArea.AxisX>
                                   <telerik:AxisX MajorGridLinesVisibility="Collapsed"
                                                  Title="Minute" />
                               </telerik:ChartArea.AxisX>
                               <telerik:ChartArea.AxisY>
                                   <telerik:AxisY MajorGridLinesVisibility="Collapsed"
                                                  MinorTicksVisibility="Visible"
                                                  Title="NbHitsLus" AutoScale="True" />
                               </telerik:ChartArea.AxisY>
                           </telerik:ChartArea>
                       </telerik:ChartDefaultView.ChartArea>
                       <telerik:ChartDefaultView.ChartLegend>
                           <telerik:ChartLegend Visibility="Collapsed" x:Name="CustomLegend" UseAutoGeneratedItems="True" Width="0">
                               <telerik:ChartLegend.Header>Custom legend header</telerik:ChartLegend.Header>
                           </telerik:ChartLegend>
                       </telerik:ChartDefaultView.ChartLegend>
                       <telerik:ChartDefaultView.ChartTitle>
                           <telerik:ChartTitle HorizontalAlignment="Center" >
                               <TextBlock TextAlignment="Center">
                                   <TextBlock Text="{Binding infoProg}"/>
                                   <LineBreak/>
                                   <TextBlock Margin="-8,0,0,0">Numéro collecteur :</TextBlock>
                                   <TextBlock Text="{Binding IdCollect}"></TextBlock>
                                   <TextBlock Padding="10,0,0,0">Numéro log :</TextBlock>
                                   <TextBlock Text="{Binding IdLog}"></TextBlock>
                               </TextBlock>
                           </telerik:ChartTitle>
                       </telerik:ChartDefaultView.ChartTitle>
                   </telerik:ChartDefaultView>
               </telerik:RadChart.DefaultView>
               <telerik:RadChart.DefaultSeriesDefinition>
                   <telerik:LineSeriesDefinition/>
               </telerik:RadChart.DefaultSeriesDefinition>
           </telerik:RadChart>
       </Grid>

So first could you tell me how to change Line color ?

Thank's

[Yves]

up ? :(

EDIT : I've seen this code on your web site :

<Style x:Key="SplineAreaStyle"
      TargetType="telerikCharting:SelfDrawingSeries">
   <Setter Property="BorderLineStyle">
       <Setter.Value>
           <Style TargetType="Shape">
               <Setter Property="Stroke"
                       Value="Orange" />
               <Setter Property="StrokeThickness"
                       Value="3" />
           </Style>
       </Setter.Value>
   </Setter>
   <Setter Property="BackgroundStyle">
       <Setter.Value>
           <Style TargetType="Shape">
               <Setter Property="Fill"
                       Value="Yellow" />
               <Setter Property="Opacity"
                       Value="0.5" />
           </Style>
       </Setter.Value>
   </Setter>
</Style>

I've tryed to apply it on my application but it doesn't work

[Yves]

System.Windows.Data Error: 40 : BindingExpression path error: 'Moyenne' property not found on 'object' ''DataSeries' (HashCode=16431653)'. BindingExpression:Path=Moyenne; DataItem='DataSeries' (HashCode=16431653); target element is 'Path' (Name='PART_TopBorderLine'); target property is 'NoTarget' (type 'Object')

Here is a strange error message.

Actually now I can change the line color of my chart thank to this blog :

http://blogs.telerik.com/manoldonev/posts/09-01-06/WPF_Customizing_the_chart_series_appearance_in_RadChart.aspx

When I tryed to apply DataTrigger on this style, the line didn't appear. Here is my code :

<Grid.Resources>
                   <telerik:StylesPalette x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:Office_BlackTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyLineStyle}}">
                   <Style TargetType="{x:Type Shape}">
                           <Setter Property="StrokeStartLineCap" Value="Round" />
                           <Setter Property="StrokeEndLineCap" Value="Round" />
                           <Setter Property="StrokeThickness" Value="2" />
                           <Style.Triggers>
                               <DataTrigger Binding="{Binding Path=Moyenne,NotifyOnSourceUpdated=True }"  diag:PresentationTraceSources.TraceLevel="High" Value="1">
                                   <Setter Property="Stroke" Value="Blue" />
                               </DataTrigger>
                               <DataTrigger Binding="{Binding Path=Moyenne,NotifyOnSourceUpdated=True}" Value="2">
                                   <Setter Property="Stroke" Value="Red" />
                               </DataTrigger>
                           </Style.Triggers>
                       </Style>
                   </telerik:StylesPalette>
               </Grid.Resources>

I don't understand error message because, other properties works great... Any idea ? :(

Something very strange :

<Style TargetType="telerik:RadChart">
                   <Style.Triggers>
                       <DataTrigger Binding="{Binding Path=Moyenne,NotifyOnSourceUpdated=True }"  diag:PresentationTraceSources.TraceLevel="High" Value="1">
                           <Setter Property="telerik:RadChart.Background" Value="Blue" />
                       </DataTrigger>
                       <DataTrigger Binding="{Binding Path=Moyenne,NotifyOnSourceUpdated=True}" Value="2">
                           <Setter Property="telerik:RadChart.Background" Value="Red" />
                       </DataTrigger>
                   </Style.Triggers>
               </Style>

this code works !! So the problem comes from LineSerie ?...^^ Thank's

EDIT : It seems that the data trigger "lose" DataContext, that's why it' can't find "Moyenne" property

[Yves]

I've fixed this problem ! \o/

I've just add a property for the DataContext (this isn't very logical but it works...) :

<telerik:StylesPalette x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:Office_BlackTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyLineStyle}}">
                   <Style TargetType="{x:Type Shape}">
                       <Setter Property="DataContext" Value="{Binding ElementName=brd1,Path=DataContext}"/>
                       <Setter Property="StrokeStartLineCap" Value="Round" />
                       <Setter Property="StrokeEndLineCap" Value="Round" />
                       <Setter Property="StrokeThickness" Value="2" />
                       <Setter Property="Stroke" Value="LightBlue" />
                       <Style.Triggers>
                           <DataTrigger Binding="{Binding Moyenne,NotifyOnSourceUpdated=True}" diag:PresentationTraceSources.TraceLevel="High" Value="2">
                               <Setter Property="Stroke" Value="Red" />
                           </DataTrigger>
                       </Style.Triggers>
                   </Style>
               </telerik:StylesPalette>