Creating a Button that transitions when a user hovers, or leaves : Button « UI Controls « Silverlight

1. Silverlight
2. UI Controls
3. Button

Creating a Button that transitions when a user hovers, or leaves

    
<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>

    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="myButton" Width="75" Height="75" Content="Push Me">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid RenderTransformOrigin=".5,.5">
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="myTransform"/>
                        </Grid.RenderTransform>

                        <Ellipse x:Name="myEllipse" RenderTransformOrigin=".5,.5" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin="0.3,0.2">
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.075" ScaleY="1.141"/>
                                            <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                            <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                            <TranslateTransform X="-0.04" Y="0.07"/>
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#FFD9D9D9" Offset="0.004" />
                                    <GradientStop Color="#FF2103BA" Offset="1" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />

                        <VisualStateManager.VisualStateGroups>                            
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                    </Storyboard>
                                </VisualState>
                                
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                        <DoubleAnimation To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                    </Storyboard>
                                </VisualState>

                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Normal" To="MouseOver">                                        
                                        <Storyboard Duration="00:00:01">
                                            <DoubleAnimation From="1.0" To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                            <DoubleAnimation From="1.0" To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                        </Storyboard>                                        
                                    </VisualTransition>
                                    
                                    <VisualTransition From="MouseOver" To="Normal">                                        
                                        <Storyboard Duration="00:00:01">
                                            <DoubleAnimation From="1.25" To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                            <DoubleAnimation From="1.25" To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                        </Storyboard>                                        
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>                                                        
                        </VisualStateManager.VisualStateGroups>                                               
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

   
    
    
    
  

Related examples in the same category

1.	Creating a Button
2.	Define a border around a single Button control setting the BorderThickness and BorderBrush properties
3.	Place a border around several Button controls contained in a StackPanel
4.	Flashing Button
5.	Button controls provide several properties that can be set to customize the look and feel of the control
6.	Simple Button Template
7.	Button with OpacityMask
8.	Click to rotate a Button
9.	Click to scale a Button
10.	Button Click event handler
11.	Put Button onto a Grid
12.	Add buttons to a Canvas with code
13.	Gradient background button
14.	Set Click Mode for Button
15.	Convert event send to Button
16.	Polygon as Button content
17.	Image Button by resource
18.	Set Min width and max width for Button
19.	Creating a Button that enlarges when a user hovers over it
20.	Button Template
21.	Button click event
22.	Stack three button elements vertically
23.	The button and text block are up-side down in the custom coordinate system.
24.	Button HorizontalAlignment="Center"
25.	Button Clip