Esporta (0) Stampa
Espandi tutto
Espandi Riduci a icona

Procedura: animare una proprietà utilizzando uno storyboard

Aggiornamento: novembre 2007

In questo esempio viene illustrato come utilizzare un oggetto Storyboard per animare proprietà. Per animare una proprietà utilizzando un oggetto Storyboard, creare un'animazione per ogni proprietà da animare e creare inoltre un oggetto Storyboard per contenere le animazioni.

Il tipo di proprietà determina il tipo di animazione da utilizzare. Ad esempio, per animare una proprietà che accetta valori Double, utilizzare DoubleAnimation. Utilizzare le proprietà connesseTargetName e TargetProperty per specificare l'oggetto di destinazione e la proprietà cui viene applicata l'animazione.

Per avviare uno storyboard in Extensible Application Markup Language (XAML), utilizzare un'azione BeginStoryboard e un oggetto EventTrigger. EventTrigger inizia l'azione BeginStoryboard quando si verifica l'evento specificato dalla relativa proprietà RoutedEvent. L'azione BeginStoryboard avvia Storyboard.

Nell'esempio seguente vengono utilizzati gli oggetti Storyboard per animare due controlli Button. Per modificare le dimensioni del primo pulsante, viene animata la relativa proprietà Width. Per modificare il colore del secondo pulsante, viene utilizzata la proprietà Color di SolidColorBrush per impostare la proprietà Background del pulsante animato.

<!-- StoryboardExample.xaml
     Uses storyboards to animate properties. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>


Nota:

Anche se le animazioni possono essere destinate a un oggetto FrameworkElement, ad esempio Control o Panel, e a un oggetto Freezable, ad esempio Brush o Transform, solo gli elementi del framework includono una proprietà Name. Per assegnare un nome a un oggetto bloccabile in modo che possa diventare la destinazione di un'animazione, utilizzare Attributo x:Name, come illustrato nell'esempio precedente.

Se si utilizza codice, è necessario creare un oggetto NameScope per un oggetto FrameworkElement e registrare i nomi degli oggetti da animare con tale oggetto FrameworkElement. Per avviare le animazioni nel codice, utilizzare un'azione BeginStoryboard con EventTrigger. Facoltativamente, è possibile utilizzare un gestore eventi e il metodo Begin di Storyboard. Nell'esempio seguente viene illustrato come utilizzare il metodo Begin.

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;

        }
    }
}


Per l'esempio completo, vedere Esempio di animazione delle proprietà. Per ulteriori informazioni sull'animazione e sugli storyboard, vedere Cenni preliminari sull'animazione.

Se si utilizza codice, non si è limitati all'utilizzo di oggetti Storyboard per animare le proprietà. Per ulteriori informazioni ed esempi, vedere Procedura: animare una proprietà senza utilizzare uno storyboard e Procedura: animare una proprietà utilizzando un oggetto AnimationClock.

Aggiunte alla community

AGGIUNGI
Microsoft sta conducendo un sondaggio in linea per comprendere l'opinione degli utenti in merito al sito Web di MSDN. Se si sceglie di partecipare, quando si lascia il sito Web di MSDN verrà visualizzato il sondaggio in linea.

Si desidera partecipare?
Mostra:
© 2014 Microsoft