niwalker的专栏

<DoubleAnimation From="1.0" To="0.0"

下面的代码演示了这些操作(通过对例子代码的修改):

<DockPanel xmlns=""

xmlns:x=""

>

<DockPanel.Resources>

<Style TargetType="{x:Type Menu}" >

<Setter Property="FontSize" Value="12" />

<Setter Property="FontFamily" Value="Verdana" />

<Setter Property="Background" Value="Yellow" />

</Style>

<Style x:Key="Header" TargetType="{x:Type StackPanel}">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

<LinearGradientBrush.GradientStops>

<GradientStop Offset="0" Color="#0000FF" />

<GradientStop Offset="0.5" Color="#FFFFFF" />

<GradientStop Offset="1" Color="#0000FF" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="{x:Type Button}">

<Setter Property="Background" Value="Black" />

<Setter Property="Margin" Value="10,10,10,0"/>

<Setter Property="DockPanel.Dock" Value="Top"/>

<Setter Property="Height" Value="25"/>

<Setter Property="Width" Value="100"/>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="HorizontalAlignment" Value="Left" />

<Setter Property="FontFamily" Value="Verdana" />

<Setter Property="Background">

<Setter.Value>

<RadialGradientBrush>

<RadialGradientBrush.GradientStops>

<GradientStop Offset="0" Color="#FFFFFF" />

<GradientStop Offset="2" Color="#0000FF" />

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Setter.Value>

</Setter>

</Style>

<TransformGroup x:Key="MyTransformGroupResource">

<ScaleTransform />

<RotateTransform CenterX="50" CenterY="50"/>

</TransformGroup>

</DockPanel.Resources>

<StackPanel Name="Header" DockPanel.Dock="Top" Height="100" Style="{StaticResource Header}"/>

<Menu DockPanel.Dock="Top">

<MenuItem Header="File"/>

<MenuItem Header="Eidt" />

<MenuItem Header="View" />

<MenuItem Header="Tools"/>

<MenuItem Header="Help"/>

</Menu>

<StackPanel DockPanel.Dock="Bottom" Height="40" Background="DarkBlue" />

<StackPanel DockPanel.Dock="Left" Width="120" Background="LightGray">

<Button Name="BeginButton">

Begin</Button>

<Button Name="PauseButton">

Pause</Button>

<Button Name="ResumeButton">

Resume</Button>

<Button Name="SkipButton">

Skip to fill</Button>

<Button Name="StopButton">

Stop</Button>

<StackPanel.Triggers>

<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">

<BeginStoryboard Name="MyStoryBoard">

<Storyboard >

<DoubleAnimation Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="(Rectangle.Opacity)"

From="1.0" To="0.0" Duration="0:0:5" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

<EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">

<PauseStoryboard BeginStoryboardName="MyStoryBoard" />

</EventTrigger>

<EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">

<ResumeStoryboard BeginStoryboardName="MyStoryBoard" />

</EventTrigger>

<EventTrigger RoutedEvent="Button.Click" SourceName="SkipButton">

<SkipStoryboardToFill BeginStoryboardName="MyStoryBoard" />

</EventTrigger>

<EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">

<StopStoryboard BeginStoryboardName="MyStoryBoard" />

</EventTrigger>

</StackPanel.Triggers>

</StackPanel>

<DockPanel Margin="10">

<Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Blue"

RenderTransform="{StaticResource MyTransformGroupResource}"

>

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseEnter">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="RenderTransform.Children[1].Angle"

From="0" To="360" Duration="0:0:1" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

<StackPanel Margin="20">

<Rectangle Name="nonAcceleratedOrDeceleratedRectangle" Fill="#9933FF"

Width="10" Height="20" HorizontalAlignment="Left" />

<Rectangle Name="acceleratedRectangle" Fill="#3333FF"

Width="10" Height="20" HorizontalAlignment="Left" />

<Rectangle Name="deceleratedRectangle" Fill="#33FF66"

Width="10" Height="20" HorizontalAlignment="Left" />

<Rectangle Name="acceleratedAndDeceleratedRectangle" Fill="#CCFF33"

Width="10" Height="20" HorizontalAlignment="Left" />

<Ellipse Width="30" Height="30" Fill="Red" >

<Ellipse.RenderTransform>

<TranslateTransform x:Name="MyAnimatedTransform" X="10" Y="100" />

</Ellipse.RenderTransform>

</Ellipse>

<!– Create a button to start the animations. –>

<Button Name="myRestartButton" Margin="0,30,0,0" HorizontalAlignment="Left">Restart Animations

<Button.Triggers>

<EventTrigger RoutedEvent="Button.Click">

<BeginStoryboard>

<Storyboard>

<!– Creates an animation without acceleration or deceleration for comparison. –>

<DoubleAnimation

Storyboard.TargetName="nonAcceleratedOrDeceleratedRectangle"

Storyboard.TargetProperty="(Rectangle.Width)"

Duration="0:0:10" From="20" To="400" />

<!– Creates an animation that accelerates through 40% of its duration. –>

<DoubleAnimation

Storyboard.TargetName="acceleratedRectangle"

Storyboard.TargetProperty="(Rectangle.Width)"

AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />

<!– Creates an animation that decelerates through 60% of its duration. –>

<DoubleAnimation

Storyboard.TargetName="deceleratedRectangle"

Storyboard.TargetProperty="(Rectangle.Width)"

DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />

<!– Creates an animation that accelerates through 40% of its duration and

decelerates through the 60% of its duration. –>

<DoubleAnimation

Storyboard.TargetName="acceleratedAndDeceleratedRectangle"

Storyboard.TargetProperty="(Rectangle.Width)"

AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />

</Storyboard>

WPF体验(一)WPF体验(二)WPF体验(三)WPF体验(四)

,你要以乐观的态度看待这个世界,你会发现世界是如此得美好

niwalker的专栏

相关文章:

你感兴趣的文章:

标签云: