InteractivitySettings.SelectionScope - change default color

[Igor T]

Hi,
I need to change a default selected Item border color(black) for bar chart. I changed the color for data series to a darker custom one (maroon) and now selected item border blends. What do I need to set to get it? 

My code:

DataSeries

 

 

dataSeries = new DataSeries();

 

 

dataSeries.Definition =

 

new HorizontalBarSeriesDefinition();

 

 

dataSeries.Definition.InteractivitySettings.HoverScope =

 

InteractivityScope.Item;

 

 

dataSeries.Definition.InteractivitySettings.SelectionScope =

 

InteractivityScope.Item;

 

 

dataSeries.Definition.ShowItemLabels =

 

false;

 

 

dataSeries.Definition.ShowItemToolTips =

 

true;

 

 

dataSeries.Definition.Appearance.Fill =

 

StyleHelper.Brushes.MaroonBrush();

 

[Sia]

Hello Igor T,

Please use the following custom ItemStyle for your HorizontalBarSeriesDefinition:

<LinearGradientBrush x:Key="BarMaskReversedBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#00FFFFFF"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#19FFFFFF" Offset="0.2"/>
    <GradientStop Color="#B2FFFFFF" Offset="0.2"/>
</LinearGradientBrush>
<Style x:Key="CustomHorizontalBar" TargetType="telerik:HorizontalBar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:HorizontalBar">
                <Canvas Opacity="0" x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                        Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"
                        Style="{TemplateBinding ItemStyle}"
                        RadiusX="1"
                        RadiusY="1" />
                    <Rectangle Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"
                        RadiusX="1"
                        RadiusY="1"
                        Fill="{StaticResource BarMaskReversedBrush}"  />
                    <Rectangle x:Name="PART_SelectedState"
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            RadiusX="1"
                            RadiusY="1"  />
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"  />
                    </Canvas.RenderTransform>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="HoverStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hovered">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected" />
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" 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_SelectedState" 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>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

All the best,
Sia
the Telerik team

[Mike]

Hi Sia,

this Style won't work in a ResourceDictionary.
I got a Chart with vertical bars. So i edited the telerik:Bar Style (is that the right one, or are there others?).
Here is my code:

<LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#00FFFFFF"/>
        <GradientStop Color="#00FFFFFF" Offset="1"/>
        <GradientStop Color="#19FFFFFF" Offset="0.2"/>
        <GradientStop Color="#B2FFFFFF" Offset="0.2"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="BarOpacityMaskBrush" Color="#FF000000"/>
    <System:Double x:Key="BarMaskRadius">1</System:Double>
    <SolidColorBrush x:Key="BarMaskStroke" Color="Transparent"/>
    <SolidColorBrush x:Key="BarTopMaskBrush" Color="Transparent"/>
    <Style TargetType="telerik:Bar">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:Bar">
                    <Canvas x:Name="PART_MainContainer" Opacity="0">
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0"/>
                        </Canvas.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="HoverStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hovered">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_SelectedState">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Red"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="PART_SelectedState">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Double>2</System:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" RadiusY="{StaticResource BarRadiusY}" RadiusX="{StaticResource BarRadiusX}" Style="{TemplateBinding ItemStyle}" Width="{TemplateBinding ItemActualWidth}"/>
                        <Rectangle Fill="{StaticResource BarMaskBrush}" Height="{TemplateBinding ItemActualHeight}" OpacityMask="{StaticResource BarOpacityMaskBrush}" RadiusY="{StaticResource BarMaskRadius}" RadiusX="{StaticResource BarMaskRadius}" Stroke="{StaticResource BarMaskStroke}" StrokeThickness="{StaticResource BarMaskStrokeThickness}" Width="{TemplateBinding ItemActualWidth}"/>
                        <Rectangle x:Name="PART_SelectedState" Fill="{StaticResource BarTopMaskBrush}" Height="{TemplateBinding ItemActualHeight}" RadiusY="{StaticResource BarRadiusY}" RadiusX="{StaticResource BarRadiusX}" Width="{TemplateBinding ItemActualWidth}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

is it the wrong type for the bars?
-- I just want to get rid of this boring black stroke which is used for the interactivity selection.


regards
Mike

[Sia]

Hello Mike,

Your xaml works as expected on my end. This is the right style for BarSeriesDefinition. Please make sure that you have added this style in the UserControl.Resources.

I have attached image showing the result with your custom style. 

All the best,
Sia
the Telerik team

[Mike]

Hi Sia,

Thanks for checking that Style.
Indeed it seems to work - but i guess i just got some issues with resource-dictionaries. Silverlight is a bit weak in that in my opinion.
For example it can't resolve the resources which i reference in my View (UserControl.Resources.MergedDictionaries).
I keep on with it - hope to find a way throught.

