Enlarge an Element by Mouse Action (Visual Training) !

Introduction

Last week I asked a question and no one guided me to a solution, so I did it by myself. And now I want to share it with other eager users.

In this article, I create a simple WPF application in Expression Blend 3. We mainly work with window and panels, and I have supplied some code as well.

This article contains four steps.

Enlarge a Button with its Reflex on MouseHover

Step 1. Creating Two Buttons (a Button with its Reflex)

In Expression Blend 3, create a WPF project, then create two buttons (create one and copy paste that in the "object and timeline window," so name them (in my project; first: B1,second:reflection). Now select the second one (reflection) and rotate and transform it like this.

Now select the reflection and go to the properties of it and select "OpacityMask" then in the editor panel, one of the opacity icons must be set on '0%' the other one '100%' like this:

Now in the "tool" window, select "Brush Transform" and go to reflection and rotate...

... the rectangle until it looks like a reflex!

Now you must have this:

Step 1 Overview

Step 2. (Stick them Together in a stackPanel )

Now in the "objects" window, select the two buttons and right click >Group into>StackPanel. Now that you have them in a stackpanel, name the stackpanel (mine is BR).

Hint: Make sure that every object has a name.

Step 3. Create the Story

Now in the "Triggers" window, click  on "+Event ":  

in the upside picture, click OK:

By doing this, you are in fact adding this code in XAML:

<Window.Triggers>
	<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="BR"/>
</Window.Triggers> 

Then click the "+" now the rec is on.

When you click add, this code is added to the <window.Resources> property like this:

<Window.Resources>
	<Storyboard x:Key="OnMouseEnter1"/>
</Window.Resources> 

You create a story by doing this.

Step 4. Now you Must Tell the Story!

Select the BR stackpanel and go to the timeline and drag the line to a .5 second for example.

Now in the properties (of BR ) in the "Transform" section, go to the "scale" panel and set

"X=1.5" and "Y=1.5".

OK, close the storyboard.

And run!

Having fun?! If you want when mouse leaves it change into base state, you must add another trigger event like Step 3 and tune it like a mouse. Enter the event but in the timeline you must make sure the second ".5" scale must be set to x=1;y=1;

This is the XAML code you created:

<Window
	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"
	x:Class="Button_enlarge.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480" mc:Ignorable="d">
	<Window.Resources>
		<Storyboard x:Key="OnMouseEnter1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                               Storyboard.TargetName="BR" 
			    Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000"
				    Value="1.5" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
			    Storyboard.TargetName="BR" Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000"
				    Value="1.5" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Key="OnMouseLeave1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
			    Storyboard.TargetName="BR" Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000"
				    Value="1" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
			    Storyboard.TargetName="BR" Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000"
				    Value="1" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="BR">
			<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
		</EventTrigger>
		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="BR">
			<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard"
                               Storyboard="{StaticResource OnMouseLeave1}"/>
		</EventTrigger>
	</Window.Triggers>

	<Grid x:Name="LayoutRoot">
		<StackPanel x:Name="BR" Margin="170,148,288,148"
		    Orientation="Vertical" d:LayoutOverrides="Height"
		        RenderTransformOrigin="0.5,0.5">
			<StackPanel.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</StackPanel.RenderTransform>
			<Button x:Name="B1" Height="73" Content="Button"/>
			<Button x:Name="Reflection" Height="73" Content="Button"
                               RenderTransformOrigin="0.5,0.5">
				<Button.RenderTransform>
					<TransformGroup>
						<ScaleTransform/>
						<SkewTransform/>
						<RotateTransform Angle="180.012"/>
						<TranslateTransform/>
					</TransformGroup>
				</Button.RenderTransform>
				<Button.OpacityMask>
					<LinearGradientBrush EndPoint="0.5,1"
					    StartPoint="0.5,0">
					<LinearGradientBrush.RelativeTransform>
					<TransformGroup>
					<ScaleTransform CenterX="0.5"
                                                 CenterY="0.5" ScaleX="1" ScaleY="0.932"/>
					<SkewTransform AngleX="0" AngleY="0"
                                                 CenterX="0.5" CenterY="0.5"/>
					<RotateTransform Angle="1.531"
                                                 CenterX="0.5" CenterY="0.5"/>
					<TranslateTransform X="-0.002" Y="0.229"/>
					</TransformGroup>
					</LinearGradientBrush.RelativeTransform>
					<GradientStop Color="#00000000" Offset="0"/>
					<GradientStop Color="White" Offset="1"/>
					</LinearGradientBrush>
				</Button.OpacityMask>
			</Button>
		</StackPanel>
	</Grid>
</Window> 

I hope you enjoy this, because I had a lot of fun creating it!

Don't forget to post your comments in the forum below!

Bonus Step

If you want to play a sound when the mouse enters, add a mediaelement (where is not important) and name it (media1 for example) in the properties on "media" section first.  

Then add your "source," set "LoadedBehavior" to manual, then click your button in the design and go to properties, then go to event and double-click on MouseEnter and add the following code on MouseLeave to replay that:

<<this.media1.Play();>>
<<this.media1.Stop();>>

History

• 22^nd February, 2010: Initial post