WPF charting toolkit, changing style of selected datapoint in a line series

Jul 27, 2009 at 7:42 PM

Hi, I am trying to change the style of a LineDataPoint in a LineSeries when it is selected. I am able to write my own template to change the style of all the datapoints but am unsure of how to go about changing the style of the selected one in a line series.  The default template used by the wpf charting takes care of this changing the color of the datapoint on selection but since I am using my own template to change the line style and the tootip style for the datapoint, I am unable to achieve the above requirement. Can anyone help me out ?

Jul 27, 2009 at 11:13 PM

The default LineDataPoint Style/Template includes a VSM group "SelectionStates" with a state "Selected" that's activated by LineDataPoint at the appropriate time. The default Template behavior simply shows the included Ellipse "SelectionHighlight" to add the color overlay you see, but you can change this behavior however you want by using the associated VSM Storyboard to make the necessary changes. Once you set up the VSM states, this will work just fine in completely custom Templates as well! :)

Jul 30, 2009 at 9:59 PM

Thanks a lot David .. I will check it out

Aug 4, 2009 at 4:50 AM

I was trying to use the Visual state manager to edit the selected state but I ended up with the following error messages (I am using VS). (I also get the first error when I try the project in Expression Blend)

Error    1    The property 'VisualStateGroups' cannot be set as a property element on template. Only Triggers and Storyboards are allowed as property elements.

Error    2    The attachable property 'VisualStateGroups' was not found in type 'VisualStateManager'.  

 I am unable to figure out the reason for the first error. Am I doing anything wrong in using the vsm? My style for the line data point is below -

<Style x:Key="CostLineDataPointStyle" TargetType="charting:LineDataPoint">
            <Setter Property="Background" Value="Red" />
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="4"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Width" Value="11" />
            <Setter Property="Height" Value="11" />
            <Setter Property="Template">
                    <ControlTemplate TargetType="charting:LineDataPoint">

                            <vsm:VisualStateGroup x:Name="MyState">
                                <vsm:VisualState x:Name="Selected">
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Background)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="Red"/>

                        <Grid x:Name="Root" Opacity="1">
                  <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" 
                     Stroke="{TemplateBinding BorderBrush}" 
                     Fill="{TemplateBinding Background}"/>



Aug 6, 2009 at 12:04 AM

The <VisualStateManager.VisualStateGroups> element must appear under the root element (it's an attached DependencyProperty) - the syntax above is invalid. I'd recommend refering back to the original XAML and gradually making edits to get it where you want it.

Hope this helps!

Aug 12, 2009 at 2:33 PM

Thanks david.

Here is the Xaml Code that worked for me , just in case anyone else got stuck at the same place. (My Visual Studio still shows an error - 'visualStateGroups' not found but it compiles and runs fine)

<ControlTemplate TargetType='charting:LineDataPoint' x:Key='BenefitLineTransition'>
            <Grid Opacity='1' x:Name='Root'>
                    <vsm:VisualStateGroup x:Name='SelectionStates'>
                            <vsm:VisualTransition GeneratedDuration='0:0:0.1' />
                        <vsm:VisualState x:Name='Unselected' />
                        <vsm:VisualState x:Name='Selected'>
                                <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Duration='00:00:00.0010000' Storyboard.TargetName='SelectionHighlight' Storyboard.TargetProperty='(UIElement.Opacity)'>
                                    <SplineDoubleKeyFrame KeyTime='00:00:00' Value='1' />
                <Ellipse Fill='Green' Stroke="White" StrokeThickness="1" />
                <Ellipse Fill='Black' Stroke="White" StrokeThickness="1"  Opacity='0' x:Name='SelectionHighlight' />

<Style x:Key="BenefitLineDataPointStyle" TargetType="charting:LineDataPoint">
            <Setter Property="Background" Value="Green" />
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="8"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Width" Value="12" />
            <Setter Property="Height" Value="12" />
            <Setter Property="Template" Value="{StaticResource BenefitLineTransition}"/>

I added the following xmlns -