Thanks again !
regards
Mike

[Mike]

meanwhile i got it to work.
But the Label above the bars won't get the same color as i setted on the Bar (selected state).
What is the Type for the for the labels above the bars?

Thanks for hints

regard
Mike

[Sia]

Hi Mike,

Here is the style you need to modify to have the series items customized:

<Style x:Key="SeriesItemLabelStyle1" TargetType="telerik:SeriesItemLabel">
            <Setter Property="Padding" Value="2,0"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:SeriesItemLabel">
                        <Canvas x:Name="PART_MainContainer">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoverStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path Style="{TemplateBinding ConnectorStyle}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" Visibility="{TemplateBinding ConnectorVisibility}">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure x:Name="PART_Connector">
                                            <PolyLineSegment/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Border x:Name="PART_TextContainer" BorderBrush="{TemplateBinding Stroke}" Background="{TemplateBinding Fill}" Height="{TemplateBinding Height}" Style="{TemplateBinding LabelStyle}" Width="{TemplateBinding Width}">
                                <ContentPresenter Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Regards,
Sia
the Telerik team

[Mike]

Hi Sia,

Thanks for your Code Snippet.
But in your example, there is no Selected State - and so it's not a possible solution for my problem.

I have this Style for SeriesItemLabel:

<Style TargetType="telerik:SeriesItemLabel">
        <Setter Property="Padding" Value="2,0"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:SeriesItemLabel">
                    <Canvas x:Name="PART_MainContainer">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="HoverStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hovered">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#7AFF9800" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="path" Style="{TemplateBinding ConnectorStyle}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" Visibility="{TemplateBinding ConnectorVisibility}" Fill="Black">
                            <Path.Data>
                                <PathGeometry>
                                    <PathFigure x:Name="PART_Connector">
                                        <PolyLineSegment/>
                                    </PathFigure>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                        <Border x:Name="PART_TextContainer" BorderBrush="{TemplateBinding Stroke}" Background="{TemplateBinding Fill}" Height="{TemplateBinding Height}" Style="{TemplateBinding LabelStyle}" Width="{TemplateBinding Width}">
                            <ContentPresenter Margin="{TemplateBinding Padding}"/>
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

As you can see i change the Fill-color of the Bars when they are selected.
But now - my question is - the selected item(s) doen't change the color for the itemlabel (i added a screen so it's clearer).

How to approach that?

thanks and with regards

Mike

Edit: orange is my Selection Color

[Sia]

Hi Mike,

You can add selected states by yourself. Here you go:

<Style x:Key="SeriesItemLabelStyle1" TargetType="telerik:SeriesItemLabel">
            <Setter Property="Padding" Value="2,0"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:SeriesItemLabel">
                        <Canvas x:Name="PART_MainContainer">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoverStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PART_TextContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="Red"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path Style="{TemplateBinding ConnectorStyle}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" Visibility="{TemplateBinding ConnectorVisibility}">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure x:Name="PART_Connector">
                                            <PolyLineSegment/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Border x:Name="PART_TextContainer" BorderBrush="{TemplateBinding Stroke}" BorderThickness="1" Background="{TemplateBinding Fill}" Height="{TemplateBinding Height}" Style="{TemplateBinding LabelStyle}" Width="{TemplateBinding Width}">
                                <ContentPresenter Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Best wishes,
Sia
the Telerik team

[Mike]

Hello Sia,

thanks for your reply.
It seems that in my style - PART_TextContainer is not available.
I dont know what this Container is for, so...

Thank you and with regards
Mike

[Sia]

Hello Mike,

The following XAML snippet is from the provided code in your previous reply:

<Border x:Name="PART_TextContainer" BorderBrush="{TemplateBinding Stroke}" Background="{TemplateBinding Fill}" Height="{TemplateBinding Height}" Style="{TemplateBinding LabelStyle}" Width="{TemplateBinding Width}">
    <ContentPresenter Margin="{TemplateBinding Padding}"/>
</Border>

The x:Name="PART_TextContainer" is exactly what you need to style on selection. Please try the style which I have sent and let me know whether it works on your end.

Kind regards,
Sia
the Telerik team

[Mike]

Hi Sia,

i saw that one in my style.
But there is no way to set the background on selected state to my preferred color.as it seeems.

Here is my selected state of the SeriesItemLabel:

<VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFFF5050" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="PART_TextContainer" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>


What am I missing ?
Thanks again for Helps & Hints :)

regards
Mike

[Evgenia]

Hi Mike,

Why don't you open a formal support thread so that you can send us a sample version of your project? This way we will be able to debug it locally and get back to you with our findings.
Furthermore the response time for Support threads is smaller than the one in the forums, whch means that you'll receive our feedback faster.

All the best,
Evgenia
the Telerik team