[Solved] Custom ItemStyle and Interactivity

[AP]

I've added a custom itemstyle for a RadCharts BarSeriesDefinition to enable conditional formatting via databinding.

i.e. 

<Style x:Key="CustomStyle" TargetType="telerik:Bar">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="telerik:Bar">
                       <Canvas>
                           <Rectangle x:Name="PART_DefiningGeometry"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  RadiusX="0"
                                  RadiusY="0"
                                  StrokeThickness="1"
                                  Fill="{Binding DataItem.BarColour}"
                                   />
                           <Canvas.RenderTransform>
                               <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                           </Canvas.RenderTransform>
                       </Canvas>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

<telerik:BarSeriesDefinition ShowItemToolTips="True" LegendDisplayMode="SeriesLabel" ItemStyle="{StaticResource CustomStyle}" SeriesItemLabelStyle="{StaticResource CustomLabelStyle}"  >

However, even though the interactivity settings are on, the non-selected bars no longer change colour when a bar is hovered over by the mouse.

<telerik:BarSeriesDefinition.InteractivitySettings>
                                            <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" SelectionMode="Single"/>
                                        </telerik:BarSeriesDefinition.InteractivitySettings>

Is there something else that needs adding to the style to support this?

Thanks

[Sia]

Hello Andrew Penny,

Yes, you need to modify the custom style as follows (I see that you do not need the masks over the bars):

<Style x:Key="CustomStyle" TargetType="telerik:Bar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Bar">
                <Canvas x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            RadiusX="0"
                            RadiusY="0"
                            StrokeThickness="1"
                            Fill="{Binding DataItem.BarColour}"  />
                    <Rectangle x:Name="PART_SelectedState"
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}" />
                    <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="#B2000000"/>
                                            </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>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The xaml marked in red is not needed and you can remove it. You need to add the "PART_MainContainer" name, one rectangle over the main one and the VisualStateGroups.

Please try this approach and tell us if you need something else.

All the best,
Sia
the Telerik team

[AP]

Thanks, this works.

Just a small issue - the code below flagged as an error

<DiscreteObjectKeyFrame.Value>
     <System:Double>2</System:Double>
 </DiscreteObjectKeyFrame.Value>

What namespace definition did you use for System?

[Sia]

Hi Andrew Penny,

Just add this namespace definition:
xmlns:System="clr-namespace:System;assembly=mscorlib"

There are differences in parsing between WPF and Silverlight and that is the reason we used the syntax below. If you develop Silverlight application you can set it as follows:

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="2" />

Best wishes,
Sia
the Telerik team

[AP]

That's great.

Thanks for your help.