Style of selected items in chart

3 posts, 0 answers
  1. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 04 May 2012 Link to this post

    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. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 09 May 2012 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 09 May 2012 Link to this post

    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 >>

Back to Top