Change Bar color on MouseOver

2 posts, 0 answers
  1. derrick
    derrick avatar
    21 posts
    Member since:
    Sep 2009

    Posted 02 Dec 2009 Link to this post

    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>
  2. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 04 Dec 2009 Link to this post

    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.
Back to Top