方法: ControlTemplate でアニメーション化する
この例では、Storyboard、EventTrigger、および Trigger オブジェクトを使用して、ControlTemplate内でアニメーション化する方法を示します。
例
<!-- ControlStoryboardExample.xaml
Uses storyboards to animate properties with a ControlTemplate. -->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Animate Properties with Storyboards">
<Page.Resources>
<ControlTemplate x:Key="MyControlTemplate"
TargetType="{x:Type ContentControl}">
<Border
Margin="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border Name="innerBorder" Padding="10">
<Border.Background>
<SolidColorBrush x:Name="innerBorderBackgroundBrush"
Color="White" />
</Border.Background>
<Grid Name="contentPanel">
<Grid.Background>
<SolidColorBrush x:Name="contentPanelBrush" Color="White" />
</Grid.Background>
<ContentPresenter
Margin="10"
Content="{TemplateBinding Content}"
TextBlock.Foreground="{TemplateBinding Foreground}" />
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<!-- Event Trigger Example -->
<EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="innerBorderBackgroundBrush"
Storyboard.TargetProperty="Color"
From="White" To="#CCCCFF"
Duration="0:0:3" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- Property Trigger Example -->
<Trigger Property="IsMouseOver" Value="True" SourceName="contentPanel">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="contentPanelBrush"
Storyboard.TargetProperty="Color"
To="Purple" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="contentPanelBrush"
Storyboard.TargetProperty="Color"
To="White" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Page.Resources>
<Border Background="White">
<StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">
<ContentControl Template="{StaticResource MyControlTemplate}"
Content="Hello, World" />
</StackPanel>
</Border>
</Page>
ストーリーボードを使用したプロパティのアニメーション化の詳細については、「ストーリーボードの概要」を参照してください。
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback