方法: ストーリーボード アニメーション間で HandoffBehavior を指定する
この例は、ストーリーボード アニメーション間でハンドオフ動作を指定する方法を示します。 BeginStoryboard の HandoffBehavior プロパティは、既にプロパティに適用されている既存のアニメーションと新しいアニメーションが相互作用する方法を指定します。
例
次の例では、マウス カーソルを合わせると拡大し、カーソルを離すと縮小する 2 つのボタンを作成しています。 ボタンにマウスを合わせてからカーソルをすぐに離すと、最初のアニメーションが終了する前に 2 番目のアニメーションが適用されます。 このように 2 つのアニメーションが重なり、Compose と SnapshotAndReplace の HandoffBehavior の値の違いを確認できます。 Compose の値を重複するアニメーションと組み合わされると、アニメーション間でのスムーズな画面切り替え効果が生まれます。一方、SnapshotAndReplace の値を指定すると、新しいアニメーションが、前に重なっていたアニメーションを直ちに置き換えます。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<!-- This Style specifies mouseover and mouseout behaviors. The button gets larger when
the cursor moves over it and smaller when the cursor moves away. Note that the same Properties
(ScaleX and ScaleY) are being targeted by both animations. The BeginStoryboard for each animation
uses a HandoffBehavior of "Compose" which causes the old animation to interpolate more gradually into
the new one. -->
<Style x:Key="ButtonWithCompose" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<!-- For this button style, BeginStoryboard uses the default HandoffBehavior of "SnapShotAndReplace" -->
<Style x:Key="ButtonWithSnapShotAndReplace" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Canvas>
<Button Style="{StaticResource ButtonWithSnapShotAndReplace}" Canvas.Top="200" Canvas.Left="200" Width="100" Height="100">
SnapShotAndReplace
</Button>
<Button Style="{StaticResource ButtonWithCompose}" Canvas.Top="200" Canvas.Left="400" Width="100" Height="100">
Compose
</Button>
</Canvas>
</Page>
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示