方法 : タイムラインの開始時間を指定する
更新 : 2007 年 11 月
タイムラインの BeginTime プロパティは、タイムラインのアクティブな期間の開始時間を指定します。タイムラインに親タイムラインがある場合の BeginTime プロパティは、親の開始後にそのタイムラインが開始するまでの時間を指定します。タイムラインがルート タイムライン (たとえば Storyboard) の場合の BeginTime プロパティは、パイプラインがトリガされてから再生を開始するまでの時間を指定します。
BeginTime の設定が異なるさまざまなタイムラインの例を次に示します。
使用例
<!-- This example shows how the BeginTime property determines when a timeline starts.
Several rectangles are animated by DoubleAnimations with identical
durations and target values, but with different
BeginTime settings. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="BeginTime Example">
<StackPanel Margin="20">
<!-- The rectangles to animate. -->
<Rectangle Name="DefaultBeginTimeRectangle"
Width="20" Height="20" Fill="Blue" />
<Rectangle Name="DelayedBeginTimeRectangle"
Width="20" Height="20" Fill="Blue" />
<Rectangle Name="DelayedAnimationWithDelayedParentRectangle"
Width="20" Height="20" Fill="Blue" />
<Rectangle Name="NegativeBeginTimeExampleRectangle"
Width="20" Height="20" Fill="Blue" />
<!-- Create a button to start the animations. -->
<Button Margin="20" Content="Start Animations">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- This animation starts as soon as the button is clicked, because it
has a BeginTime of 0. -->
<DoubleAnimation
Storyboard.TargetName="DefaultBeginTimeRectangle"
Storyboard.TargetProperty="Width"
BeginTime="0:0:0" From="100" To="600" Duration="0:0:5" />
<!-- This animation starts 5 seconds after the button is clicked. -->
<DoubleAnimation
Storyboard.TargetName="DelayedBeginTimeRectangle"
Storyboard.TargetProperty="Width"
BeginTime="0:0:5" From="100" To="600" Duration="0:0:5" />
<ParallelTimeline BeginTime="0:0:5">
<!-- This animation starts 10 seconds after the button is clicked,
because its parent has a BeginTime of 5 seconds and it has
a BeginTime of 5 seconds: 5 + 5 = 10. -->
<DoubleAnimation
Storyboard.TargetName="DelayedAnimationWithDelayedParentRectangle"
Storyboard.TargetProperty="Width"
BeginTime="0:0:5" From="100" To="600" Duration="0:0:5" />
</ParallelTimeline>
<!-- This animation starts as soon as the button is clicked, but
it animates from 350 to 600 instead of from 100 to 600
because of its negative BeginTime. The negative BeginTime
setting advances the animation, so that it behaves as though
it had already been playing for 2.5 seconds as soon as it is
started. -->
<DoubleAnimation
Storyboard.TargetName="NegativeBeginTimeExampleRectangle"
Storyboard.TargetProperty="Width"
BeginTime="-0:0:2.5" From="100" To="600" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<!-- This example demonstrates how the BeginTime property works on a root timeline. -->
<Rectangle Name="RootTimelineWithDelayedBeginTimeRectangle"
Width="20" Height="20" Fill="Blue" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard BeginTime="0:0:5">
<!-- This animation starts 5 seconds after the left mouse button
is pressed, because its parent storyboard (a root timeline)
has a BeginTime of 5 seconds. -->
<DoubleAnimation
Storyboard.TargetName="RootTimelineWithDelayedBeginTimeRectangle"
Storyboard.TargetProperty="Width"
BeginTime="0:0:0" From="100" To="600" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>