Change Bar color on MouseOver

[derrick]

Hi,

I'd like the bars to change color when the mouse moves over them.  This should be easy, but I haven't been able to get it to work.  I created a copy of the template for Bar and added vsm to it for a mouseover color change.  Everything looks fine in Blend but it doesn't change color at runtime.  I tried this a few different ways (adding a new rectangle vs changing the DefiningGeometry rectangle) with no luck.

Here's the template below.  Any help is greatly appreciated.

Thanks,

Derrick


 <Style x:Key="BarStyle1" TargetType="chart:Bar">
  <Setter Property="Foreground" Value="{StaticResource SeriesItemLabelForeground}"/>
  <Setter Property="FontSize" Value="{StaticResource SeriesItemLabelFontSize}"/>
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="chart:Bar">
     <Canvas x:Name="PART_CanvasContainer" Opacity="0">
      <Canvas.RenderTransform>
       <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0"/>
      </Canvas.RenderTransform>
            <Canvas.Triggers>
              <EventTrigger RoutedEvent="Rectangle.Loaded">
                  <EventTrigger.Actions>
                      <BeginStoryboard>
                          <Storyboard
                              x:Name="PART_Storyboard"
                              BeginTime="00:00:00.5">
                              <DoubleAnimation
                                  To="1"
                                  Storyboard.TargetName="PART_AnimationTransform"
                                  Storyboard.TargetProperty="ScaleY"
                                  Duration="00:00:00.25"
                                  BeginTime="00:00:00.2">
                              </DoubleAnimation>
                          </Storyboard>
                      </BeginStoryboard>
                  </EventTrigger.Actions>
              </EventTrigger>
          </Canvas.Triggers>
            <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualStateGroup.Transitions>
                  <vsm:VisualTransition To="Normal" />
                  <vsm:VisualTransition To="MouseOver"/>
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="Normal" />
                <vsm:VisualState x:Name="MouseOver">
                  <Storyboard>
                   <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PART_DefiningGeometry" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFD41B73"/>
                   </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
           
 
             
      <Rectangle x:Name="PART_DefiningGeometry" RadiusX="{StaticResource BarRadiusX}" RadiusY="{StaticResource BarRadiusY}" Height="{TemplateBinding ItemActualHeight}" Style="{TemplateBinding ItemStyle}" Width="{TemplateBinding ItemActualWidth}" Stroke="{x:Null}"/>
      <Rectangle Fill="{StaticResource BarMaskBrush}" RadiusX="{StaticResource BarRadiusX}" RadiusY="{StaticResource BarRadiusY}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" OpacityMask="{StaticResource BarOpacityMaskBrush}"/>
      <Rectangle Fill="{StaticResource BarTopMaskBrush}" RadiusX="{StaticResource BarRadiusX}" RadiusY="{StaticResource BarRadiusY}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}"/>
      <Rectangle x:Name="PART_MouseOverIndicator" RadiusX="{StaticResource BarRadiusX}" RadiusY="{StaticResource BarRadiusY}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Fill="White" Opacity="0"/>
           
      <chart:SeriesItemLabel IsHitTestVisible="False" x:Name="PART_SeriesItemLabel" Style="{TemplateBinding SeriesItemLabelStyle}" Visibility="{TemplateBinding SeriesItemLabelVisibility}" Content="{TemplateBinding SeriesItemLabelText}"/>
     </Canvas>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

[Dwight]

Hi derrick,

Currently the RadChart does not change visual states according to actions. This feature will be implemented later on.

Currently, I can provide the following workaround - add custom mouse event handlers in the Bar template:

<!-- ... -->
 <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="chart:Bar">
     <Canvas x:Name="PART_CanvasContainer" Opacity="0" MouseEnter="CanvasMouseEnter" MouseLeave="CanvasMouseLeave">
<!-- ... -->

And in the code-behind:

private void CanvasMouseEnter(object sender, MouseEventArgs e)
{
    Control control = VisualTreeHelper.GetParent(sender as DependencyObject) as Control;
    VisualStateManager.GoToState(control, "MouseOver", true);
}

private void CanvasMouseLeave(object sender, MouseEventArgs e)
{
    Control control = VisualTreeHelper.GetParent(sender as DependencyObject) as Control;
    VisualStateManager.GoToState(control, "Normal", true);
}

Let me know if that solution suites your needs.

Best,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.