Как я могу заставить Изображение увеличиться в размере (дайте иллюзию выбора) посредством анимации WPF?
Я довольно плохо знаком с WPF и еще более плохо знаком с анимациями в WPF. Я знаю, что существуют раскадровки, и т.д. Но я ищу определенный эффект, таким образом, я могу работать оттуда и переделать его.
Кто-либо может просто дать мне, простой пример о на Изображении управляет MouseDown (потому что нет никакого события Click в этом управлении в WPF), делает изображение больше через остроту, выглядящую анимацией?
Спасибо братья.
2 ответа
Следующее будет масштабировать изображение относительно его текущего размера, а не изменять абсолютные значения. Это могло бы быть более гибким.
<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>
Вот пример, который делает то, что, я думаю, вы хотите:
<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, Trigger запускает раскадровку, которая изменяет размер изображения на 400x400 за полсекунды.
Однако, если вы хотите получить эффект, который только временно влияет на размер изображения и не влияет на него. layout вы должны использовать:
<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>