Nasıl yapılır: FrameworkElement Boyutuna Animasyon Ekleme
Bir a 'nın boyutuna animasyon eklemek için FrameworkElement , ve özelliklerine animasyon ekleyebilir Width ya da Height animasyonlu bir animasyon kullanabilirsiniz ScaleTransform .
Aşağıdaki örnekte, bu iki yaklaşımı kullanarak iki düğmenin boyutunu hareketlendirir. Bir düğme, özelliği canlandırarak yeniden boyutlandırılır Width ve kendisine uygulanan bir uygulanmış bir animasyon, başka bir şekilde yeniden boyutlandırılır ScaleTransform RenderTransform . Her düğme bazı metinler içerir. Başlangıçta metin her iki düğme için de aynı görünür, ancak düğmeler yeniden boyutlandırılırken ikinci düğmedeki metin bozuk hale gelir.
Örnek
<!-- AnimatingSizeExample.xaml
This example shows two ways of animating the size
of a framework element. -->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.Animation.AnimatingSizeExample"
WindowTitle="Animating Size Example">
<Canvas Width="650" Height="400">
<Button Name="AnimatedWidthButton"
Canvas.Left="20" Canvas.Top="20"
Width="200" Height="150"
BorderBrush="Red" BorderThickness="5">
Click Me
<Button.Triggers>
<!-- Animate the button's Width property. -->
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedWidthButton"
Storyboard.TargetProperty="(Button.Width)"
To="500" Duration="0:0:10" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button
Canvas.Left="20" Canvas.Top="200"
Width="200" Height="150"
BorderBrush="Black" BorderThickness="3">
Click Me
<Button.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform"
ScaleX="1" ScaleY="1" />
</Button.RenderTransform>
<Button.Triggers>
<!-- Animate the ScaleX property of a ScaleTransform
applied to the button. -->
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="3.0" Duration="0:0:10" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
Bir öğeyi dönüştürdüğünüzde, tüm öğe ve içeriği dönüştürülür. Bir öğenin boyutunu doğrudan değiştirdiğinizde, ilk düğme söz konusu olduğunda öğenin içerikleri boyut ve konumları üst öğelerinin boyutuna bağlı olmadığı sürece yeniden boyutlandırılmaz.
Özelliğine animasyon eklenmiş bir dönüştürme uygulayarak bir öğenin boyutunu hareketlendirmek RenderTransform Width Height , RenderTransform özelliği bir düzen geçişi tetiklemediğinden, canlandırılmış ve doğrudan hareketinden daha iyi performans sağlar.
Hareketlendirilen özellikler hakkında daha fazla bilgi için bkz. animasyona genel bakış. Dönüşümler hakkında daha fazla bilgi için bkz. dönüşümler genel bakış.