Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Det här exemplet visar hur du animerar Color och Offset av GradientStop objekt.
Exempel
I följande exempel animeras tre toningsstopp inom en LinearGradientBrush. I exemplet används tre animeringar, som var och en animerar ett annat gradientstopp.
Den första animeringen, en DoubleAnimation, animerar det första gradientstoppets Offset från 0,0 till 1,0 och sedan tillbaka till 0,0. Som ett resultat skiftar den första färgen i toningen från vänster sida till höger sida av rektangeln och sedan tillbaka till vänster sida.
Den andra animeringen, en ColorAnimation, animerar det andra toningsstoppets Color från Purple till Yellow och sedan tillbaka till Purple. Därför ändras mellanfärgen i toningen från lila till gul och tillbaka till lila.
Den tredje animeringen, en annan ColorAnimation, animerar opaciteten för den tredje gradient stoppunkten Color till -1 och sedan tillbaka. Därför tonar den tredje färgen i toningen bort och blir sedan ogenomskinlig igen.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace BrushesIntroduction
{
public class GradientStopAnimationExample : Page
{
public GradientStopAnimationExample()
{
Title = "GradientStop Animation Example";
Background = Brushes.White;
// Create a NameScope for the page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create a rectangle. This rectangle will
// be painted with a gradient.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 200;
aRectangle.Height = 100;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 1;
// Create a LinearGradientBrush to paint
// the rectangle's fill.
LinearGradientBrush gradientBrush = new LinearGradientBrush();
// Create gradient stops for the brush.
GradientStop stop1 = new GradientStop(Colors.MediumBlue, 0.0);
GradientStop stop2 = new GradientStop(Colors.Purple, 0.5);
GradientStop stop3 = new GradientStop(Colors.Red, 1.0);
// Register a name for each gradient stop with the
// page so that they can be animated by a storyboard.
this.RegisterName("GradientStop1", stop1);
this.RegisterName("GradientStop2", stop2);
this.RegisterName("GradientStop3", stop3);
// Add the stops to the brush.
gradientBrush.GradientStops.Add(stop1);
gradientBrush.GradientStops.Add(stop2);
gradientBrush.GradientStops.Add(stop3);
// Apply the brush to the rectangle.
aRectangle.Fill = gradientBrush;
//
// Animate the first gradient stop's offset from
// 0.0 to 1.0 and then back to 0.0.
//
DoubleAnimation offsetAnimation = new DoubleAnimation();
offsetAnimation.From = 0.0;
offsetAnimation.To = 1.0;
offsetAnimation.Duration = TimeSpan.FromSeconds(1.5);
offsetAnimation.AutoReverse = true;
Storyboard.SetTargetName(offsetAnimation, "GradientStop1");
Storyboard.SetTargetProperty(offsetAnimation,
new PropertyPath(GradientStop.OffsetProperty));
//
// Animate the second gradient stop's color from
// Purple to Yellow and then back to Purple.
//
ColorAnimation gradientStopColorAnimation = new ColorAnimation();
gradientStopColorAnimation.From = Colors.Purple;
gradientStopColorAnimation.To = Colors.Yellow;
gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5);
gradientStopColorAnimation.AutoReverse = true;
Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2");
Storyboard.SetTargetProperty(gradientStopColorAnimation,
new PropertyPath(GradientStop.ColorProperty));
// Set the animation to begin after the first animation
// ends.
gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3);
//
// Animate the third gradient stop's color so
// that it becomes transparent.
//
ColorAnimation opacityAnimation = new ColorAnimation();
// Reduces the target color's alpha value by 1,
// making the color transparent.
opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F);
opacityAnimation.Duration = TimeSpan.FromSeconds(1.5);
opacityAnimation.AutoReverse = true;
Storyboard.SetTargetName(opacityAnimation, "GradientStop3");
Storyboard.SetTargetProperty(opacityAnimation,
new PropertyPath(GradientStop.ColorProperty));
// Set the animation to begin after the first two
// animations have ended.
opacityAnimation.BeginTime = TimeSpan.FromSeconds(6);
// Create a Storyboard to apply the animations.
Storyboard gradientStopAnimationStoryboard = new Storyboard();
gradientStopAnimationStoryboard.Children.Add(offsetAnimation);
gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation);
gradientStopAnimationStoryboard.Children.Add(opacityAnimation);
// Begin the storyboard when the left mouse button is
// pressed over the rectangle.
aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
gradientStopAnimationStoryboard.Begin(this);
};
StackPanel mainPanel = new StackPanel();
mainPanel.Margin = new Thickness(10);
mainPanel.Children.Add(aRectangle);
Content = mainPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Namespace BrushesIntroduction
Public Class GradientStopAnimationExample
Inherits Page
Public Sub New()
Title = "GradientStop Animation Example"
Background = Brushes.White
' Create a NameScope for the page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create a rectangle. This rectangle will
' be painted with a gradient.
Dim aRectangle As New Rectangle()
aRectangle.Width = 200
aRectangle.Height = 100
aRectangle.Stroke = Brushes.Black
aRectangle.StrokeThickness = 1
' Create a LinearGradientBrush to paint
' the rectangle's fill.
Dim gradientBrush As New LinearGradientBrush()
' Create gradient stops for the brush.
Dim stop1 As New GradientStop(Colors.MediumBlue, 0.0)
Dim stop2 As New GradientStop(Colors.Purple, 0.5)
Dim stop3 As New GradientStop(Colors.Red, 1.0)
' Register a name for each gradient stop with the
' page so that they can be animated by a storyboard.
Me.RegisterName("GradientStop1", stop1)
Me.RegisterName("GradientStop2", stop2)
Me.RegisterName("GradientStop3", stop3)
' Add the stops to the brush.
gradientBrush.GradientStops.Add(stop1)
gradientBrush.GradientStops.Add(stop2)
gradientBrush.GradientStops.Add(stop3)
' Apply the brush to the rectangle.
aRectangle.Fill = gradientBrush
'
' Animate the first gradient stop's offset from
' 0.0 to 1.0 and then back to 0.0.
'
Dim offsetAnimation As New DoubleAnimation()
offsetAnimation.From = 0.0
offsetAnimation.To = 1.0
offsetAnimation.Duration = TimeSpan.FromSeconds(1.5)
offsetAnimation.AutoReverse = True
Storyboard.SetTargetName(offsetAnimation, "GradientStop1")
Storyboard.SetTargetProperty(offsetAnimation, New PropertyPath(GradientStop.OffsetProperty))
'
' Animate the second gradient stop's color from
' Purple to Yellow and then back to Purple.
'
Dim gradientStopColorAnimation As New ColorAnimation()
gradientStopColorAnimation.From = Colors.Purple
gradientStopColorAnimation.To = Colors.Yellow
gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5)
gradientStopColorAnimation.AutoReverse = True
Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2")
Storyboard.SetTargetProperty(gradientStopColorAnimation, New PropertyPath(GradientStop.ColorProperty))
' Set the animation to begin after the first animation
' ends.
gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3)
'
' Animate the third gradient stop's color so
' that it becomes transparent.
'
Dim opacityAnimation As New ColorAnimation()
' Reduces the target color's alpha value by 1,
' making the color transparent.
opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F)
opacityAnimation.Duration = TimeSpan.FromSeconds(1.5)
opacityAnimation.AutoReverse = True
Storyboard.SetTargetName(opacityAnimation, "GradientStop3")
Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(GradientStop.ColorProperty))
' Set the animation to begin after the first two
' animations have ended.
opacityAnimation.BeginTime = TimeSpan.FromSeconds(6)
' Create a Storyboard to apply the animations.
Dim gradientStopAnimationStoryboard As New Storyboard()
gradientStopAnimationStoryboard.Children.Add(offsetAnimation)
gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation)
gradientStopAnimationStoryboard.Children.Add(opacityAnimation)
' Begin the storyboard when the left mouse button is
' pressed over the rectangle.
AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) gradientStopAnimationStoryboard.Begin(Me)
Dim mainPanel As New StackPanel()
mainPanel.Margin = New Thickness(10)
mainPanel.Children.Add(aRectangle)
Content = mainPanel
End Sub
End Class
End Namespace
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GradientStop Animation Example"
Background="White">
<StackPanel Margin="10">
<Rectangle
Width="200"
Height="100"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop x:Name="GradientStop1" Color="MediumBlue" Offset="0.0" />
<GradientStop x:Name="GradientStop2" Color="Purple" Offset="0.5" />
<GradientStop x:Name="GradientStop3" Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0" Duration="0:0:1.5"
AutoReverse="True" />
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="Purple" To="Yellow"
Duration="0:0:1.5"
AutoReverse="True"
BeginTime="0:0:3" />
<ColorAnimation
Storyboard.TargetName="GradientStop3"
Storyboard.TargetProperty="Color"
Duration="0:0:1.5"
AutoReverse="True"
BeginTime="0:0:6">
<ColorAnimation.By>
<Color ScA="-1" ScR="0" ScB="0" ScG="0" />
</ColorAnimation.By>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
Även om det här exemplet använder en LinearGradientBrushär processen densamma för att animera GradientStop objekt i en RadialGradientBrush.
För ytterligare exempel, se Borste Exempel.
Se även
Samarbeta med oss på GitHub
Källan för det här innehållet finns på GitHub, där du även kan skapa och granska ärenden och pull-begäranden. Se vår deltagarguide för mer information.
.NET Desktop feedback