This is a migrated thread and some comments may be shown as answers.

Style of selected items in chart

2 Answers 41 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Hubert
Top achievements
Rank 1
Hubert asked on 04 May 2012, 08:44 AM
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

2 Answers, 1 is accepted

Sort by
0
Hubert
Top achievements
Rank 1
answered on 09 May 2012, 01:02 PM
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
0
Yavor
Telerik team
answered on 09 May 2012, 01:14 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Chart
Asked by
Hubert
Top achievements
Rank 1
Answers by
Hubert
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or