HOW TO：建立 BorderThickness 值的動畫
本範例說明如何使用 ThicknessAnimation 類別，將框線粗細的變化顯示為動畫。
範例
下列範例會使用 ThicknessAnimation，將框線的粗細顯示為動畫。 此範例使用 Border 的 BorderThickness 屬性。
Imports Microsoft.VisualBasic
Imports System
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
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;
}
}
}
<!-- This example shows how to use the ThicknessAnimation to create
an animation on the BorderThickness property of a Border. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
Margin="0,60,0,20" Padding="20" >
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- BorderThickness animates from left=1, right=1, top=1, and bottom=1 to
left=28, right=28, top=14, and bottom=14 over one second. -->
<ThicknessAnimation
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:1.5" FillBehavior="HoldEnd" From="1,1,1,1" To="28,14,28,14" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ThicknessAnimation to create
an animation on the BorderThickness property of a Border.
</TextBlock>
</Border>
</StackPanel>
</Page>
如需完整範例，請參閱動畫範例圖庫 (英文)。