我对WPF很新,甚至更新于WPF中的动画 . 我知道有故事板等等 . 但我正在寻找一个特定的效果,所以我可以从那里工作并修补它 .
任何人都可以给我一个关于图像控件MouseDown的简单示例(因为在WPF中此控件中没有Click事件)通过漂亮的动画使图像更大?
谢谢兄弟 .
这是一个做我认为你想要的例子:
<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>
2 回答
这是一个做我认为你想要的例子:
在这里,图像以300x300像素开始 . 触发Image.MouseDown事件时,触发器开始故事板,在半秒的时间内将图像大小更改为400x400 .
但是,如果您想要一个暂时影响图像大小但不影响布局的效果,您可以使用:
以下将相对于当前大小缩放图像,而不是更改绝对值 . 这可能更灵活 .