Fading effect on mouseover / hover event for silverlight?

1.5k views Asked by At

I have a set of buttons in a grid on a Map/MapControl. I've been trying to figure out how to make it so that the buttons and the grid are usually invisible, but appear as soon as the user hovers their pointer over them. Suggestions?

1

There are 1 answers

0
EtherDragon On BEST ANSWER

http://msmvps.com/blogs/theproblemsolver/archive/2009/02/17/changing-the-mouseover-effect-on-a-silverlight-listbox.aspx

Here is an article that goes through a tutorial (using blend) to setup various Visual States. About 3/4 down the page there is a sample xaml snippet. Look for this section:

<vsm:VisualState x:Name="MouseOver">
    <Storyboard>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>    
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</vsm:VisualState>

Instead of changing the scale, you could change the Opacity... There's no reason this can't be written in Visul Studio, for the Blend-Challenged (like myself).

Also, refer to http://jesseliberty.com/2010/07/09/visual-state-manager-a-z/ for a set of tutorials for using the huge capabilities of the Visial State Manager.