مشاركة عبر


نظرة عامة حول لوحات العمل

يوضح هذا الموضوع كيفية استخدام كائنات Storyboard لتنظيم و تطبيق الحركات. فهو يصف كيفية التعامل بشكل تفاعلي مع كائنات Storyboard و يصف بناء جملة استهداف الخاصية غير المباشرة.

المتطلبات الأساسية

لفهم هذا الموضوع, يجب أن تكون معتاداً على أنواع مختلفة من الحركة و الميزات الأساسية الخاصة بهم. للحصول على مقدمة عن الحركة، راجع نظرة عامة حول الحركة. يجب أيضاً معرفة كيفية استخدام الخصائص المرفقة. للحصول على مزيد من المعلومات حول الخصائص المرفقة، راجع نظرة عامة حول الخصائص المرفقة.

ما هي لوحة العمل؟

الحركة ليست النوع المفيد الوحيد من المخطط الزمني. يتم توفير الفئات الأخرى للمخطط الزمني لتساعدك في تنظيم مجموعات من المخططات الزمنية ، و لتطبيق المخططات الزمنية إلى الخصائص. مخططات الزمنية الحاوية تنحدر من فئة TimelineGroup، وتتضمن ParallelTimeline و Storyboard.

Storyboard هو نوع من مخطط الزمني الحاوية الذي يوفر معلومات استهداف للمخططات الزمنية التي يتضمنها. يمكن أن تحتوي لوحة العمل على أي نوع من Timeline، بما في ذلك مخططات زمنية حاوية غير ذلك و حركات. Storyboardتمكين الكائنات بضم المخططات الزمنية التي تؤثر على العديد من الكائنات والخصائص في شجرة مخطط زمني مفرد، مما يسهل على تنظيم و عنصر تحكم الالسلوكياتيات توقيت المعقدة. على سبيل المثال، افترض أنك تريد زر يقوم بهذه الأشياء الثلاثة.

  • زيادة حجم و تغيير اللون عندما يحدد المستخدم الزر.

  • التقليص بعيداً ثم زيادة الحجم مرة أخرى إلى حجمه الأصلي عند النقر فوقه.

  • التقليص و تضاؤل الشفافية إلى 50 بالمائة عندما يصبح معطلاً.

في هذه الالولاية، لديك عدة مجموعات من الحركات التي يمكن تطبيقها إلى نفس الكائن، وتم إلى تشغيلها في أوقات مختلفة، تعتمد تشغيل الولاية butإلىn. Storyboardتمكن من كائنات إلى تنظيم الحركة وتطبيقها في مجموعات إلى واحد أو المزيد الكائنات.

اين يمكن استخدام لوحة العمل ؟

Storyboard يمكن استخدامه لتحريك الخصائص التبعية من الفئات القابلة لتطبيق الحركة (لمزيد من المعلومات حول ما يجعل الفئة قابلة لتطبيق الحركة, راجع نظرة عامة حول الحركة). مع ذلك، لأن كتابة لوحة العمل هي ميزة مستوى إطار العمل، يجب أن ينتمي الكائن إلى NameScope من FrameworkElement أو FrameworkContentElement.

على سبيل المثال، يمكنك استخدام Storyboard للقيام بما يلي:

مع ذلك، قد لا تستخدم Storyboard لتحريك SolidColorBrush الذي لم يقوم بتسجيل اسمه مع FrameworkElement أو FrameworkContentElement، أو لم يتم استخدامه لتعيين خاصية من FrameworkElement أو FrameworkContentElement.

كيفية تطبيق حركات مع لوحة العمل

لاستخدام Storyboard لتنظيم و تطبيق الحركات، قم بإضافة الحركات كمخططات زمنية تابعة من Storyboard. فئة Storyboard توفر الخصائص المرفقة Storyboard.TargetName و Storyboard.TargetProperty. قم بتعيين هذه الخصائص على حركة لتحديد كائن الهدف الخاص به و الخاصية.

لتطبيق حركة إلى الأهداف الخاصة بهم, أبدأ Storyboard باستخدام إجراء مشغّل أو أسلوب. في XAML، استخدم كائن BeginStoryboard مع EventTrigger ، Trigger, أو DataTrigger. في التعليمات البرمجية، يمكنك أيضاً استخدام أسلوب Begin.

يعرض الجدول التالي مواقع مختلفة من حيث يتم بدأ كل دعم تقنية Storyboard: لكل مثيل و نمط و قالب عنصر التحكم و قالب البيانات. " في كل من مثيل"يشير إلى أسلوب تطبيق رسم متحرك بريد أو لوحة العمل مباشرة إلى مثيلات كائن، بدلاً من النمط أو قالب عنصر التحكم قالب بيانات.

تبدأ لوحة العمل باستخدام...

لكل مثيل

النمط

قوالب عنصر التحكم

قالب البيانات

المثال

BeginStoryboard و EventTrigger

نعم

نعم

نعم

نعم

كيفية القيام بما يلي: تحريك خاصية باستخدام لوحة العمل

BeginStoryboard و خاصية Trigger

لا

نعم

نعم

نعم

كيفية القيام بما يلي: تشغيل حركة عند تغيير قيمة خاصية

BeginStoryboard و DataTrigger

لا

نعم

نعم

نعم

كيفية القيام بما يلي: تشغيل حركة عند تغيير البيانات

أسلوب Begin:

نعم

لا

لا

لا

كيفية القيام بما يلي: تحريك خاصية باستخدام لوحة العمل

يستخدم المثال التالي Storyboard لتحريك Width من عنصر Rectangle و Color من SolidColorBrush المستخدم لرسم ذلك Rectangle.

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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>

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


Namespace Microsoft.Samples.Animation
    Public Class StoryboardsExample
        Inherits Page
        Public Sub New()
            Me.WindowTitle = "Storyboards Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            Dim myRectangle As New Rectangle()
            myRectangle.Name = "MyRectangle"

            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            Dim mySolidColorBrush As New SolidColorBrush(Colors.Blue)
            Me.RegisterName("MySolidColorBrush", mySolidColorBrush)
            myRectangle.Fill = mySolidColorBrush

            Dim myDoubleAnimation As 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))

            Dim myColorAnimation As 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))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            myStoryboard.Children.Add(myColorAnimation)

            AddHandler myRectangle.MouseEnter, Sub(sender As Object, e As MouseEventArgs) myStoryboard.Begin(Me)

            myStackPanel.Children.Add(myRectangle)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace
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;
        } 
    }
}

تصف المقاطع التالية الخصائص المرفقة TargetName و TargetProperty بمزيد من التفاصيل.

استهداف عناصر Framework، عناصر محتوى Framework ، و الكائنات القابلة للتجميد

المقطع السابق ذكر أنه من أجل أن تجد الحركة الهدف الخاص بها، يجب أن تعرف اسم الهدف و الخاصية المراد تحريكها. تحديد الخاصية لتحريكها طريقة مباشرة: ببساطة قم بتعيين Storyboard.TargetProperty باسم الخاصية المراد تحريكها. قم بتحديد اسم الكائن الذي تريد تحريك خاصيته بواسطة إعداد خاصية Storyboard.TargetName على الحركة.

من أجل أن تعمل خاصية TargetName, يجب أن يكون لدى كائن المستهدف اسم. تعيين اسم إلى FrameworkElement أو FrameworkContentElement في XAML يختلف عن تعيين اسم إلى كائن Freezable.

عناصر إطار عمل هي تلك الفئات التي ترث من فئة FrameworkElement. أمثلة على عناصر إطار العمل يتضمن Window ، DockPanel، Button، و Rectangle. بشكل أساسي كافة الإطارات, اللوحات و عناصر التحكم تكون عناصر. عناصر محتوي إطار العمل هي تلك الفئات التي ترث من فئة FrameworkContentElement. أمثلة على عناصر محتوي إطار العمل يتضمن FlowDocument و Paragraph. إذا لم تكن متأكداً من ما إذا كان النوع عنصر إطار عمل أو عنصر محتوى إطار عمل, تحقق لمعرفة ما إذا كان تحتوي على خاصية اسم. إذا كانت تحتوي، فمن المحتمل أن يكون عنصر إطار عمل أو عنصر محتوى إطار عمل. للتأكد، تحقق من مقطع توريث التسلسل الهرمي من صفحة النوع الخاصة به.

لتمكين استهداف عنصر إطار عمل أو عنصر محتوى إطار عمل في XAML، قم بتعيين خاصية Name الخاصة به. في التعليمات البرمجية ، تحتاج أيضاً إلى استخدام أسلوب RegisterName لتسجيل اسم العنصر مع العنصر الذي قمت من خلاله بإنشاء NameScope.

يعين المثال التالي, المأخوذ من المثال السابق, اسم MyRectangle Rectangle, نوع من FrameworkElement.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">
            Dim myRectangle As New Rectangle()
            myRectangle.Name = "MyRectangle"

            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.RegisterName(myRectangle.Name, myRectangle)
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

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

this.RegisterName(myRectangle.Name, myRectangle);

بعد أن تحتوي على اسم يمكنك تحريك خاصية من هذا العنصر.

<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))
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, 
    new PropertyPath(Rectangle.WidthProperty));

أنواع Freezable هم تلك الفئات التي ترث من فئة Freezable. الأمثلة من Freezable تتضمن SolidColorBrush, RotateTransform, و GradientStop.

لتمكين استهداف Freezable بواسطة حركة في XAML، استخدم س: اسم السمة لتعيين اسم له. في التعليمات البرمجية ، تحتاج إلى استخدام أسلوب RegisterName لتسجيل اسمه مع العنصر الذي قمت من خلاله بإنشاء NameScope.

يعين المثال التالي اسم إلى كائن Freezable.

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
            Dim mySolidColorBrush As New SolidColorBrush(Colors.Blue)
            Me.RegisterName("MySolidColorBrush", mySolidColorBrush)
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

يمكن بعد ذلك استهداف الكائن بواسطة حركة.

<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.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation, 
    new PropertyPath(SolidColorBrush.ColorProperty)); 

كائنات Storyboard تستخدم نطاقات الاسم لحل خاصية TargetName. للحصول على مزيد من المعلومات حول نطاقات اسم WPF، راجع WPF XAML Namescopes. إذا تم حذف خاصية TargetName, تقوم الحركة باستهداف العنصر المعرَّ عليه الخاصية أو في حالة الأنماط, عنصر المطبق عليه نمط.

أحياناً لا يمكن تعيين اسم إلى كائن Freezable. على سبيل المثال، إذا تم تعريف Freezable كمورد أو استخدامه لتعيين قيمة خاصية في نمط, فانه يتعذر منحه اسم. لأنه لا يملك اسماً ، فإنه لا يمكن استهدافه مباشرة — و لكن يمكن استهدافه بشكل غير مباشر. تصف المقاطع التالية كيفية استخدام الاستهداف غير المباشر.

استهداف غير مباشر

هناك أوقات لا يمكن استهداف Freezable مباشرة بواسطة حركة، مثل متى يتم تعريف Freezable كمورد أو استخدامه لتعيين قيمة خاصية في نمط. في هذه الحالات، بالرغم من تعذر استهدافه مباشرةً، لا يزال يمكنك تحريك كائن Freezable. بدلاً من تعيين خاصية TargetName باسم Freezable، قم بإعطائها اسم العنصر الذي ينتمي إليه Freezable. على سبيل المثال، SolidColorBrush يُستخدم لتعيين Fill من عنصر مستطيل ينتمي إلى هذا المستطيل. لتحريك الفرشاة, يجب تعيين TargetProperty للحركة مع سلسلة خصائص تبدأ عند خاصية عنصر إطار العمل أو عنصر محتوى إطار العمل التي تم استخدامه من قبل Freezable للتعيين و تنتهي مع خاصية Freezable لتحريكها.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />
            Dim propertyChain() As DependencyProperty = {Rectangle.FillProperty, SolidColorBrush.ColorProperty}
            Dim thePath As String = "(0).(1)"
            Dim myPropertyPath As New PropertyPath(thePath, propertyChain)
            Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath)
DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

لاحظ أن، إذا كان Freezable مجمد ، سيتم إجراء نسخة و سيتم تحريك هذه النسخة. عندما يحدث هذا، خاصية HasAnimatedProperties للكائن الأصلي تستمر في إرجاع false، لأنه الكائن الأصلي لم يتم تحريكه فعلياً. لمزيد من المعلومات حول الاستنساخ، راجع نظرة عامة حول الكائنات المجمدة.

لاحظ أيضاً، أنه عند استخدام الاستهداف غير المباشر, من الممكن استهداف كائنات غير موجودة. على سبيل المثال، قد تفترض أن Background من زر معين تم تعيينه مع SolidColorBrush و تحاول تحريك لونه, بينما في الواقع تم استخدام LinearGradientBrush لتعيين خلفية الزر. في هذه الحالات، لا يتم إلقاء استثناء; تفشل الحركة في أن يكون لها تأثير مرئي لأن LinearGradientBrush لا يتفاعل مع التغييرات إلى خاصية Color.

تصف المقاطع التالية بناء جملة استهداف خاصية غير مباشر في المزيد من التفاصيل.

استهداف بشكل غير مباشر خاصية من Freezable في XAML

لاستهداف خاصية كائن قابل للتجميد في XAML، استخدم بناء الجملة التالية.

ElementPropertyName.FreezablePropertyName

حيث يكون

  • ElementPropertyName هي خاصية من FrameworkElement التي يُستخدم Freezable لتعيينها، و

  • FreezablePropertyName هي الخاصية من Freezable المراد تحريكها.

التعليمات البرمجية التالية توضح كيفية تحريك Color من SolidColorBrush المستخدمة لتعيين

Fill من عنصر مستطيل.

<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>

أحياناً تحتاج لاستهداف كائن قابل للتجميد المضمن في مجموعة أو صفيف.

لاستهداف كائن قابل للتجميد المضمن في مجموعة, استخدم بناء جملة المسار التالي.

ElementPropertyName.Children[CollectionIndex].FreezablePropertyName

حيث CollectionIndex هو فهرس الكائن في الصفيف أو المجموعة الخاصة به.

على سبيل المثال، افترض أن مستطيل له مورد TransformGroup المطبق إلى خاصية RenderTransform الخاصة به، و ترغب في تحريك أحد التحويلات الذي يتضمنها.

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

تُظهر التعليمات البرمجية التالية كيفية تحريك خاصية Angle من RotateTransform الموضح في المثال السابق.

<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>  

استهداف بشكل غير مباشر خاصية من Freezable في التعليمات البرمجية

في التعليمات البرمجية، يمكنك إنشاء كائن PropertyPath. عند إنشاء PropertyPath، يمكنك تحديد Path و PathParameters.

لإنشاء PathParameters، تقوم بإنشاء صفيف من نوع DependencyProperty الذي يحتوي على قائمة من حقول معرّف الخاصية التبعية. حقل المعرّف الأول هو لخاصية من FrameworkElement أو FrameworkContentElement التي يتم استخدام Freezable لتعيينه. يمثل الحقل المعرّف التالي خاصية من Freezable لاستهدافها. فكر فيه كسلسلة من الخصائص التي تصل Freezable إلى كائن FrameworkElement.

التالي هو مثال من سلسلة خاصية تبعية تستهدف Color من SolidColorBrush المستخدمة لتعيين Fill من عنصر مستطيل.

            Dim propertyChain() As DependencyProperty = {Rectangle.FillProperty, SolidColorBrush.ColorProperty}
DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};

كما تحتاج إلى تحديد Path. Path هو String الذي يخبر Path كيفية تفسير PathParameters. تستخدم بناء الجملة التالي:

(OwnerPropertyArrayIndex).(FreezablePropertyArrayIndex)

حيث يكون

  • OwnerPropertyArrayIndex هو فهرس لصفيف DependencyProperty الذي يحتوي على المعرف لخاصية كائن FrameworkElement التي يُستخدم Freezable لتعيينها، و

  • FreezablePropertyArrayIndex هو الفهرس لصفيف DependencyProperty الذي يحتوي على معرف الخاصية إلى الهدف.

يظهر المثال التالي Path التي ستصاحب PathParameters المعرف في المثال السابق.

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

المثال التالي يدمج التعليمات البرمجية في الأمثلة السابقة لتحريك Color من SolidColorBrush المستخدم لتعيين Fill من عنصر المستطيل.


            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Dim rectangle01 As New Rectangle()
            rectangle01.Name = "Rectangle01"
            Me.RegisterName(rectangle01.Name, rectangle01)
            rectangle01.Width = 100
            rectangle01.Height = 100
            rectangle01.Fill = CType(Me.Resources("MySolidColorBrushResource"), SolidColorBrush)

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

            Dim propertyChain() As DependencyProperty = {Rectangle.FillProperty, SolidColorBrush.ColorProperty}
            Dim thePath As String = "(0).(1)"
            Dim myPropertyPath As New PropertyPath(thePath, propertyChain)
            Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath)

            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myColorAnimation)
            Dim myBeginStoryboard As New BeginStoryboard()
            myBeginStoryboard.Storyboard = myStoryboard
            Dim myMouseEnterTrigger As New EventTrigger()
            myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent
            myMouseEnterTrigger.Actions.Add(myBeginStoryboard)
            rectangle01.Triggers.Add(myMouseEnterTrigger)

// 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);

أحياناً تحتاج لاستهداف كائن قابل للتجميد المضمن في مجموعة أو صفيف. على سبيل المثال، افترض أن مستطيل له مورد TransformGroup المطبق إلى خاصية RenderTransform الخاصة به، و ترغب في تحريك أحد التحويلات الذي يتضمنها.

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

لاستهداف Freezable المضمن في مجموعة, قم باستخدام بناء جملة المسار التالي.

(OwnerPropertyArrayIndex).( CollectionChildrenPropertyArrayIndex) [CollectionIndex ].(FreezablePropertyArrayIndex)

حيث CollectionIndex هو فهرس الكائن في الصفيف أو المجموعة الخاصة به.

لاستهداف خاصية Angle من RotateTransform ، التحويل الثاني في TransformGroup ، يمكنك استخدام التالي Path و PathParameters.

            Dim propertyChain() As DependencyProperty = { Rectangle.RenderTransformProperty, TransformGroup.ChildrenProperty, RotateTransform.AngleProperty }
            Dim thePath As String = "(0).(1)[1].(2)"
            Dim myPropertyPath As New PropertyPath(thePath, propertyChain)
            Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath)
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);

يظهر المثال التالي على التعليمات البرمجية الكاملة لتحريك Angle من RotateTransform الموجود ضمن TransformGroup.

            Dim rectangle02 As New Rectangle()
            rectangle02.Name = "Rectangle02"
            Me.RegisterName(rectangle02.Name, rectangle02)
            rectangle02.Width = 100
            rectangle02.Height = 100
            rectangle02.Fill = Brushes.Blue
            rectangle02.RenderTransform = CType(Me.Resources("MyTransformGroupResource"), TransformGroup)

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 0
            myDoubleAnimation.To = 360
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(1))
            Storyboard.SetTargetName(myDoubleAnimation, rectangle02.Name)

            Dim propertyChain() As DependencyProperty = { Rectangle.RenderTransformProperty, TransformGroup.ChildrenProperty, RotateTransform.AngleProperty }
            Dim thePath As String = "(0).(1)[1].(2)"
            Dim myPropertyPath As New PropertyPath(thePath, propertyChain)
            Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath)

            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Dim myBeginStoryboard As New BeginStoryboard()
            myBeginStoryboard.Storyboard = myStoryboard
            Dim myMouseEnterTrigger As New EventTrigger()
            myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent
            myMouseEnterTrigger.Actions.Add(myBeginStoryboard)
            rectangle02.Triggers.Add(myMouseEnterTrigger)
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);

استهداف بشكل غير مباشر مع Freezable كنقطة البداية

المقاطع السابقة وضحت كيفية استهداف بشكل غير مباشر Freezable عن طريق البدء مع FrameworkElement أو FrameworkContentElement و إنشاء سلسلة خاصية إلى خاصية فرعية Freezable. يمكنك أيضاً استخدام Freezable كنقطة بداية و استهدف بشكل غير مباشر أحد الخصائص الفرعية Freezable الخاصة به. يتم تطبيق قيد إضافي واحد عند استخدام Freezable كنقطة بداية لاستهداف غير مباشر: البداية Freezable و كل Freezable بينها و بين الخاصية الفرعية المستهدفة بشكل غير مباشر يجب أن لا تكون مجمدة.

التحكم بشكل تفاعلي مع لوحة عمل في XAML

لبدء تشغيل لوحة العمل في Extensible Application Markup Language (XAML)، استخدام BeginStoryboardإجراء "يشغّل". BeginStoryboardتوزع الحركات إلى الكائنات وخصائص تحريك، ويبدأ sإلىryboard. (للحصول على تفاصيل حول هذه العملية، راجع نظرة عامة على نظام الحركة و التوقيت.) إذا أعطيت BeginStoryboard اسم بواسطة تحديد خاصية Name ، فانك تقوم بجعله لوحة عمل قابلة للتحكم. يمكنك بعدها التحكم بشكل تبادلي في لوحة العمل بعد بدء تشغيلها. التالي هو قائمة إجراءات لوحة العمل القابلة للتحكم التي تستخدمها مع مشغلات الحدث للتحكم في لوحة العمل.

في المثال التالي, يتم استخدام إجراءات لوحة عمل قابلة للتحكم من أجل التحكم بشكل تبادلي مع لوحة العمل.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

التحكم بشكل تفاعلي مع لوحة العمل باستخدام التعليمات البرمجية

تظهر الأمثلة السابقة كيفية التحريك باستخدام الإجراءات المشغّلة. في التعليمات البرمجية، يمكنك أيضاً التحكم في لوحة العمل باستخدام الأساليب التفاعلية لفئة Storyboard. حتي تصبح Storyboard تفاعلية في التعليمات البرمجية، يجب عليك استخدام التحميل الزائد المناسب لأسلوب Begin للوحة العمل و تحديد true لجعلها قابلة للتحكم. راجع صفحة Begin(FrameworkElement, Boolean) لمزيد من المعلومات.

تعرض القائمة التالية الطرق التي يمكن استخدامها لتعالج Storyboard بعدما تم بدء تشغيل:

ميزة استخدام هذه الأساليب هي أنك لا تحتاج إلى إنشاء كائنات Trigger أو TriggerAction; تحتاج فقط مرجع إلى Storyboard القابلة للتحكم التي تريد معالجتها.

ملاحظة: كافة الإجراءات التبادلية التي تم اتخاذها على Clock ، و بالتالي أيضاً على Storyboard ستحدث في التجزئة التالية من مشغّل التوقيت الذي سيحدث بعد قليل قبل التقديم التالي. على سبيل المثال، إذا كنت تستخدم أسلوب Seek للانتقال إلى نقطة آخري في الحركة، قيمة الخاصية لا تتغير بشكل فوري ، بدلاً من ذلك، تتغير القيمة عند التجزئة التالية من مشغل التوقيت.

المثال التالي يوضح كيفية تطبيق و التحكم في الحركات باستخدام أساليب تفاعلية من فئة Storyboard.


Imports Microsoft.VisualBasic
Imports System
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
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);

        }         

    }

}

إظهار حركة في نمط

