Click here to Skip to main content
Click here to Skip to main content
Go to top

Enlarge an Element by Mouse Action (Visual Training) !

, 22 Feb 2010
Rate this:
Please Sign up or sign in to vote.
Enlarge a button with its reflex on mouse hover

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.

button1.jpg

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:

opacity.jpg

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

brush_transform.jpg 

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

Now you must have this:

button_reflex.jpg

Step 1 Overview

transform.jpg

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.

stack.jpg

Step 3. Create the Story

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

ok.jpg

in the upside picture, click OK:

t1.jpg

t2.jpg

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.

t3.jpg

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".

sory.jpg

OK, close the storyboard.

close.jpg

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;

target.jpg

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();>>

History

  • 22nd February, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nima.naqipoor
Software Developer
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
first start programming with c++ ;
with "Hello World" !!then fall in love with c# !
now working on c# and wpf.
 
the Movies I love for ever is :
Gladiator , the last samurai , schindler's list and Forrest gump.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 22 Feb 2010
Article Copyright 2010 by Nima.naqipoor
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid