Partager via


Comment : animer une valeur BorderThickness

Cet exemple montre comment animer les modifications apportées à l'épaisseur d'une bordure en utilisant la classe ThicknessAnimation.

Exemple

L'exemple suivant anime l'épaisseur d'une bordure en utilisant ThicknessAnimation. L'exemple utilise la propriété BorderThickness de Border.


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>

Pour obtenir l'exemple complet, consultez Galerie d'exemples d'animation.

Voir aussi

Tâches

Comment : animer l'épaisseur d'une bordure à l'aide d'images clés

Référence

ThicknessAnimation

BorderThickness

Border

Concepts

Vue d'ensemble de l'animation

Autres ressources

Animation et minutage

Rubriques "Comment" relatives à l'animation et au minutage