Görsel Taslaklara Genel Bakış

Makale
10/18/2023

Bu konu başlığında, animasyonları düzenlemek ve uygulamak için nesnelerin nasıl kullanılacağı Storyboard gösterilmektedir. Nesneleri etkileşimli olarak işlemeyi Storyboard açıklar ve dolaylı özellik hedefleme söz dizimlerini açıklar.

Ön koşullar

Bu konuyu anlamak için farklı animasyon türleri ve bunların temel özellikleri hakkında bilgi sahibi olmanız gerekir. Animasyona giriş için bkz. Animasyona Genel Bakış. Ekli özelliklerin nasıl kullanılacağını da bilmeniz gerekir. Ekli özellikler hakkında daha fazla bilgi için bkz. Ekli Özelliklere Genel Bakış.

Görsel Taslak nedir?

Animasyonlar tek yararlı zaman çizelgesi türü değildir. Diğer zaman çizelgesi sınıfları, zaman çizelgesi kümelerini düzenlemenize ve özelliklere zaman çizelgeleri uygulamanıza yardımcı olmak için sağlanır. Kapsayıcı zaman çizelgeleri sınıfından TimelineGroup türetilir ve ve StoryboardiçerirParallelTimeline.

A Storyboard , içerdiği zaman çizelgeleri için hedefleme bilgileri sağlayan bir kapsayıcı zaman çizelgesi türüdür. Görsel Taslak, diğer kapsayıcı zaman çizelgeleri ve animasyonlar da dahil olmak üzere herhangi bir türde Timelineiçerebilir. Storyboard nesneleri, çeşitli nesneleri ve özellikleri etkileyen zaman çizelgelerini tek bir zaman çizelgesi ağacında birleştirmenizi sağlayarak karmaşık zamanlama davranışlarını düzenlemenizi ve denetlemenizi kolaylaştırır. Örneğin, bu üç işlemi gerçekleştiren bir düğme istediğinizi varsayalım.

Kullanıcı düğmeyi seçtiğinde büyütün ve rengi değiştirin.
Küçültün ve tıklandığında özgün boyutuna geri dönün.
Devre dışı bırakıldığında küçülür ve yüzde 50 opaklığa dönüşür.

Bu durumda, aynı nesneye uygulanan birden çok animasyon kümeniz vardır ve düğmenin durumuna bağlı olarak farklı zamanlarda oynatmak istersiniz. Storyboard nesneleri, animasyonları düzenlemenize ve bir veya daha fazla nesneye gruplar halinde uygulamanıza olanak tanır.

Görsel Taslak Nerede Kullanılabilir?

bir Storyboard , animasyonlu sınıfların bağımlılık özelliklerine animasyon eklemek için kullanılabilir (sınıfın nasıl animasyonlu hale getirileceği hakkında daha fazla bilgi için bkz. Animasyona Genel Bakış). Ancak, görsel taslak oluşturma çerçeve düzeyinde bir özellik olduğundan nesnenin veya FrameworkElement FrameworkContentElementöğesine ait NameScope olması gerekir.

Örneğin, aşağıdakileri yapmak için a Storyboard kullanabilirsiniz:

SolidColorBrush Bir Düğmenin Arka Planını (bir türFrameworkElement) boyayan bir (Çerçeve olmayan öğe) animasyon ekleme
() kullanılarak görüntülenen bir SolidColorBrush (Çerçeve olmayan öğe) dolgusunun boyanması için bir GeometryDrawing Image FrameworkElement(Çerçeve olmayan öğe) animasyonu ekleyin.
Kodda, SolidColorBrush aynı zamanda öğesini içeren FrameworkElementbir sınıf tarafından bildirilen bir öğeye SolidColorBrush animasyon ekleyin, eğer adı ile FrameworkElementkaydedilmişse.

Ancak, adını veya ile FrameworkElement kaydetmemiş veya veya FrameworkContentElementözelliğini FrameworkContentElement FrameworkElement ayarlamak için kullanılmamış bire animasyon SolidColorBrush eklemek için a kullanamazsınızStoryboard.

Görsel Taslak ile AnimasyonLarı Uygulama

Animasyonları düzenlemek ve uygulamak için kullanmak Storyboard için, animasyonları öğesinin Storyboardalt zaman çizelgeleri olarak eklersiniz. Storyboard sınıfı ve Storyboard.TargetProperty ekli özelliklerini sağlarStoryboard.TargetName. Bu özellikleri, hedef nesnesini ve özelliğini belirtmek için bir animasyonda ayarlarsınız.

Animasyonları hedeflerine uygulamak için tetikleyici eylemini veya yöntemini kullanmaya başlarsınız Storyboard . XAML'de , veya DataTriggerile bir BeginStoryboard EventTrigger Triggernesnesi kullanırsınız. Kodda yöntemini de kullanabilirsiniz Begin .

Aşağıdaki tabloda her Storyboard başlangıç tekniğinin desteklendiği farklı yerler gösterilmektedir: örnek başına, stil, denetim şablonu ve veri şablonu. "Örnek Başına", stil, denetim şablonu veya veri şablonu yerine doğrudan nesne örneklerine animasyon veya görsel taslak uygulama tekniğini ifade eder.

Görsel taslak kullanılarak başlatılıyor...	Örnek başına	Stil	Denetim şablonu	Veri şablonu	Örnek
BeginStoryboard ve EventTrigger	Evet	Evet	Evet	Evet	Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme
BeginStoryboard ve bir özellik Trigger	No.	Evet	Evet	Evet	Özellik Değeri Değiştiğinde bir Animasyonu Tetikleme
BeginStoryboard ve bir özellik MultiTrigger	No.	Evet	Evet	Evet	MultiTrigger sınıf örneği
BeginStoryboard ve DataTrigger	No.	Evet	Evet	Evet	Nasıl yapılır: Veri Değiştiğinde Animasyon Tetikleme
BeginStoryboard ve MultiDataTrigger	No.	Evet	Evet	Evet	MultiDataTrigger sınıf örneği
Begin Yöntem	Evet	Hayır	Hayı	Hayır	Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme

Aşağıdaki örnek, öğesinin Storyboard Rectangle animasyonunu Width Color ve bunu Rectangleboyamak için kullanılan öğesinin SolidColorBrush animasyonunu kullanır.

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.StoryboardsExample" 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />
              
              <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Data;
using System.Windows.Shapes;
using System.Windows.Input;

namespace Microsoft.Samples.Animation
{
    public class StoryboardsExample : Page
    {
        public StoryboardsExample()
        {
            this.WindowTitle = "Storyboards Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "MyRectangle";

            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
            this.RegisterName("MySolidColorBrush", mySolidColorBrush);
            myRectangle.Fill = mySolidColorBrush;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation,
                new PropertyPath(Rectangle.WidthProperty));

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
            Storyboard.SetTargetProperty(myColorAnimation,
                new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            myStoryboard.Children.Add(myColorAnimation);

            myRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                myStoryboard.Begin(this);
            };

            myStackPanel.Children.Add(myRectangle);
            this.Content = myStackPanel;
        }
    }
}

Aşağıdaki bölümlerde ve TargetProperty ekli özellikleri daha ayrıntılı olarak açıklanmaktadırTargetName.

Çerçeve Öğelerini, Çerçeve İçerik Öğelerini ve Freezables'ı Hedefleme

Önceki bölümde, bir animasyonunun hedefini bulması için hedefin adını ve animasyona animasyon eklemek için özelliğini bilmesi gerektiğinden bahsedildi. Animasyon eklenecek özelliğin belirtilmesi doğrudan bir adımdır: Animasyon eklemek için özelliğin adıyla ayarlamanız TargetProperty yeterlidir. Animasyonda özelliğini ayarlayarak özelliğine animasyon eklemek istediğiniz nesnenin Storyboard.TargetName adını belirtirsiniz.

Dikkat

bir nesneye alternatif TargetNameolarak doğrudan bağlamak için özelliğini kullanabilirsinizTarget, ancak seri hale getirilemez. Nesneye Target XAML'de doğru başvurulabileceği garanti edilememektedir.

Özelliğin TargetName çalışması için hedeflenen nesnenin bir adı olmalıdır. XAML'de veya FrameworkElement FrameworkContentElement öğesine ad atamak, bir nesneye ad atamaktan Freezable farklıdır.

Çerçeve öğeleri, sınıfından FrameworkElement devralan sınıflardır. Çerçeve öğelerine örnek olarak Window, DockPanel, Buttonve Rectangleverilebilir. Temelde tüm pencereler, paneller ve denetimler öğelerdir. Çerçeve içerik öğeleri, sınıfından FrameworkContentElement devralan sınıflardır. Çerçeve içerik öğelerine örnek olarak ve ParagraphverilebilirFlowDocument. Türün bir çerçeve öğesi mi yoksa çerçeve içerik öğesi mi olduğundan emin değilseniz name özelliği olup olmadığını denetleyin. Varsa, büyük olasılıkla bir çerçeve öğesi veya çerçeve içerik öğesidir. Emin olmak için, tür sayfasının Devralma Hiyerarşisi bölümünü denetleyin.

XAML'de bir çerçeve öğesinin veya çerçeve içerik öğesinin hedefini etkinleştirmek için özelliğini ayarlarsınız Name . Kodda, öğesinin RegisterName adını oluşturduğunuz NameScopeöğeye kaydetmek için yöntemini de kullanmanız gerekir.

Yukarıdaki örnekten alınan aşağıdaki örnek, adını MyRectangle bir Rectangletürü FrameworkElementolarak atar.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">

Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());

this.RegisterName(myRectangle.Name, myRectangle);

Bir ada sahip olduktan sonra, bu öğenin bir özelliğine animasyon ekleyebilirsiniz.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle"
  Storyboard.TargetProperty="Width"
  From="100" To="200" Duration="0:0:1" />

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));

Freezable türleri, sınıfından Freezable devralan sınıflardır. örnek olarak Freezable SolidColorBrush, RotateTransformve GradientStopverilebilir.

XAML'de bir Freezable animasyon tarafından hedeflemeyi etkinleştirmek için x:Name Yönergesi'ni kullanarak buna bir ad atarsınız. Kodda yöntemini kullanarak RegisterName adını oluşturduğunuz NameScopeöğesine kaydedersiniz.

Aşağıdaki örnek bir nesneye bir Freezable ad atar.

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />

SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

Nesne daha sonra bir animasyon tarafından hedeflenebilir.

<ColorAnimation 
  Storyboard.TargetName="MySolidColorBrush"
  Storyboard.TargetProperty="Color"
  From="Blue" To="Red" Duration="0:0:1" />

Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation,
    new PropertyPath(SolidColorBrush.ColorProperty));

Storyboard nesneleri, özelliği çözümlemek TargetName için ad kapsamlarını kullanır. WPF ad kapsamları hakkında daha fazla bilgi için bkz . WPF XAML Ad Kapsamları. TargetName Özelliği atlanırsa, animasyon tanımlandığı öğeyi veya stiller söz konusu olduğunda stillenmiş öğeyi hedefler.

Bazen bir nesneye Freezable ad atanamaz. Örneğin, bir Freezable kaynak olarak bildirilirse veya bir stilde özellik değeri ayarlamak için kullanılırsa, buna bir ad verılamaz. Adı olmadığından doğrudan hedeflenemez, ancak dolaylı olarak hedeflenebilir. Aşağıdaki bölümlerde dolaylı hedeflemenin nasıl kullanılacağı açıklanmaktadır.

Dolaylı Hedefleme

bir öğesinin Freezable kaynak olarak bildirilmesi Freezable veya stilde bir özellik değeri ayarlamak için kullanılması gibi bir animasyon tarafından doğrudan hedeflenememe durumları vardır. Bu gibi durumlarda, doğrudan hedefleyemeseniz de nesneye Freezable animasyon ekleyebilirsiniz. özelliğini adıyla Freezableayarlamak TargetName yerine , "ait olduğu Freezable " öğenin adını verirsiniz. Örneğin, dikdörtgen SolidColorBrush öğesini ayarlamak Fill için kullanılan bu dikdörtgene aittir. Fırçaya animasyon eklemek için animasyonları TargetProperty , animasyonu ayarlamak için kullanılan çerçeve öğesinin veya çerçeve içerik öğesinin Freezable özelliğinden başlayan bir özellik zinciriyle ayarlarsınız ve animasyon eklemek için özelliğiyle Freezable biter.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Dondurulursa Freezable bir kopyanın oluşturulacağını ve bu kopyanın animasyonlu olacağını unutmayın. Bu durumda, özgün nesnenin HasAnimatedProperties özelliği döndürülmeye falsedevam eder çünkü özgün nesne aslında animasyonlu değildir. Kopyalama hakkında daha fazla bilgi için bkz . Freezable Objects Overview.

Ayrıca, dolaylı özellik hedefleme kullanılırken var olmayan nesneleri hedeflemenin mümkün olduğunu da unutmayın. Örneğin, belirli bir düğmenin Background ile ayarlandığını SolidColorBrush varsayabilir ve düğmenin Arka Planını ayarlamak için bir kullanıldığında Rengine LinearGradientBrush animasyon eklemeye çalışabilirsiniz. Bu gibi durumlarda, hiçbir özel durum oluşturulur; özelliğindeki değişikliklere tepki vermediğinden animasyon görünür bir efekte LinearGradientBrush Color sahip olamıyor.

Aşağıdaki bölümlerde, dolaylı özellik hedefleme söz dizimi daha ayrıntılı olarak açıklanmaktadır.

XAML'de Freezable Özelliğini Dolaylı Olarak Hedefleme

XAML'de freezable özelliğini hedeflemek için aşağıdaki söz dizimini kullanın.

Özellik söz dizimi
ElementPropertyName`.`FreezablePropertyName

Konumu

ElementPropertyName , öğesinin FrameworkElement Freezable ayarlamak için kullanıldığı özelliğidir ve
FreezablePropertyName , animasyon eklemek için öğesinin Freezable özelliğidir.

Aşağıdaki kod, dikdörtgen SolidColorBrush öğesini ayarlamak için kullanılan öğesinin Fill animasyonunu nasıl Color oluşturacaklarını gösterir.

<Rectangle
  Name="Rectangle01"
  Height="100"
  Width="100"
  Fill="{StaticResource MySolidColorBrushResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="Rectangle01"
            Storyboard.TargetProperty="Fill.Color"
            From="Blue" To="AliceBlue" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Bazen bir koleksiyonda veya dizide bulunan bir dondurulabilir öğeyi hedeflemeniz gerekir.

Bir koleksiyonda yer alan bir freezable'ı hedeflemek için aşağıdaki yol söz dizimini kullanırsınız.

Yol söz dizimi
ElementPropertyName`.Children[`CollectionIndex`].`FreezablePropertyName

Burada CollectionIndex , dizisindeki veya koleksiyonundaki nesnenin dizinidir.

Örneğin, dikdörtgenin TransformGroup özelliğine bir kaynak uygulandığını RenderTransform ve içerdiği dönüşümlerden birine animasyon eklemek istediğinizi varsayalım.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

Aşağıdaki kod, önceki örnekte gösterilen öğesinin özelliğine RotateTransform animasyon Angle ekleme işlemini gösterir.

<Rectangle
  Name="Rectangle02"
  Height="100"
  Width="100"
  Fill="Blue"
  RenderTransform="{StaticResource MyTransformGroupResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="Rectangle02"
            Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
            From="0" To="360" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Kodda Freezable Özelliğini Dolaylı Olarak Hedefleme

Kodda bir PropertyPath nesne oluşturursunuz. oluşturduğunuzda PropertyPathve Path PathParametersdeğerini belirtirsiniz.

oluşturmak PathParametersiçin bağımlılık özelliği tanımlayıcı alanlarının listesini içeren bir tür DependencyProperty dizisi oluşturursunuz. İlk tanımlayıcı alanı, veya FrameworkContentElement Freezable öğesinin FrameworkElement ayarlamak için kullanıldığı özelliğine yöneliktir. Sonraki tanımlayıcı alanı hedef öğesinin Freezable özelliğini temsil eder. Bunu nesnesine bağlanan Freezable FrameworkElement bir özellik zinciri olarak düşünün.

Aşağıda, dikdörtgen öğesini ayarlamak Fill için kullanılan öğesini hedefleyen Color bir SolidColorBrush bağımlılık özellik zinciri örneği verilmiştir.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};

Ayrıca bir Pathbelirtmelisiniz. APath, öğesinin Path nasıl yorumlandığını belirten bir String değeridirPathParameters. Aşağıdaki söz dizimini kullanır.

Özellik yolu söz dizimi
`(`OwnerPropertyArrayIndex`).(`FreezablePropertyArrayIndex`)`

Konumu

OwnerPropertyArrayIndex , nesnesinin DependencyProperty ayarlamak için kullanılan özelliğinin FrameworkElement Freezable tanımlayıcısını içeren dizinin dizinidir ve
FreezablePropertyArrayIndex , hedef alınacak özelliğin DependencyProperty tanımlayıcısını içeren dizinin dizinidir.

Aşağıdaki örnekte, önceki örnekte Path tanımlanana PathParameters eşlik edecek olan gösterilir.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";

Aşağıdaki örnek, dikdörtgen öğesini ayarlamak için kullanılan öğesine animasyon Color SolidColorBrush eklemek için önceki örneklerde yer alan Fill kodu birleştirir.


// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());

Rectangle rectangle01 = new Rectangle();
rectangle01.Name = "Rectangle01";
this.RegisterName(rectangle01.Name, rectangle01);
rectangle01.Width = 100;
rectangle01.Height = 100;
rectangle01.Fill =
    (SolidColorBrush)this.Resources["MySolidColorBrushResource"];

ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.AliceBlue;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, rectangle01.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle01.Triggers.Add(myMouseEnterTrigger);

Bazen bir koleksiyonda veya dizide bulunan bir dondurulabilir öğeyi hedeflemeniz gerekir. Örneğin, dikdörtgenin TransformGroup özelliğine bir kaynak uygulandığını RenderTransform ve içerdiği dönüşümlerden birine animasyon eklemek istediğinizi varsayalım.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

Bir koleksiyonda yer alan bir Freezable öğesini hedeflemek için aşağıdaki yol söz dizimini kullanırsınız.

Yol söz dizimi
`(`OwnerPropertyArrayIndex`).(`KoleksiyonuChildrenPropertyArrayIndex`)[`CollectionIndex`].(`FreezablePropertyArrayIndex`)`

Burada CollectionIndex , dizisindeki veya koleksiyonundaki nesnenin dizinidir.

özelliğini RotateTransformhedeflemek Angle için, içindeki TransformGroupikinci dönüşümde aşağıdaki Path ve PathParameters'yi kullanırsınız.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty,
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Aşağıdaki örnek, içinde TransformGroupbulunan bir RotateTransform öğesinin animasyonunu Angle oluşturmak için tam kodu gösterir.

Rectangle rectangle02 = new Rectangle();
rectangle02.Name = "Rectangle02";
this.RegisterName(rectangle02.Name, rectangle02);
rectangle02.Width = 100;
rectangle02.Height = 100;
rectangle02.Fill = Brushes.Blue;
rectangle02.RenderTransform =
    (TransformGroup)this.Resources["MyTransformGroupResource"];

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 360;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myDoubleAnimation, rectangle02.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty,
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle02.Triggers.Add(myMouseEnterTrigger);

Başlangıç Noktası Olarak Freezable ile Dolaylı Olarak Hedefleme

Önceki bölümlerde, veya FrameworkContentElement ile FrameworkElement başlayıp bir Freezable alt özelliğe bir özellik zinciri oluşturarak dolaylı olarak bir hedeflemeyi Freezable açıklamaktadır. Başlangıç noktası olarak da kullanabilir Freezable ve alt özelliklerinden birini Freezable dolaylı olarak hedefleyebilirsiniz. Dolaylı hedefleme için başlangıç noktası olarak kullanılırken Freezable ek bir kısıtlama uygulanır: başlangıç ve bu ile dolaylı olarak hedeflenen alt özellik arasındaki başlangıç Freezable ve her Freezable değeri dondurulmamalıdır.

XAML'de Görsel Taslak Denetimi

Genişletilebilir Uygulama İşaretleme Dili'nde (XAML) görsel taslak başlatmak için bir BeginStoryboard tetikleyici eylemi kullanırsınız. BeginStoryboard animasyonları animasyon yaptıkları nesnelere ve özelliklere dağıtır ve görsel taslak başlatır. (Bu işlemle ilgili ayrıntılar için bkz.Animasyon ve Zamanlama Sistemine Genel Bakış.) Özelliğini belirterek Name bir ad verirsenizBeginStoryboard, bunu denetlenebilir bir görsel taslak haline getirirsiniz. Ardından görsel taslak başlatıldıktan sonra etkileşimli olarak denetleyebilirsiniz. Aşağıda, film şeridini denetlemek için olay tetikleyicileriyle birlikte kullandığınız denetlenebilir görsel taslak eylemlerinin listesi verilmiştir.

PauseStoryboard: Görsel taslak duraklatılır.
ResumeStoryboard: Duraklatılmış bir görsel taslak sürdürür.
SetStoryboardSpeedRatio: Görsel taslak hızını değiştirir.
SkipStoryboardToFill: Görsel taslak, varsa dolgu döneminin sonuna kadar ilerler.
StopStoryboard: Görsel taslak durdurulur.
RemoveStoryboard: Görsel taslak kaldırılır.

Aşağıdaki örnekte, görsel taslakları etkileşimli olarak denetlemek için denetlenebilir görsel taslak eylemleri kullanılmıştır.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.SDK.Animation.ControllableStoryboardExample"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="BeginButton">Begin</Button>
    <Button Name="PauseButton">Pause</Button>
    <Button Name="ResumeButton">Resume</Button>
    <Button Name="SkipToFillButton">Skip To Fill</Button>
    <Button Name="StopButton">Stop</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

Kod Kullanarak Görsel TaslakLarı Etkileşimli Olarak Denetleme

Önceki örneklerde tetikleyici eylemlerini kullanarak animasyon ekleme işlemi gösterilmiştir. Kodda, sınıfın etkileşimli yöntemlerini Storyboard kullanarak görsel taslakları da denetleyebilirsiniz. kodda Storyboard etkileşimli hale getirmek için görsel taslak Begin yönteminin uygun aşırı yüklemesini kullanmanız ve bunu denetlenebilir hale getirmek için belirtmeniz true gerekir. Daha fazla bilgi için sayfaya Begin(FrameworkElement, Boolean) bakın.

Aşağıdaki listede, başlatıldıktan sonra öğesini Storyboard işlemek için kullanılabilecek yöntemler gösterilir:

Bu yöntemleri kullanmanın avantajı, oluşturmanız veya TriggerAction nesneleri oluşturmanız Trigger gerekmeyecek olmasıdır; yalnızca işlemek istediğiniz denetlenebilir Storyboard öğelere yönelik bir başvuruya ihtiyacınız vardır.

Dekont

bir Clocküzerinde gerçekleştirilen tüm etkileşimli eylemler ve bu nedenle de bir Storyboard sonraki işlemeden kısa bir süre önce gerçekleşecek zamanlama altyapısının bir sonraki onay işaretinde gerçekleşir. Örneğin, bir animasyonda Seek başka bir noktaya atlamak için yöntemini kullanırsanız, özellik değeri hemen değişmez, bunun yerine zamanlama altyapısının bir sonraki onay işaretinde değer değişir.

Aşağıdaki örnekte, sınıfın etkileşimli yöntemlerini kullanarak animasyonların nasıl uygulanacağı ve denetlenacağı Storyboard gösterilmektedir.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class ControllableStoryboardExample : Page
    {
        private Storyboard myStoryboard;

        public ControllableStoryboardExample()
        {

            // Create a name scope for the page.

            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Controllable Storyboard Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(10);

            // Create a rectangle.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";

            // Assign the rectangle a name by
            // registering it with the page, so that
            // it can be targeted by storyboard
            // animations.
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myStackPanel.Children.Add(myRectangle);

            //
            // Create an animation and a storyboard to animate the
            // rectangle.
            //
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));
            myDoubleAnimation.AutoReverse = true;

            // Create the storyboard.
            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            //
            // Create some buttons to control the storyboard
            // and a panel to contain them.
            //
            StackPanel buttonPanel = new StackPanel();
            buttonPanel.Orientation = Orientation.Horizontal;
            Button beginButton = new Button();
            beginButton.Content = "Begin";
            beginButton.Click += new RoutedEventHandler(beginButton_Clicked);
            buttonPanel.Children.Add(beginButton);
            Button pauseButton = new Button();
            pauseButton.Content = "Pause";
            pauseButton.Click += new RoutedEventHandler(pauseButton_Clicked);
            buttonPanel.Children.Add(pauseButton);
            Button resumeButton = new Button();
            resumeButton.Content = "Resume";
            resumeButton.Click += new RoutedEventHandler(resumeButton_Clicked);
            buttonPanel.Children.Add(resumeButton);
            Button skipToFillButton = new Button();
            skipToFillButton.Content = "Skip to Fill";
            skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);
            buttonPanel.Children.Add(skipToFillButton);
            Button setSpeedRatioButton = new Button();
            setSpeedRatioButton.Content = "Triple Speed";
            setSpeedRatioButton.Click += new RoutedEventHandler(setSpeedRatioButton_Clicked);
            buttonPanel.Children.Add(setSpeedRatioButton);
            Button stopButton = new Button();
            stopButton.Content = "Stop";
            stopButton.Click += new RoutedEventHandler(stopButton_Clicked);
            buttonPanel.Children.Add(stopButton);
            myStackPanel.Children.Add(buttonPanel);
            this.Content = myStackPanel;
        }

        // Begins the storyboard.
        private void beginButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Specifying "true" as the second Begin parameter
            // makes this storyboard controllable.
            myStoryboard.Begin(this, true);
        }

        // Pauses the storyboard.
        private void pauseButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Pause(this);
        }

        // Resumes the storyboard.
        private void resumeButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Resume(this);
        }

        // Advances the storyboard to its fill period.
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.SkipToFill(this);
        }

        // Updates the storyboard's speed.
        private void setSpeedRatioButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(this, 3);
        }

        // Stops the storyboard.
        private void stopButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Stop(this);
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class ControllableStoryboardExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()

            ' Create a name scope for the page.

            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Controllable Storyboard Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(10)

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            myRectangle.Name = "myRectangle"

            ' Assign the rectangle a name by 
            ' registering it with the page, so that
            ' it can be targeted by storyboard
            ' animations.
            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            myRectangle.Fill = Brushes.Blue
            myStackPanel.Children.Add(myRectangle)

            '
            ' Create an animation and a storyboard to animate the
            ' rectangle.
            '
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(5000))
            myDoubleAnimation.AutoReverse = True

            ' Create the storyboard.
            myStoryboard = New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

            '
            ' Create some buttons to control the storyboard
            ' and a panel to contain them.
            '
            Dim buttonPanel As New StackPanel()
            buttonPanel.Orientation = Orientation.Horizontal
            Dim beginButton As New Button()
            beginButton.Content = "Begin"
            AddHandler beginButton.Click, AddressOf beginButton_Clicked
            buttonPanel.Children.Add(beginButton)
            Dim pauseButton As New Button()
            pauseButton.Content = "Pause"
            AddHandler pauseButton.Click, AddressOf pauseButton_Clicked
            buttonPanel.Children.Add(pauseButton)
            Dim resumeButton As New Button()
            resumeButton.Content = "Resume"
            AddHandler resumeButton.Click, AddressOf resumeButton_Clicked
            buttonPanel.Children.Add(resumeButton)
            Dim skipToFillButton As New Button()
            skipToFillButton.Content = "Skip to Fill"
            AddHandler skipToFillButton.Click, AddressOf skipToFillButton_Clicked
            buttonPanel.Children.Add(skipToFillButton)
            Dim setSpeedRatioButton As New Button()
            setSpeedRatioButton.Content = "Triple Speed"
            AddHandler setSpeedRatioButton.Click, AddressOf setSpeedRatioButton_Clicked
            buttonPanel.Children.Add(setSpeedRatioButton)
            Dim stopButton As New Button()
            stopButton.Content = "Stop"
            AddHandler stopButton.Click, AddressOf stopButton_Clicked
            buttonPanel.Children.Add(stopButton)
            myStackPanel.Children.Add(buttonPanel)
            Me.Content = myStackPanel


        End Sub

        ' Begins the storyboard.
        Private Sub beginButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Specifying "true" as the second Begin parameter
            ' makes this storyboard controllable.
            myStoryboard.Begin(Me, True)

        End Sub

        ' Pauses the storyboard.
        Private Sub pauseButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Pause(Me)

        End Sub

        ' Resumes the storyboard.
        Private Sub resumeButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Resume(Me)

        End Sub

        ' Advances the storyboard to its fill period.
        Private Sub skipToFillButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.SkipToFill(Me)

        End Sub

        ' Updates the storyboard's speed.
        Private Sub setSpeedRatioButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(Me, 3)

        End Sub

        ' Stops the storyboard.
        Private Sub stopButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Stop(Me)

        End Sub

    End Class

End Namespace

Bir Stile Animasyon Ekleme

içindeki animasyonları Styletanımlamak için nesneleri kullanabilirsinizStoryboard. içinde Style ile Storyboard animasyon oluşturmak, aşağıdaki üç özel durumla başka bir Storyboard yerde kullanmaya benzer:

belirtmezseniz TargetName; Storyboard her zaman öğesinin uygulandığı öğeyi Style hedefler. Nesneleri hedeflemek Freezable için dolaylı hedefleme kullanmanız gerekir. Dolaylı hedefleme hakkında daha fazla bilgi için Dolaylı Hedefleme bölümüne bakın.
veya Triggeriçin EventTrigger belirtemezsinizSourceName.
Dinamik kaynak başvurularını veya veri bağlama ifadelerini kullanarak özellik değerlerini veya animasyonu ayarlayamazsınız Storyboard . Bunun nedeni, içindeki Style her şeyin iş parçacığı açısından güvenli olması ve zamanlama sisteminin bunları iş parçacığı açısından güvenli hale getirmek için nesnelere sahip olması gerektiğidir Freeze Storyboard . A Storyboard , dinamik kaynak başvuruları veya veri bağlama ifadeleri içeriyorsa veya alt zaman çizelgelerinde dondurulamaz. Dondurma ve diğer Freezable özellikler hakkında daha fazla bilgi için bkz . Freezable Objects Overview.
XAML'de veya animasyon olayları için Storyboard olay işleyicileri bildiremezsiniz.

Stilde görsel taslak tanımlamayı gösteren bir örnek için Stilde Animasyon Ekleme örneğine bakın.

ControlTemplate İçinde Animasyon Ekleme

içindeki animasyonları ControlTemplatetanımlamak için nesneleri kullanabilirsinizStoryboard. içinde ControlTemplate ile Storyboard animasyon oluşturmak, aşağıdaki iki özel durumla başka bir Storyboard yerde kullanmaya benzer:

yalnızca TargetName öğesinin alt nesnelerine ControlTemplatebaşvurabilir. Belirtilmezse TargetName animasyon, öğesinin uygulandığı öğeyi ControlTemplate hedefler.
SourceName veya için EventTrigger Trigger, yalnızca alt nesnelerine ControlTemplatebaşvurabilir.
Dinamik kaynak başvurularını veya veri bağlama ifadelerini kullanarak özellik değerlerini veya animasyonu ayarlayamazsınız Storyboard . Bunun nedeni, içindeki ControlTemplate her şeyin iş parçacığı açısından güvenli olması ve zamanlama sisteminin bunları iş parçacığı açısından güvenli hale getirmek için nesnelere sahip olması gerektiğidir Freeze Storyboard . A Storyboard , dinamik kaynak başvuruları veya veri bağlama ifadeleri içeriyorsa veya alt zaman çizelgelerinde dondurulamaz. Dondurma ve diğer Freezable özellikler hakkında daha fazla bilgi için bkz . Freezable Objects Overview.
XAML'de veya animasyon olayları için Storyboard olay işleyicileri bildiremezsiniz.

içinde görsel taslak ControlTemplatetanımlamayı gösteren bir örnek için bkz . ControlTemplate örneğinde Animasyon Ekleme.

Özellik Değeri Değiştiğinde Animasyon Ekleme

Stiller ve denetim şablonlarında, bir özellik değiştiğinde görsel taslak başlatmak için Tetikleyici nesneleri kullanabilirsiniz. Örnekler için bkz . Bir Özellik Değeri Değiştiğinde Animasyon Tetikleme ve ControlTemplate'da Animasyon Ekleme.

Özellik Trigger nesneleri tarafından uygulanan animasyonlar, yöntemler kullanılarak Storyboard başlatılan animasyonlardan veya animasyonlardan daha EventTrigger karmaşık bir şekilde davranır. Diğer Trigger nesneler tarafından tanımlanan animasyonlarla "iletim" yaparlar, ancak ve yöntemiyle tetiklenen animasyonlar oluştururlar EventTrigger .