방법: BorderThickness 값에 애니메이션 효과 주기
업데이트: 2007년 11월
이 예제에서는 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;
}
}
}
<!-- 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>
전체 샘플을 보려면 애니메이션 예제 갤러리를 참조하십시오.
참고 항목
작업
방법: 키 프레임을 사용하여 테두리 두께에 애니메이션 효과 주기