Style of selected items in chart

[Hubert]

Hi Telerik Team,

the telerik example Programatically selecting visual items with the new interactivity api in radchart
helped me a lot, because i needed exactly this behaviour, but i have a problem to style the points.

I tried this (with different colors to see what is applied)

telerik:SeriesAppearanceSettings x:Key="BenchmarkAppearance"
                                                  Stroke="Wheat"
                                                  StrokeThickness="2"
                                          Fill="DarkBlue">
            <telerik:SeriesAppearanceSettings.PointMark>
                <telerik:PointMarkAppearanceSettings Shape="Circle" Stroke="White" StrokeThickness="1"
                                                     Fill="Gray"/>
            </telerik:SeriesAppearanceSettings.PointMark>
        </telerik:SeriesAppearanceSettings>

and this

<Style x:Key="BenchmarkPointStyle" TargetType="telerik:PointMark">
        <Setter Property="Shape"
                Value="Circle" />
        <Setter Property="Stroke"
                Value="White" />
        <Setter Property="StrokeThickness"
                Value="1" />
        <Setter Property="Fill"
                Value="Yellow" />
    </Style>

and this one from the help file RadControls Wpf

LineSeriesDefinition l = new LineSeriesDefinition();
l.Appearance.PointMark.Stroke = new SolidColorBrush( Colors.Blue );
l.Appearance.PointMark.StrokeThickness = 1;
l.Appearance.PointMark.Fill = new SolidColorBrush( Colors.Transparent );
l.Appearance.PointMark.Shape = MarkerShape.Diamond;
this.radChart.DefaultSeriesDefinition = l;

but none of them worked really out.
The first example works until the selected points are deselected. After deselection the style is the default
style and not my applied one. (My next attempt is to set the style again, after the points are deselected.)

Do you have any idea?

kind regards
Hubert

[Hubert]

Hi,

i solved the problem.

The problem was that i used a StaticResource for the Appearance, but
the Appearance disapeared after ClearSelection.
I removed the StaticResource and set the PointShape and PointSize
directly in the ScatterSeriesDefinition and that works fine.

kind regards
Hubert

[Yavor]

Hello Hubert,

When you select a scatter point on the screen it goes to Selected Visual state. Deselecting it puts it into Unselected state. You can easily customize the scatter point behavior in selection by changing the states. Here is some code:

<telerik:RadChart.Resources>
    <Style TargetType="telerik:ScatterPoint">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:ScatterPoint">
                    <Canvas x:Name="PART_MainContainer">
                        <telerik:PointMark x:Name="PART_PointMark"
                                           Canvas.Top="{TemplateBinding StartPointY}"
                                           PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"
                                           PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
                                           ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                           Size="{TemplateBinding PointSize}" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="HoverStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hovered">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_PointMark" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Transparent" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_PointMark" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <system:Double xmlns:system="clr-namespace:System;assembly=mscorlib">0</system:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_PointMark" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Red" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_PointMark" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <system:Double xmlns:system="clr-namespace:System;assembly=mscorlib">2</system:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:RadChart.Resources>

This implicit style defines a new visual states and overrides the default ones. I have attached a project that demonstrates how you can use it in WPF and SL.

Kind regards,
Yavor
the Telerik team