customizing button problem RRS feed

  • Question

  • hello everyone,

    I have created custom button, for mouse over state i have added some animations like color for textblock and translate animation which works fine. But when i press button same animation is coming up. I mean when i press the button what every animation i have created for mouseover state same animation is activated for pressed state. I wanted to add different color animation for press state. Can anyone say why this happening. Below is the code

    <Button x:Name="btnHome" HorizontalAlignment="Left" BorderThickness="0" Width="100" Style="{StaticResource btnHomeStyle}">


    <i:EventTrigger EventName="MouseEnter">

    <ei:PlaySoundAction Source="/MenuSound.wma" Volume="1"/>




    <Style x:Key="btnHomeStyle" TargetType="Button">

    <Setter Property="Background" Value="#FF1F3B53"/>

    <Setter Property="Foreground" Value="#FF000000"/>

    <Setter Property="Padding" Value="3"/>

    <Setter Property="BorderThickness" Value="1"/>

    <Setter Property="BorderBrush">


    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

    <GradientStop Color="#FFA3AEB9" Offset="0"/>

    <GradientStop Color="#FF8399A9" Offset="0.375"/>

    <GradientStop Color="#FF718597" Offset="0.375"/>

    <GradientStop Color="#FF617584" Offset="1"/>




    <Setter Property="Template">


    <ControlTemplate TargetType="Button">



    <VisualStateGroup x:Name="CommonStates">

    <VisualState x:Name="Normal"/>

    <VisualState x:Name="MouseOver">


    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="tbHome">

    <EasingColorKeyFrame KeyTime="0" Value="#FFAFAFAF"/>

    <EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>


       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="tbHome">

    <EasingDoubleKeyFrame KeyTime="0" Value="0">


    <BackEase EasingMode="EaseOut"/>



    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="16">


    <BackEase EasingMode="EaseOut" Amplitude="1"/>



    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">


    <BackEase EasingMode="EaseOut"/>







    <VisualState x:Name="Pressed">


    <VisualState x:Name="Disabled"/>


    <VisualStateGroup x:Name="FocusStates">

    <VisualState x:Name="Focused"/>

    <VisualState x:Name="Unfocused"/>



    <Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3" Opacity="0"/>

    <TextBlock x:Name="tbHome" TextWrapping="Wrap" Text="Home" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18.667" FontFamily="Pristina" Foreground="#FFAFAFAF" RenderTransformOrigin="0.5,0.5">















    Thank you

    Wednesday, January 11, 2012 12:28 AM

All replies

  • From your xaml, it appears you don't have anything set for the Pressed state, which is what would be activated when you press the button.
    Wednesday, January 11, 2012 1:53 AM
  • For some reason, even though with the code above you've done nothing for "pressed" state, Silverlight treats the mouseDown as mouseEnter.  And even adding my own pressed state, I still got the same results as you... it called the mouse over state.  So since Blend won't play right, maybe you can trick it.

    A way around this is...

    1. Go into your MouseOver state and remove the key frames for "RenderTransform".  (Basically the bounce action, but leave the color change.)

    2. While you are still in the template, create a new storyboard that does your "RenderTransform" or bounce action.

    3.  From your assets panel, add a "ControlStoryboard" action to the template grid and set it for mouseEnter and to play your newly created storyboard.


    Really sorry you're having problems.



    P.S.  Sorry Chuck... I'm browsing the forums trying to fix/alter my project.... I'll keep my mouth shut I promise. :)

    Wednesday, January 11, 2012 2:00 AM

    Well thx for your reply, I will explain clearly the requirement. I have custom buttons like home, contact us, about us etc and when page is loaded buttons colour should be say Grey with translate animations. When user click on say contact us button that button colour should be say white. Any ideas plz thx.

    Wednesday, January 11, 2012 4:32 PM