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

Custom ItemStyle and Interactivity

4 Answers 70 Views
Chart
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 26 Jul 2010, 01:57 PM
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

4 Answers, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 27 Jul 2010, 11:50 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
AP
Top achievements
Rank 1
Veteran
answered on 27 Jul 2010, 01:11 PM
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?
0
Accepted
Sia
Telerik team
answered on 27 Jul 2010, 01:22 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
AP
Top achievements
Rank 1
Veteran
answered on 27 Jul 2010, 01:29 PM
That's great.

Thanks for your help.
Tags
Chart
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Sia
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or