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
- 22nd February, 2010: Initial post