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ış.