Custom ItemStyle and Interactivity

5 posts, 1 answers
  1. AP
    AP avatar
    234 posts
    Member since:
    Apr 2010

    Posted 26 Jul 2010 Link to this post

    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
  2. Sia
    Admin
    Sia avatar
    745 posts

    Posted 27 Jul 2010 Link to this post

    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
  3. AP
    AP avatar
    234 posts
    Member since:
    Apr 2010

    Posted 27 Jul 2010 Link to this post

    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?
  4. Answer
    Sia
    Admin
    Sia avatar
    745 posts

    Posted 27 Jul 2010 Link to this post

    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
  5. AP
    AP avatar
    234 posts
    Member since:
    Apr 2010

    Posted 27 Jul 2010 Link to this post

    That's great.

    Thanks for your help.
Back to Top