يمكنك استخدام كائنات Storyboard لتعريف حركات في Style. التحريك مع Storyboard في Style يشبه استخدام Storyboard في مكان آخر، بالاستثنائيات الثلاثة التالية:

  • لا تقوم بتحديد TargetName; Storyboard دوماً يستهدف العنصر حيث تم تطبيق Style. لاستهداف كائنات Freezable, يجب عليك استخدام استهداف غير مباشر. لمزيد من المعلومات حول الاستهداف غير مباشر, راجع مقطع الاستهداف غير مباشر.

  • لا يمكنك تحديد SourceName ل EventTrigger أو Trigger.

  • لا يمكنك استخدام مراجع المورد الحيوي أو تعريفات ربط البيانات لتعيين Storyboard أو قيم خاصية الحركة. هذا لأن كل شيء داخل Style يجب أن يكون ذو مؤشر ترابط آمن و يجب على نظام التوقيت Freeze كائنات Storyboard لجعلها ذات مؤشر ترابط آمن. لا يمككن تجميد Storyboard إذا كانت هي أو أحد المخططات الزمنية التابعة لها تحتوي على مراجع مورد حيوي أو تعريفات ربط البيانات. للحصول على مزيد من المعلومات حول التجميد و ميزات Freezableالأخرى, راجع نظرة عامة حول الكائنات المجمدة.

  • في XAML, لا يمكنك تعريف معالجات الأحداث من أجل Storyboard أو أحداث الحركة.

للحصول على مثال يوضح كيف يتم تعريف لوحة عمل في نمط، راجع مثال كيفية القيام بما يلي: إظهار حركة في نمط .

إظهار حركة في ControlTemplate

يمكنك استخدام كائنات Storyboard لتعريف حركات في ControlTemplate. التحريك مع Storyboard في ControlTemplate يشبه استخدام Storyboard في مكان آخر، بالاستثنائين التاليين:

  • TargetName قد يشير فقط إلى الكائنات التابعة من ControlTemplate. إذا كان TargetName غير محدد, تستهدف الحركة العنصر حيث تم تطبيق ControlTemplate.

  • SourceName ل EventTrigger أو Trigger قد تشير فقط إلى الكائنات التابعة من ControlTemplate.

  • لا يمكنك استخدام مراجع المورد الحيوي أو تعريفات ربط البيانات لتعيين Storyboard أو قيم خاصية الحركة. هذا لأن كل شيء داخل ControlTemplate يجب أن يكون ذو مؤشر ترابط آمن و يجب على نظام التوقيت Freeze كائنات Storyboard لجعلها ذات مؤشر ترابط آمن. لا يمككن تجميد Storyboard إذا كانت هي أو أحد المخططات الزمنية التابعة لها تحتوي على مراجع مورد حيوي أو تعريفات ربط البيانات. للحصول على مزيد من المعلومات حول التجميد و ميزات Freezableالأخرى, راجع نظرة عامة حول الكائنات المجمدة.

  • في XAML, لا يمكنك تعريف معالجات الأحداث من أجل Storyboard أو أحداث الحركة.

للحصول على مثال يوضح كيف يتم تعريف لوحة عمل في ControlTemplate، راجع مثال كيفية القيام بما يلي: إظهار حركة في ControlTemplate.

التحريك عند تغيير قيمة الخاصية

في قوالب الأنماط و التحكم، يمكن استخدام كائنات المشغّل لبدء لوحة العمل عند تغيير الخاصية. للحصول على أمثلة أخرى، انظر كيفية القيام بما يلي: تشغيل حركة عند تغيير قيمة خاصية و كيفية القيام بما يلي: إظهار حركة في ControlTemplate.

الحركة المطبقة من قبل خاصية كائناتTrigger تتصرف بطريقة أكثر تعقيداً من حركات EventTrigger أو الحركات التي تم بدء تشغيلها باستخدام أساليب Storyboard. فهم "يوصلون" مع الحركات التي تم تعريفها من قِبل كائنات Trigger أخرى لكن يتم إنشاء مع حركات EventTrigger و حركات تم تشغيلها بواسطة أسلوب.

راجع أيضًا:

المبادئ

نظرة عامة حول الحركة

نظرة عامة حول أساليب تحريك الخاصية

نظرة عامة حول الكائنات المجمدة