通过鼠标操作放大元素（视觉训练）！
3.86/5 (3投票s)
鼠标悬停时放大按钮及其反射
引言
上周我问了一个问题，但没有人引导我找到解决方案，所以我自己完成了。现在我想与渴望学习的其他用户分享它。
在本文中，我在 Expression Blend 3 中创建了一个简单的 WPF 应用程序。我们主要使用窗口和面板，并且我也提供了一些代码。
本文包含四个步骤。
鼠标悬停时放大按钮及其反射
步骤 1. 创建两个按钮（一个按钮及其反射）
在 Expression Blend 3 中，创建一个 WPF 项目，然后创建两个按钮（创建一个并将其复制粘贴到“对象和时间线窗口”中，然后命名它们（在我的项目中；第一个：B1，第二个：reflection）。现在选择第二个按钮（reflection）并像这样旋转和变换它。
现在选择 reflection 并进入其属性，然后选择“OpacityMask”，然后在编辑器面板中，必须将其中一个不透明度图标设置为“0%”，另一个设置为“100%”，如下所示
现在在“工具”窗口中，选择“Brush Transform”并进入 reflection 并旋转...
...矩形，直到它看起来像一个反射！
现在你必须得到这个
步骤 1 概述
步骤 2.（将它们放在一个 StackPanel 中）
现在在“对象”窗口中，选择两个按钮，右键单击 > 组合为 > StackPanel。现在你将它们放在一个 StackPanel 中，命名该 StackPanel（我的命名为 BR）。
提示：确保每个对象都有一个名称。
步骤 3. 创建 Storyboard
现在在“Triggers”窗口中，单击“+Event”：
在上面的图片中，单击“确定”
通过这样做，你实际上将这段代码添加到 XAML 中
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="BR"/>
</Window.Triggers>
然后单击“+”，现在记录已开启。
当你单击添加时，这段代码会添加到 <window.Resources> 属性中，如下所示
<Window.Resources>
<Storyboard x:Key="OnMouseEnter1"/>
</Window.Resources>
通过这样做，你创建了一个 Storyboard。
步骤 4. 现在你必须讲述这个 Storyboard！
选择 BR StackPanel，进入时间线并将线条拖动到例如 0.5 秒。
现在在 BR 的属性中，在“Transform”部分，进入“scale”面板并设置
“X=1.5”和“Y=1.5”。
好的，关闭 Storyboard。
然后运行！
玩得开心吗？！如果你希望鼠标离开时它恢复到基本状态，你必须添加另一个触发事件，如步骤 3 中所述，并将其调整为鼠标事件。进入事件，但在时间线中，你必须确保第二个“0.5”比例设置为 x=1;y=1;
这是你创建的 XAML 代码
<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>
我希望你喜欢这个，因为我创建它时玩得很开心！
不要忘记在下面的论坛中发布你的评论！
附加步骤
如果你希望鼠标进入时播放声音，添加一个 mediaelement（位置不重要）并在“media”部分中命名它（例如 media1）。
然后添加你的“source”，将“LoadedBehavior”设置为 manual，然后单击设计中的按钮，进入属性，然后进入事件，然后双击 MouseEnter，并在 MouseLeave 上添加以下代码以重新播放该声音
<<this.media1.Play();>>
<<this.media1.Stop();>>
历史
- 2010年2月22日：初始发布