Ampliando várias imagens passando o mouse sobre
-
09-09-2020 - |
Pergunta
Estou tentando ampliar uma imagem passando o mouse, então olhei alguns exemplos online e é capaz de funcionar para uma única imagem, porém gostaria que funcionasse com várias imagens, estes são os códigos que encontrei online isso funciona com uma única imagem (crédito a Jeff Yates por fornecer a solução)
Xaml:
<Grid.Resources>
<Storyboard x:Name="growStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="testButton"
Duration="0:0:0.1"
By="20">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="testButton"
Duration="0:0:1"
By="-20">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="shrinkStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="testButton"
Duration="0:0:1"
By="-20">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="testButton"
Duration="0:0:0.1"
By="20">
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<Button x:Name="testButton" Content="Test" Grid.Column="1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50" Height="50">
</Button>
</Grid>
</UserControl>
Código por trás:
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
this.shrinkStoryboard.SkipToFill();
this.growStoryboard.Begin();
}
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
this.growStoryboard.SkipToFill();
this.shrinkStoryboard.Begin();
}
}
Solução
Eu usaria uma animação no ScaleTransform para fazer isso:
<Storyboard x:Key="MouseOverRectangleStoryBoard">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)">
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="MouseLeaveRectangleStoryBoard">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)">
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)">
</DoubleAnimation>
</Storyboard>
O código é para um retângulo, mas é exatamente o mesmo.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow