Görsel Taslaklara Genel Bakış
Bu konu Storyboard , animasyonları düzenlemek ve uygulamak için nesneleri nasıl kullanacağınızı gösterir. Nesneleri etkileşimli olarak nasıl işleyebileceğinizi Storyboard ve dolaylı Özellik hedefleme söz dizimini açıklar.
Önkoş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ış. Ayrıca 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, zaman çizelgesinin yalnızca faydalı türü değildir. Diğer zaman çizelgesi sınıfları, zaman çizelgesi kümelerini düzenlemenize ve özellikleri zaman çizelgelerini uygulamanıza yardımcı olmak için sağlanır. Kapsayıcı zaman çizelgeleri sınıfından türetilir TimelineGroup ve ParallelTimeline ve içerir Storyboard .
Storyboard, İçerdiği zaman çizelgeleri için hedefleme bilgilerini sağlayan bir kapsayıcı zaman çizelgesi türüdür. Görsel taslak Timeline , diğer kapsayıcı zaman çizelgeleri ve animasyonları dahil olmak üzere herhangi bir tür içerebilir. Storyboard nesneler, çeşitli nesne ve özellikleri etkileyen zaman çizelgelerini tek bir zaman çizelgesi ağacında birleştirerek karmaşık zamanlama davranışlarını düzenlemenizi ve denetlemenizi kolaylaştırır. Örneğin, bu üç şeyi yapan bir düğme istediğinizi varsayalım.
Kullanıcı düğmeyi seçtiğinde büyüt ve rengi değiştir.
, Öğesini daraltın ve sonra tıklandığı zaman özgün boyutuna büyüt.
Devre dışı bırakıldığında, yüzde 50 opaklık ve daraltma.
Bu durumda, aynı nesneye uygulanan birden fazla animasyon kümesi vardır ve düğmenin durumuna bağlı olarak farklı zamanlarda yürütmek istersiniz. Storyboard nesneler, animasyonları düzenlemenizi ve gruplar halinde bir veya daha fazla nesneye uygulamanızı sağlar.
Film şeridini nerede kullanabilirsiniz?
Storyboard, Animatable sınıflarının bağımlılık özelliklerine animasyon uygulamak için kullanılabilir (bir sınıf canlandırılacak olan nedir hakkında daha fazla bilgi için bkz. Storyboard). Ancak, görsel taslak oluşturma bir çerçeve düzeyi özellik olduğundan, nesnesi bir veya ' a ait olmalıdır NameScopeFrameworkElementFrameworkContentElement .
Örneğin, Storyboard aşağıdakileri yapmak için bir kullanabilirsiniz:
Bir SolidColorBrush düğmenin (türü) arka planını boyayan bir (Framework olmayan öğe) animasyonu FrameworkElement
Bir ( SolidColorBrushGeometryDrawing ) () kullanılarak görüntülenen (Framework olmayan öğe) dolgusunu boyayan bir (Framework olmayan öğe) animasyonu ImageFrameworkElement .
Kod içinde, SolidColorBrushFrameworkElementSolidColorBrush adını ile kayıtlı olan bir sınıf tarafından tanımlanan bir sınıf tarafından animasyon uygulayın FrameworkElement .
Ancak, StoryboardSolidColorBrush adını bir veya ' a kaydetmeyen veya ya da FrameworkElementFrameworkContentElement ' nin bir özelliğini ayarlamak için kullanılmamış olan bir öğesine animasyon uygulamak için kullanamazsınız FrameworkElementFrameworkContentElement .
Görsel taslağa sahip animasyonları uygulama
StoryboardAnimasyonları düzenlemek ve uygulamak üzere kullanmak için, animasyonları alt öğe zaman çizelgeleri olarak eklersiniz Storyboard . StoryboardSınıfı Storyboard.TargetName ve Storyboard.TargetProperty ekli özellikleri sağlar. Bu özellikleri bir animasyon üzerinde, hedef nesnesini ve özelliğini belirtmek için ayarlarsınız.
Animasyonlarına animasyon uygulamak için Storyboard bir tetikleyici eylemi veya bir yöntemi kullanmaya başlayabilirsiniz. XAML 'de BeginStoryboard ,, veya içeren bir nesnesi kullanırsınız EventTriggerTriggerDataTrigger . Kodda, yöntemini de kullanabilirsiniz Begin .
Aşağıdaki tabloda Storyboard , her BEGIN tekniğinin desteklendiği farklı konumlar gösterilmektedir: örnek başına, stil, denetim şablonu ve veri şablonu. "Örnek başına" bir animasyon veya görsel taslağı, bir stil, denetim şablonu veya veri şablonu yerine doğrudan nesnenin örneklerine uygulama tekniği anlamına gelir.
| Görsel taslak kullanılarak başlatıldı... | Örnek başına | Stil | Denetim şablonu | Veri şablonu | Örnek |
|---|---|---|---|---|---|
| BeginStoryboard ve bir EventTrigger | Yes | Yes | Yes | Yes | Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme |
| BeginStoryboard ve bir özellik Trigger | Hayır | Yes | Yes | Yes | Özellik Değeri Değiştiğinde bir Animasyonu Tetikleme |
| BeginStoryboard ve bir özellik MultiTrigger | Hayır | Yes | Yes | Yes | MultiTrigger sınıfı örneği |
| BeginStoryboard ve bir DataTrigger | Hayır | Yes | Yes | Yes | Nasıl yapılır: veri değiştiğinde animasyon tetikleme |
| BeginStoryboard ve bir MultiDataTrigger | Hayır | Yes | Yes | Yes | MultiDataTrigger sınıfı örneği |
| Begin yöntemi | Yes | Hayır | Hayır | Hayır | Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme |
Aşağıdaki örnek, StoryboardWidthRectangle öğesini boyamak için bir öğesi ve bir öğesine animasyon uygulamak için bir kullanır ColorSolidColorBrushRectangle .
<!-- 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 TargetName ve TargetProperty Ekli Özellikler daha ayrıntılı olarak açıklanır.
Framework öğelerini, Framework Içerik öğelerini ve Freezable nesneleri hedefleme
Önceki bölümde, bir animasyonun hedefini bulması için hedefin adı ve animasyon uygulanacak özelliği bilmeleri gerekir. Animasyon uygulanacak özelliği belirtmek düz bir işlemdir: yalnızca TargetProperty animasyon eklenecek özelliğin adıyla birlikte ayarlanır. Animasyon üzerinde özelliğini ayarlayarak, özelliğini hareketlendirmek istediğiniz nesnenin adını belirtirsiniz Storyboard.TargetName .
Dikkat
Target' İ alternatif olarak bir nesneye doğrudan bağlamak için özelliğini kullanabilirsiniz TargetName , ancak seri hale getirilebilir değildir. TargetXaml 'de nesnenin doğru şekilde başvurulduğundan garanti edilmez.
TargetNameÖzelliğin çalışması için, hedeflenen nesne bir ada sahip olmalıdır. FrameworkElementXAML içinde bir veya bir ad atamak FrameworkContentElement , bir nesneye ad atamaktan farklıdır Freezable .
Framework öğeleri sınıfından kalıtımla alan sınıflardır FrameworkElement . Çerçeve öğelerinin örnekleri,, Window , DockPanelButton ve içerir Rectangle . Temelde tüm pencereler, paneller ve denetimler öğelerdir. Framework içerik öğeleri sınıfından kalıtımla alan sınıflardır FrameworkContentElement . Framework içerik öğelerinin örnekleri ve içerir FlowDocumentParagraph . Bir türün çerçeve öğesi veya çerçeve içerik öğesi olup olmadığından emin değilseniz, bir ad özelliğine sahip olup olmadığını denetleyin. Varsa, bu büyük olasılıkla bir çerçeve öğesi veya bir çerçeve içerik öğesidir. Emin olmak için, tür sayfasının Devralma Hiyerarşisi bölümünü kontrol edin.
XAML'de bir çerçeve öğesinin veya bir çerçeve içerik öğesinin hedefini etkinleştirmek için özelliğini Name ayarlayın. Kodda, öğenin adını kendi oluşturduğunuz öğesiyle kaydetmek RegisterName için yöntemini de NameScope kullanacaksınız.
Önceki örnekten alınan aşağıdaki örnek, adına bir MyRectangleRectangle türü FrameworkElement 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 adı olduktan sonra, bu öğenin özelliğine animasyon ebilirsiniz.
<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 devralınan Freezable sınıflardır. Örnek olarak FreezableSolidColorBrush , ve yer RotateTransformGradientStop verilmiştir.
XAML'de bir animasyon ile hedeflemeyi etkinleştirmek için FreezableFreezable bir ad atarsiniz. Kodda yöntemini RegisterName kullanarak adını oluşturduğunuz öğesiyle kaydedebilirsiniz. NameScope
Aşağıdaki örnek bir nesneye bir ad Freezable atar.
<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);
Daha sonra nesnesi bir animasyon tarafından hedef olabilir.
<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 için ad kapsamlarını TargetName kullanır. WPF ad kapsamları hakkında daha fazla bilgi için bkz. WPF XAML Namescopes. Özellik atlanırsa animasyon, tanımlandığı öğeyi veya stiller durumunda stilli TargetName öğeyi hedefler.
Bazen bir nesneye ad Freezable atanabilir. Örneğin, bir kaynak olarak bildirildi veya bir stilde özellik değeri ayarlamak için kullanılırsa, Freezable bu değere ad ver edilemez. Bir adı olduğundan doğrudan hedeflenene, ancak dolaylı olarak hedeflenene bir ada sahip olabilir. Aşağıdaki bölümlerde dolaylı hedeflemenin nasıl kullanımı açıklanmaktadır.
Dolaylı Hedefleme
bazen bir animasyon tarafından doğrudan hedeflenemz, örneğin kaynağı olarak bildirilen veya stilde bir özellik değeri FreezableFreezable ayarlamak için kullanılan. Bu gibi durumlarda, doğrudan hedefleyene bile nesneye animasyon Freezable sızabilirsiniz. özelliğini öğesinin adıyla ayar yapmak yerine , "ait TargetNameFreezable olduğu Freezable öğenin" adını vetirsiniz. Örneğin, dikdörtgen SolidColorBrush öğenin ayarlamak Fill için kullanılan bir dikdörtgene aittir. Fırçaya animasyon animasyonu yapmak için, animasyonun öğesini ayarlamak için kullanılan çerçeve öğesinin veya çerçeve içerik öğesinin özelliğinde başlayan bir özellik zinciriyle ayarlayın ve animasyonu oluşturmak için özelliğiyle TargetPropertyFreezableFreezable bitersiniz.
<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);
donmuşsa bir kopya yapılır ve bu kopya animasyonlu Freezable olur. Bu durumda, özgün nesne gerçekten animasyonlu HasAnimatedPropertiesfalse değildir, çünkü özgün nesnenin özelliği geri dönmeye devam eder. Kopyalama hakkında daha fazla bilgi için bkz. Freezable Objects Overview.
Ayrıca dolaylı özellik hedefleme kullanırken var olmayan nesneleri hedeflemenin mümkün olduğunu unutmayın. Örneğin, belirli bir düğmenin ile ayar olduğunu varsayabilirsiniz ve aslında düğmenin Arka Planını ayarlamak için bir kullanılırken, bu düğmenin Color özelliğine animasyonu BackgroundSolidColorBrush yapmaya LinearGradientBrush çalışabilirsiniz. Bu durumlarda özel durum yoktur; özelliğinde yapılan değişikliklere tepki LinearGradientBrush vermeyebilen animasyonun görünür bir etkisi Color yoktur.
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özdizimini kullanın.
| ElementPropertyNameFreezablePropertyName |
Konum
ElementPropertyName, ayarlamak için kullanılan Freezable öğesinin özelliğidir ve
FreezablePropertyName, animasyona animasyonu yapmak için özelliğinin özelliğidir.
Aşağıdaki kod, dikdörtgen öğenin öğesini ayarlamak Color için SolidColorBrush kullanılan öğesinin öğesine Fill animasyonu nasıl animasyonu ekleyin.
<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 yer alan freezable'ı hedeflemeniz gerekir.
Bir koleksiyonda yer alan freezable'ı hedeflemek için aşağıdaki yol söz dizimini kullanın.
| ElementPropertyNameCollectionIndexFreezablePropertyName |
Burada CollectionIndex, dizisinde veya koleksiyonunda nesnenin dizinidir.
Örneğin, bir dikdörtgenin özelliğine uygulanmış bir kaynağı olduğunu ve içerdiği dönüşümlerden TransformGroupRenderTransform birinin animasyonu yapmak istediğinizi varsayalım.
<TransformGroup x:Key="MyTransformGroupResource"
x:Shared="False">
<ScaleTransform />
<RotateTransform />
</TransformGroup>
Aşağıdaki kod, önceki örnekte gösterilen Angle özelliğinin RotateTransform özelliğine animasyonu nasıl gösterebilirsiniz?
<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 nesnesi PropertyPath oluştururuz. 'i PropertyPath 7.000.000.000.000 'i Path 0,00 PathParameters
oluşturmak PathParameters için, bağımlılık özelliği tanımlayıcı DependencyProperty alanlarının listesini içeren türünde bir dizi oluşturun. İlk tanımlayıcı alanı, veya FrameworkElement özelliğinin FrameworkContentElement ayarlamak için kullanılan Freezable özelliğine yöneliktir. Sonraki tanımlayıcı alanı, hedef için özelliğini Freezable temsil eder. Bunu nesnesine bağlayan bir özellik zinciri Freezable olarak FrameworkElement düşünebilirsiniz.
Aşağıda dikdörtgen öğenin ayarlamak için kullanılan öğesini hedef alan bir Color bağımlılık özellik zinciri örneği ve SolidColorBrushFill bulunmaktadır.
DependencyProperty[] propertyChain =
new DependencyProperty[]
{Rectangle.FillProperty, SolidColorBrush.ColorProperty};
Ayrıca belirtmeniz Path gerekir. , PathString yorumlanması gereken Path bir PathParameters ifadedir. Aşağıdaki söz dizimlerini kullanır.
(().().() |
Konum
OwnerPropertyArrayIndex, ayarlamak için kullanılan nesnesinin özelliğinin tanımlayıcısını içeren FrameworkElement dizinin Freezable dizinidir ve
FreezablePropertyArrayIndex, hedef özelliğin tanımlayıcısını içeren dizinin dizinidir.
Aşağıdaki örnek, önceki Path örnekte tanımlanan ile birlikte gelen örneği PathParameters gösterir.
DependencyProperty[] propertyChain =
new DependencyProperty[]
{Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
Aşağıdaki örnek, dikdörtgen öğenin ayarlamak için kullanılan öğesine animasyonu yapmak ColorSolidColorBrush için önceki örneklerde yer alan kodu Fill 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 yer alan freezable'ı hedeflemeniz gerekir. Örneğin, bir dikdörtgenin özelliğine uygulanmış bir kaynağı olduğunu ve içerdiği dönüşümlerden TransformGroupRenderTransform birinin animasyonu yapmak istediğinizi varsayalım.
<TransformGroup x:Key="MyTransformGroupResource"
x:Shared="False">
<ScaleTransform />
<RotateTransform />
</TransformGroup>
Bir Freezable koleksiyonda yer alan bir içermeyi hedeflemek için aşağıdaki yol söz dizimini kullanın.
(().().()[)].([) |
Burada CollectionIndex, dizisinde veya koleksiyonunda nesnenin dizinidir.
özelliğini Angle hedeflemek için RotateTransform , içinde ikinci TransformGroup dönüşüm, aşağıdaki ve Path kullanır. PathParameters
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 örnekte, içindeki bir için animasyonu Angle olan RotateTransform kodunun tam kodu TransformGroup 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 ile başlayarak ve bir alt özelliğine özellik zinciri oluşturarak Freezable bir'i dolaylı olarak hedefleme FrameworkElementFrameworkContentElementFreezable açıklanmıştır. Ayrıca bir başlangıç Freezable noktası olarak kullanabilir ve alt özelliklerden birini dolaylı olarak Freezable hedefleyebilirsiniz. Dolaylı hedefleme için bir başlangıç noktası olarak kullanırken bir ek kısıtlama uygulanır: başlangıç ve bu ve dolaylı olarak hedeflenen alt özellik arasındaki her şey FreezableFreezableFreezable dondurulmamak gerekir.
XAML'de Bir Storyboard'ı Etkileşimli Olarak Denetleme
Extensible Application Markup Language (XAML) içinde bir storyboard başlatmak için tetikleyici BeginStoryboard eylemi kullanırsanız. BeginStoryboard animasyonları animasyonlara ve animasyonlara animasyonu ve özellikleri dağıtır ve görsel şeridi başlatır. (Bu işlemle ilgili ayrıntılar için bkz. Animasyon ve Zamanlama Sistemine Genel Bakış.) Özelliğini BeginStoryboard belirterek bir ad Name verirsiniz, bunu denetime değiştirilebilir bir storyboard olur. Daha sonra, başlatıldıktan sonra, storyboard'ı etkileşimli olarak kontrol etmek için. Aşağıda, bir storyboard'ları kontrol etmek için olay tetikleyicileriyle birlikte kullanabileceğiniz denetime ekleyebilirsiniz.
PauseStoryboard: Storyboard'ları duraklatıyor.
ResumeStoryboard: Duraklatılmış bir storyboard'ları sürdürür.
SetStoryboardSpeedRatio: Storyboard'un hızını değiştirir.
SkipStoryboardToFill: Varsa, bir storyboard'un dolgu döneminin sonuna kadar ilerler.
StopStoryboard: Storyboard'ları durdurur.
RemoveStoryboard: Storyboard'ları kaldırır.
Aşağıdaki örnekte, bir storyboard'ları etkileşimli olarak kontrol etmek için kontrol edilebilir storyboard eylemleri kullanılı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 Bir Storyboard'ı Etkileşimli Olarak Denetleme
Önceki örneklerde tetikleyici eylemleri kullanılarak animasyonu nasıl göster gösterildi. Kodda, sınıfının etkileşimli yöntemlerini kullanarak bir storyboard'ı da kontrol Storyboard etmek için kullanabilirsiniz. bir kodunun kodda etkileşimli hale yüklenmesi için, storyboard'un yönteminin uygun aşırı yüklemelerini kullanmalı ve bunu kontrol edilebilir StoryboardBegin yapmak için true belirtebilirsiniz. Daha fazla Begin(FrameworkElement, Boolean) bilgi için sayfaya bakın.
Aşağıdaki listede, başlatıldıktan sonra bir işlemek için kullanılmaktadır Storyboard yöntemleri gösterir:
Bu yöntemleri kullanmanın avantajı, veya nesneleri oluşturmanıza gerek yok; yalnızca işlemek istediğiniz kontrol edilebilir için TriggerTriggerAction bir Storyboard başvuruya ihtiyacınız vardır.
Not
bir üzerinde ve bu nedenle de üzerinde yapılan tüm etkileşimli eylemler, bir sonraki işlemeden kısa bir süre önce gerçekleşecek zamanlama altyapısının sonraki ClockStoryboard onay işaretinde gerçekleşir. Örneğin, bir animasyonda başka bir noktaya atlamak için yöntemini kullanırsanız, özellik değeri anında değişmez; bunun yerine değer zamanlama altyapısının bir sonraki hareket Seek noktasında değişir.
Aşağıdaki örnek, sınıfının etkileşimli yöntemlerini kullanarak animasyonları uygulama ve denetlemeyi Storyboard gösterir.
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
bir içinde Storyboard animasyon tanımlamak için nesneleri kullanabilirsiniz. Style içinde ile Storyboard animasyonu Style yapmak, aşağıdaki üç özel durum Storyboard dışında başka bir yerde kullanmaya benzer:
belirtmezseniz; her TargetName zaman Storyboard öğesinin uygulandığı öğeyi Style hedefler. Nesneleri Freezable hedeflemek için dolaylı hedefleme kullan gerekir. Dolaylı hedefleme hakkında daha fazla bilgi için Dolaylı Hedefleme bölümüne bakın.
veya için SourceNameEventTrigger belirtemezseniz. Trigger
Dinamik kaynak başvurularını veya veri bağlama ifadelerini kullanarak veya animasyon özellik değerlerini Storyboard ayar kullanılamaz. Bunun nedeni, içindeki her şeyin iş parçacığı açısından güvenli olması ve zamanlama sisteminin bunları iş parçacığı açısından güvenli hale StyleFreezeStoryboard etmek için nesnelerine sahip olmasıdır. Bir veya alt zaman çizelgeleri dinamik kaynak başvuruları veya veri Storyboard bağlama ifadeleri içeriyorsa dondurulamaz. Donma ve diğer özellikler hakkında daha Freezable fazla bilgi için bkz. Freezable.
XAML'de veya animasyon olayları için olay Storyboard işleyicileri bildiresiniz.
Bir stilde bir film şeridi tanımlamayı gösteren bir örnek için bkz. Stilde Animasyona Animasyon.
ControlTemplate İçinde Animasyon Ekleme
bir içinde Storyboard animasyon tanımlamak için nesneleri kullanabilirsiniz. ControlTemplate içinde ile Storyboard animasyonu ControlTemplate yapmak, aşağıdaki iki özel durum Storyboard dışında başka bir yerde kullanmaya benzer:
TargetName, yalnızca alt nesnelerine başvurur. ControlTemplate TargetNamebelirtilmezse animasyon, öğesinin uygulandığı öğeyi ControlTemplate hedefler.
veya SourceName için , yalnızca alt EventTriggerTrigger nesnelerine ControlTemplate başvurur.
Dinamik kaynak başvurularını veya veri bağlama ifadelerini kullanarak veya animasyon özellik değerlerini Storyboard ayar kullanılamaz. Bunun nedeni, içindeki her şeyin iş parçacığı açısından güvenli olması ve zamanlama sisteminin bunları iş parçacığı açısından güvenli hale ControlTemplateFreezeStoryboard etmek için nesnelerine sahip olmasıdır. Bir veya alt zaman çizelgeleri dinamik kaynak başvuruları veya veri Storyboard bağlama ifadeleri içeriyorsa dondurulamaz. Donma ve diğer özellikler hakkında daha Freezable fazla bilgi için bkz. Freezable.
XAML'de veya animasyon olayları için olay Storyboard işleyicileri bildiresiniz.
içinde bir film şeridi tanımlamayı gösteren bir örnek için ControlTemplateControlTemplate bakın.
Özellik Değeri Değiştinde Animasyona Animasyon Kat
Stillerde ve denetim şablonlarında, Bir özellik değiştinde bir storyboard başlatmak için Tetikleyici nesneleri kullanabilirsiniz. Örnekler için bkz. ControlTemplate'da Özellik Değeri Değişirken Animasyon Tetikleme ve Animasyona Animasyon Uygulama.
Özellik nesneleri tarafından uygulanan Trigger animasyonlar, yöntemler kullanılarak başlayan animasyonlardan EventTrigger veya animasyonlardan daha karmaşık bir Storyboard şekilde davranır. Diğer nesneler tarafından tanımlanan animasyonlarla Trigger "ileti"ler, ancak ile ve yöntem tarafından EventTrigger tetiklenen animasyonlarla oluşur.