WPF備忘錄四(事件動畫)

暖楓無敵發表於2012-01-14
    <Grid>
        <Rectangle Height="65" HorizontalAlignment="Left"  Fill="Blue" Margin="133,67,0,0" Name="rect" Stroke="Black" VerticalAlignment="Top" Width="73">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0" CenterX="20" CenterY="20" x:Name="rt"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button Content="開始" Height="23" HorizontalAlignment="Left" Margin="32,189,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" />
        <Button Content="暫停" Height="23" HorizontalAlignment="Left" Margin="113,189,0,0" Name="btnPause" VerticalAlignment="Top" Width="75" />
        <Button Content="繼續" Height="23" HorizontalAlignment="Left" Margin="194,189,0,0" Name="btnResume" VerticalAlignment="Top" Width="75" />
        <Button Content="停止" Height="23" HorizontalAlignment="Right" Margin="0,189,153,0" Name="btnStop" VerticalAlignment="Top" Width="75" />
        <Grid.Triggers>
            <!--開始-->
            <EventTrigger SourceName="btnStart" RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard x:Name="bs">
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="00:00:10"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <!--暫停-->
            <EventTrigger SourceName="btnPause" RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <PauseStoryboard BeginStoryboardName="bs"></PauseStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <!--繼續-->
            <EventTrigger SourceName="btnResume" RoutedEvent="Button.Click">
                <ResumeStoryboard BeginStoryboardName="bs"></ResumeStoryboard>
            </EventTrigger>
            <!--停止-->
            <EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">
                <StopStoryboard BeginStoryboardName="bs"></StopStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>

利用程式碼方式處理動畫事件:

<Grid>
        <Rectangle Height="65" HorizontalAlignment="Left"  Fill="Blue" Margin="133,67,0,0" Name="rect" Stroke="Black" VerticalAlignment="Top" Width="73">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0" CenterX="20" CenterY="20" x:Name="rt"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button Content="開始" Height="23" HorizontalAlignment="Left" Margin="32,189,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" Click="btnStart_Click" />
        <Button Content="暫停" Height="23" HorizontalAlignment="Left" Margin="113,189,0,0" Name="btnPause" VerticalAlignment="Top" Width="75" />
        <Button Content="繼續" Height="23" HorizontalAlignment="Left" Margin="194,189,0,0" Name="btnResume" VerticalAlignment="Top" Width="75" />
        <Button Content="停止" Height="23" HorizontalAlignment="Right" Margin="0,189,153,0" Name="btnStop" VerticalAlignment="Top" Width="75" />
    </Grid>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation(0,100,new Duration(TimeSpan.FromSeconds(5)));
            da.RepeatBehavior = RepeatBehavior.Forever; //永久迴圈
            da.AutoReverse = true; //來回往復
            //第一種方式
            //rect.BeginAnimation(Rectangle.WidthProperty, da);
            //第二種方式,可以新增多個動畫
            Storyboard sb = new Storyboard();
            Storyboard.SetTargetProperty(da,new PropertyPath(Rectangle.WidthProperty));
            sb.Children.Add(da);
            sb.Begin(rect);
        }
    }


相關文章