C# 如何通过WPF动画使图像变大(产生选择的错觉)?
我对WPF非常陌生,甚至对WPF中的动画也比较新。我知道有故事板等,但我正在寻找一个具体的效果,所以我可以从那里工作,修补它 有谁能给我一个简单的例子,关于图像控件MouseDown(因为WPF中的这个控件中没有单击事件)通过一个漂亮的动画使图像变大C# 如何通过WPF动画使图像变大(产生选择的错觉)?,c#,wpf,image,animation,C#,Wpf,Image,Animation,我对WPF非常陌生,甚至对WPF中的动画也比较新。我知道有故事板等,但我正在寻找一个具体的效果,所以我可以从那里工作,修补它 有谁能给我一个简单的例子,关于图像控件MouseDown(因为WPF中的这个控件中没有单击事件)通过一个漂亮的动画使图像变大 谢谢兄弟们。这里有一个例子,可以满足我的要求: <Window x:Class="WpfApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
谢谢兄弟们。这里有一个例子,可以满足我的要求:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="600" Width="600">
<Window.Resources>
<Storyboard x:Key="ScaleImageStoryboard">
<DoubleAnimation Duration="0:0:0.5" From="300" To="400" Storyboard.TargetName="Image" Storyboard.TargetProperty="Height"/>
<DoubleAnimation Duration="0:0:0.5" From="300" To="400" Storyboard.TargetName="Image" Storyboard.TargetProperty="Width"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" Stretch="Fill" Width="300" Height="300">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
</Window>
在这里,图像从300x300像素开始。当Image.MouseDown事件被触发时,触发器将启动故事板,在半秒内将图像大小更改为400x400
但是,如果您想要的效果只是暂时影响图像的大小,而不影响布局,则可以使用:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="600" Width="600">
<Window.Resources>
<Storyboard x:Key="ScaleImageStoryboard">
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
Stretch="Fill" Width="300" Height="300"
RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<ScaleTransform x:Name="ScaleImage"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
</Window>
以下内容将相对于图像的当前大小缩放图像,而不是更改绝对值。这可能更灵活
<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
<Image x:Name="MyImage" Source="c:\myImage.jpg" Width="250" Height="250">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" RenderTransformOrigin="0.5, 0.5"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Page>