如何:对 BorderThickness 值进行动画处理
此示例显示如何使用 ThicknessAnimation 类对边框的粗细更改进行动画处理。
示例
以下示例使用 ThicknessAnimation 对边框的粗细进行动画处理。 该示例使用 Border 的 BorderThickness 属性。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
public class ThicknessAnimationExample : Page
{
public ThicknessAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create a Border which will be the target of the animation.
Border myBorder = new Border();
myBorder.Background = Brushes.Gray;
myBorder.BorderBrush = Brushes.Black;
myBorder.BorderThickness = new Thickness(1);
myBorder.Margin = new Thickness(0, 60, 0, 20);
myBorder.Padding = new Thickness(20);
// Assign the border a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"myAnimatedBorder", myBorder);
ThicknessAnimation myThicknessAnimation = new ThicknessAnimation();
myThicknessAnimation.Duration = TimeSpan.FromSeconds(1.5);
myThicknessAnimation.FillBehavior = FillBehavior.HoldEnd;
// Set the From and To properties of the animation.
// BorderThickness animates from left=1, right=1, top=1, and bottom=1
// to left=28, right=28, top=14, and bottom=14 over one and a half seconds.
myThicknessAnimation.From = new Thickness(1, 1, 1, 1);
myThicknessAnimation.To = new Thickness(28, 14, 28, 14);
// Set the animation to target the Size property
// of the object named "myArcSegment."
Storyboard.SetTargetName(myThicknessAnimation, "myAnimatedBorder");
Storyboard.SetTargetProperty(
myThicknessAnimation, new PropertyPath(Border.BorderThicknessProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myThicknessAnimation);
// Start the storyboard when the Path loads.
myBorder.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
StackPanel myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
myStackPanel.Children.Add(myBorder);
Content = myStackPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media
Namespace SDKSamples
Public Class ThicknessAnimationExample
Inherits Page
Public Sub New()
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create a Border which will be the target of the animation.
Dim myBorder As New Border()
With myBorder
.Background = Brushes.Gray
.BorderBrush = Brushes.Black
.BorderThickness = New Thickness(1)
.Margin = New Thickness(0, 60, 0, 20)
.Padding = New Thickness(20)
End With
' Assign the border a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("myAnimatedBorder", myBorder)
Dim myThicknessAnimation As New ThicknessAnimation()
With myThicknessAnimation
.Duration = TimeSpan.FromSeconds(1.5)
.FillBehavior = FillBehavior.HoldEnd
' Set the From and To properties of the animation.
' BorderThickness animates from left=1, right=1, top=1, and bottom=1
' to left=28, right=28, top=14, and bottom=14 over one and a half seconds.
.From = New Thickness(1, 1, 1, 1)
.To = New Thickness(28, 14, 28, 14)
End With
' Set the animation to target the Size property
' of the object named "myArcSegment."
Storyboard.SetTargetName(myThicknessAnimation, "myAnimatedBorder")
Storyboard.SetTargetProperty(myThicknessAnimation, New PropertyPath(Border.BorderThicknessProperty))
' Create a storyboard to apply the animation.
Dim ellipseStoryboard As New Storyboard()
ellipseStoryboard.Children.Add(myThicknessAnimation)
' Start the storyboard when the Path loads.
AddHandler myBorder.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)
Dim myStackPanel As New StackPanel()
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center
myStackPanel.Children.Add(myBorder)
Content = myStackPanel
End Sub
End Class
End Namespace
有关完整示例,请参阅动画示例库。