كيفية القيام بما يلي: تحريك خاصية باستخدام لوحة العمل
يوضح هذا المثال كيفية استخدام Storyboard لتحريك الخصائص. لتحريك خاصية باستخدام Storyboard ، قم بإنشاء حركة لكل خاصية تريد تحريكها وقم كذلك بإنشاء Storyboard كى يحتوي على الحركة.
يحدد نوع الخاصية نوع حركة التى يجب أن تستخدم. على سبيل المثال، لتحريك خاصية التي تأخذ القيم Double قم باستخدام DoubleAnimation. تقوم الخصائص المرفقة TargetName و TargetProperty بتحديد الكائن والخاصية التي يتم تطبيق الحركة عليها.
لبدء لوحة العمل في Extensible Application Markup Language (XAML) ، قم باستخدام اجراء BeginStoryboard وEventTrigger. يبدأ EventTrigger الاجراء BeginStoryboard عندما يحدث الحدث المحدد بواسطة الخاصية RoutedEvent. يبدأ الاجراء BeginStoryboard تشغيل Storyboard.
يستخدم المثال التالي الكائنات Storyboard التحريك عنصرى التحكم Button. لتغيير حجم الزر الأول يتم تحريك Width الخاص به. لتغيير لون الزر الثاني تستخدم الخاصية Color الخاصة بـ SolidColorBrush لتعيين Background الخاصة بالزر الذي يتم تحريكه.
مثال
<!-- StoryboardExample.xaml
Uses storyboards to animate properties. -->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Animate Properties with Storyboards">
<Border Background="White">
<StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">
<TextBlock>Storyboard Animation Example</TextBlock>
<!-- The width of this button is animated. -->
<Button Name="myWidthAnimatedButton"
Height="30" Width="200" HorizontalAlignment="Left">
A Button
<Button.Triggers>
<!-- Animates the width of the first button
from 200 to 300. -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
Storyboard.TargetProperty="Width"
From="200" To="300" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<!-- The color of the brush used to paint this button is animated. -->
<Button Height="30" Width="200"
HorizontalAlignment="Left">Another Button
<Button.Background>
<SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
</Button.Background>
<Button.Triggers>
<!-- Animates the color of the brush used to paint
the second button from red to blue . -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="myAnimatedBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:7" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Border>
</Page>
![]() |
---|
على الرغم من أنه يمكنك استهداف الحركات كلا على الكائن FrameworkElement مثل Control أو Panel ، و الكائن Freezable مثل Brush أو Transform،فقط عناصر إطار العمل يكون لديها الخاصية Name.لتعيين اسم لـعنصر قابل للتجميد بحيث يمكن استهدافه بواسطة حركة، قم باستخدام س: اسم السمة ، كما يعرض المثال السابق . |
إذا استخدمت رمز يجب عليك إنشاء NameScope لـلحصول على FrameworkElement وتسجيل أسماء الكائنات التى تريد تحريكها FrameworkElement. لبدء تشغيل الحركات الموجودة في التعليمات البرمجية قم باستخدام اجراء BeginStoryboard مع EventTrigger. بشكل اختياري، يمكنك استخدام معالج أحداث والأسلوب Begin الخاص بـ Storyboard. يوضح المثال التالي كيفية استخدام الأسلوب Begin
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Namespace SDKSample
' Uses a storyboard to animate the properties
' of two buttons.
Public Class StoryboardExample
Inherits Page
Private Dim WithEvents myWidthAnimatedButton As Button
Private Dim WithEvents myColorAnimatedButton As Button
Private Dim myWidthAnimatedButtonStoryboard As Storyboard
Private Dim myColorAnimatedButtonStoryboard As Storyboard
Public Sub New()
' Create a name scope for the page.
NameScope.SetNameScope(Me, New NameScope())
Me.WindowTitle = "Animate Properties using Storyboards"
Dim myStackPanel As New StackPanel()
myStackPanel.MinWidth = 500
myStackPanel.Margin = New Thickness(30)
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left
Dim myTextBlock As New TextBlock()
myTextBlock.Text = "Storyboard Animation Example"
myStackPanel.Children.Add(myTextBlock)
'
' Create and animate the first button.
'
' Create a button.
myWidthAnimatedButton = New Button()
myWidthAnimatedButton.Height = 30
myWidthAnimatedButton.Width = 200
myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left
myWidthAnimatedButton.Content = "A Button"
' Set the Name of the button so that it can be referred
' to in the storyboard that's created later.
' The ID doesn't have to match the variable name;
' it can be any unique identifier.
myWidthAnimatedButton.Name = "myWidthAnimatedButton"
' Register the name with the page to which the button belongs.
Me.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton)
' Create a DoubleAnimation to animate the width of the button.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 200
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(3000))
' Configure the animation to target the button's Width property.
Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name)
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Button.WidthProperty))
' Create a storyboard to contain the animation.
myWidthAnimatedButtonStoryboard = New Storyboard()
myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation)
myStackPanel.Children.Add(myWidthAnimatedButton)
'
' Create and animate the second button.
'
' Create a second button.
myColorAnimatedButton = New Button()
myColorAnimatedButton.Height = 30
myColorAnimatedButton.Width = 200
myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left
myColorAnimatedButton.Content = "Another Button"
' Create a SolidColorBrush to paint the button's background.
Dim myBackgroundBrush As New SolidColorBrush()
myBackgroundBrush.Color = Colors.Blue
' Because a Brush isn't a FrameworkElement, it doesn't
' have a Name property to set. Instead, you just
' register a name for the SolidColorBrush with
' the page where it's used.
Me.RegisterName("myAnimatedBrush", myBackgroundBrush)
' Use the brush to paint the background of the button.
myColorAnimatedButton.Background = myBackgroundBrush
' Create a ColorAnimation to animate the button's background.
Dim myColorAnimation As New ColorAnimation()
myColorAnimation.From = Colors.Red
myColorAnimation.To = Colors.Blue
myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
' Configure the animation to target the brush's Color property.
Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush")
Storyboard.SetTargetProperty(myColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
' Create a storyboard to contain the animation.
myColorAnimatedButtonStoryboard = New Storyboard()
myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation)
myStackPanel.Children.Add(myColorAnimatedButton)
Me.Content = myStackPanel
End Sub
' Start the animation when the button is clicked.
Private Sub myWidthAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myWidthAnimatedButton.Click
myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton)
End Sub
' Start the animation when the button is clicked.
Private Sub myColorAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myColorAnimatedButton.Click
myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton)
End Sub
End Class
End Namespace
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace Microsoft.Samples.Animation.AnimatingWithStoryboards
{
// Uses a storyboard to animate the properties
// of two buttons.
public class StoryboardExample : Page
{
public StoryboardExample()
{
// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());
this.WindowTitle = "Animate Properties using Storyboards";
StackPanel myStackPanel = new StackPanel();
myStackPanel.MinWidth = 500;
myStackPanel.Margin = new Thickness(30);
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "Storyboard Animation Example";
myStackPanel.Children.Add(myTextBlock);
//
// Create and animate the first button.
//
// Create a button.
Button myWidthAnimatedButton = new Button();
myWidthAnimatedButton.Height = 30;
myWidthAnimatedButton.Width = 200;
myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
myWidthAnimatedButton.Content = "A Button";
// Set the Name of the button so that it can be referred
// to in the storyboard that's created later.
// The ID doesn't have to match the variable name;
// it can be any unique identifier.
myWidthAnimatedButton.Name = "myWidthAnimatedButton";
// Register the name with the page to which the button belongs.
this.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton);
// Create a DoubleAnimation to animate the width of the button.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 200;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
// Configure the animation to target the button's Width property.
Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.WidthProperty));
// Create a storyboard to contain the animation.
Storyboard myWidthAnimatedButtonStoryboard = new Storyboard();
myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation);
// Animate the button width when it's clicked.
myWidthAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
{
myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton);
};
myStackPanel.Children.Add(myWidthAnimatedButton);
//
// Create and animate the second button.
//
// Create a second button.
Button myColorAnimatedButton = new Button();
myColorAnimatedButton.Height = 30;
myColorAnimatedButton.Width = 200;
myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
myColorAnimatedButton.Content = "Another Button";
// Create a SolidColorBrush to paint the button's background.
SolidColorBrush myBackgroundBrush = new SolidColorBrush();
myBackgroundBrush.Color = Colors.Blue;
// Because a Brush isn't a FrameworkElement, it doesn't
// have a Name property to set. Instead, you just
// register a name for the SolidColorBrush with
// the page where it's used.
this.RegisterName("myAnimatedBrush", myBackgroundBrush);
// Use the brush to paint the background of the button.
myColorAnimatedButton.Background = myBackgroundBrush;
// Create a ColorAnimation to animate the button's background.
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Red;
myColorAnimation.To = Colors.Blue;
myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));
// Configure the animation to target the brush's Color property.
Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush");
Storyboard.SetTargetProperty(myColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
// Create a storyboard to contain the animation.
Storyboard myColorAnimatedButtonStoryboard = new Storyboard();
myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation);
// Animate the button background color when it's clicked.
myColorAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
{
myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton);
};
myStackPanel.Children.Add(myColorAnimatedButton);
this.Content = myStackPanel;
}
}
}
للحصول على معلومات حول الحركة ولوح العمل ، راجع نظرة عامة حول الحركة.
إذا كنت تستخدم التعليمات البرمجية، فانت غير مقتصر على استخدام كائنات Storyboard لتحريك الخصائص. و لمزيد من المعلومات والأمثلة، راجع كيفية القيام بما يلي: تحريك خاصية بدون استخدام لوحة العمل و كيفية القيام بما يلي: تحريك خاصية باستخدام AnimationClock .