Ingrandimento di più immagini con il mouse sopra
-
09-09-2020 - |
Domanda
Quindi sto cercando di ingrandire un'immagine con il mouse sopra, quindi ho guardato alcuni esempi online ed è in grado di lavorare per una singola immagine, tuttavia vorrei che per far funzionare con più immagini, questi sono i codiciHo trovato online che funziona con una singola immagine (credito a Jeff Yates per fornire la soluzione)
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>
.
Code-Behind:
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();
}
}
. Soluzione
Userei un'animazione su Scaletransform per fare questo come così:
<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>
.
Il codice è per un rettangolo ma è esattamente lo stesso.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow