DoubleAnimation遇到麻烦

时间:2015-04-07 20:50:23

标签: wpf xaml doubleanimation

当我尝试设置这些切换按钮的动画时出现问题,因为当您按下随机按钮时,不会停止动画,这意味着我不会关闭打开的面板但是如果您移动按钮的位置更多的是它。我想要的效果是,当您按下第一个按钮面板并按下第二个按钮时,按下第二个按钮将关闭第一个,第二个按钮打开,依此类推。它现在工作正常,问题是当你开始随机按下,控制没有动画完成执行,这意味着它不会关闭打开的面板,但如果你移动另一个切换按钮的位置和重叠。看看代码,我可以看到无法执行动画,不明白不抛出任何错误的原因,根本不能正常工作。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Panel.ZIndex="0">
    <Border Canvas.Top="170" Height="71" CornerRadius="10" Name="border1" VerticalAlignment="Top" Panel.ZIndex="0"
          BorderBrush="#FFFF7800" BorderThickness="2" Background="#FFFF7800" Canvas.Left="25" Width="649">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect GlowColor="#FFFF7800" GlowSize ="10" Noise="0.7" Opacity="0.8" />
            </Border.BitmapEffect>
            <Border.Triggers>
                <EventTrigger SourceName="boton_activar" RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard Name="mostrar_panel">

                            <DoubleAnimation  Storyboard.TargetName="border2" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border3" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border4" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border5" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />



                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetProperty="(Canvas.Top)"  To="170" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border2" Storyboard.TargetProperty="(Canvas.Top)"  To="250" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="330" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.2"  />

                            <DoubleAnimation BeginTime="0:0:0.4" Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="180" />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border2" Storyboard.TargetProperty="(Canvas.Top)"  To="360" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="440" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="520" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="600" Duration="0:0:0.2"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger SourceName="boton_activar" RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard Name="ocultar_panel">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />

                            <DoubleAnimation Storyboard.TargetName="border1" Storyboard.TargetProperty="(Canvas.Top)"  To="170" Duration="0:0:0.2"  />
                            <DoubleAnimation Storyboard.TargetName="border2" Storyboard.TargetProperty="(Canvas.Top)"  To="250" Duration="0:0:0.2"  />
                            <DoubleAnimation Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="330" Duration="0:0:0.2"  />
                            <DoubleAnimation Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.2"  />
                            <DoubleAnimation Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.2"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Grid Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="10*"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                </Grid.RowDefinitions>
                <Canvas>
                    <TextBlock Text="¿Pregunta 1?" FontSize="20" Foreground="#FFFFFF" Canvas.Left="91" Height="39" Width="537" Canvas.Top="15"/>
                </Canvas>



                <ToggleButton  VerticalAlignment="Top"  HorizontalAlignment="Left" Name="boton_activar" Opacity="1" Background="#FFFF7800" BorderBrush="#FFFF7800" Height="61" Width="91" Grid.RowSpan="2" BorderThickness="0">
                    <Canvas>
                        <Ellipse Fill="White" Height="50" Width="50" HorizontalAlignment="Left" Canvas.Left="-31" Canvas.Top="-25" >

                        </Ellipse>

                        <TextBlock Text="1" Foreground="#132459" FontSize="35" Canvas.Left="-15" Canvas.Top="-26"></TextBlock>
                    </Canvas>


                </ToggleButton>

                <StackPanel Grid.Row="1">
                    <Canvas>
                        <TextBlock Text="Respuesta 1" Canvas.Left="94" Canvas.Top="72" Foreground="White" FontSize="20" Height="40" Width="223">
                            <TextBlock.BitmapEffect>
                                <OuterGlowBitmapEffect GlowColor="#FFFFFF" GlowSize ="10" Noise="0.2" Opacity="0.4" />
                            </TextBlock.BitmapEffect>
                        </TextBlock>
                    </Canvas>


                </StackPanel>
            </Grid>
        </Border>
    </Canvas>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Panel.ZIndex="0">
        <Border Canvas.Top="250" Height="71" CornerRadius="10" Name="border2" VerticalAlignment="Top" 
          BorderBrush="#FFFF7800" BorderThickness="2" Background="#FFFF7800" Canvas.Left="25" Width="650">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect GlowColor="#FFFF7800" GlowSize ="10" Noise="0.7" Opacity="0.8" />
            </Border.BitmapEffect>
            <Border.Triggers>
                <EventTrigger SourceName="boton_activar_2" RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard Name="mostrar_panel_2">

                            <DoubleAnimation  Storyboard.TargetName="border1" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />

                            <DoubleAnimation  Storyboard.TargetName="border3" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border4" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border5" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />

                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Canvas.Top)"  To="170" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetProperty="(Canvas.Top)"  To="250" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="330" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.2"  />


                            <DoubleAnimation BeginTime="0:0:0.4" Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="180" />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="440" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="520" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="600" Duration="0:0:0.2"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger SourceName="boton_activar_2" RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard Name="ocultar_panel_2">
                        <Storyboard>

                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="71"/>


                            <DoubleAnimation Storyboard.TargetName="border3" Storyboard.TargetProperty="(Canvas.Top)"  To="330" Duration="0:0:0.4"  />
                            <DoubleAnimation Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.6"  />
                            <DoubleAnimation Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.8"  />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Grid Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="10*"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                </Grid.RowDefinitions>
                <Canvas>
                    <TextBlock Text="¿Pregunta 2?" FontSize="20" Foreground="#FFFFFF" Canvas.Left="91" Height="39" Width="537" Canvas.Top="15"/>
                </Canvas>



                <ToggleButton  VerticalAlignment="Top"  HorizontalAlignment="Left" Name="boton_activar_2" Opacity="1" Background="#FFFF7800" BorderBrush="#FFFF7800" Height="61" Width="91" Grid.RowSpan="2" BorderThickness="0">
                    <Canvas>
                        <Ellipse Fill="White" Height="50" Width="50" HorizontalAlignment="Left" Canvas.Left="-31" Canvas.Top="-25" >

                        </Ellipse>

                        <TextBlock Text="2" Foreground="#132459" FontSize="35" Canvas.Left="-15" Canvas.Top="-26"></TextBlock>
                    </Canvas>


                </ToggleButton>

                <StackPanel Grid.Row="0">
                    <Canvas>
                        <TextBlock Text="Respuesta 2" Canvas.Left="94" Canvas.Top="72" Foreground="White" FontSize="20" Height="40" Width="223">
                            <TextBlock.BitmapEffect>
                                <OuterGlowBitmapEffect GlowColor="#FFFFFF" GlowSize ="10" Noise="0.2" Opacity="0.4" />
                            </TextBlock.BitmapEffect>
                        </TextBlock>
                    </Canvas>


                </StackPanel>
            </Grid>
        </Border>
    </Canvas>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Panel.ZIndex="0">
        <Border Canvas.Top="330" Height="71" CornerRadius="10" Name="border3" VerticalAlignment="Top" 
          BorderBrush="#FFFF7800" BorderThickness="2" Background="#FFFF7800" Canvas.Left="25" Width="650">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect GlowColor="#FFFF7800" GlowSize ="10" Noise="0.7" Opacity="0.8" />
            </Border.BitmapEffect>
            <Border.Triggers>
                <EventTrigger SourceName="boton_activar_3" RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard Name="mostrar_panel_3">

                            <DoubleAnimation  Storyboard.TargetName="border1" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border2" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border4" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />
                            <DoubleAnimation  Storyboard.TargetName="border5" Storyboard.TargetProperty="Height"  To="71" Duration="0:0:0.2"  />

                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Canvas.Top)"  To="170" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border2" Storyboard.TargetProperty="(Canvas.Top)"  To="250" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetProperty="(Canvas.Top)"  To="330" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.2" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.2"  />


                            <DoubleAnimation BeginTime="0:0:0.4" Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="180" />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="520" Duration="0:0:0.2"  />
                            <DoubleAnimation BeginTime="0:0:0.4" Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="600" Duration="0:0:0.2"  />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger SourceName="boton_activar_3" RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard Name="ocultar_panel_3">
                        <Storyboard>

                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="71"/>



                            <DoubleAnimation Storyboard.TargetName="border4" Storyboard.TargetProperty="(Canvas.Top)"  To="410" Duration="0:0:0.4"  />
                            <DoubleAnimation Storyboard.TargetName="border5" Storyboard.TargetProperty="(Canvas.Top)"  To="490" Duration="0:0:0.6"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Grid Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="10*"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                </Grid.RowDefinitions>
                <Canvas>
                    <TextBlock Text="¿Pregunta 3?" FontSize="20" Foreground="#FFFFFF" Canvas.Left="91" Height="39" Width="537" Canvas.Top="15"/>
                </Canvas>



                <ToggleButton  VerticalAlignment="Top"  HorizontalAlignment="Left" Name="boton_activar_3" Opacity="1" Background="#FFFF7800" BorderBrush="#FFFF7800" Height="61" Width="91" Grid.RowSpan="2" BorderThickness="0">
                    <Canvas>
                        <Ellipse Fill="White" Height="50" Width="50" HorizontalAlignment="Left" Canvas.Left="-31" Canvas.Top="-25" >

                        </Ellipse>

                        <TextBlock Text="3" Foreground="#132459" FontSize="35" Canvas.Left="-15" Canvas.Top="-26"></TextBlock>
                    </Canvas>


                </ToggleButton>

                <StackPanel Grid.Row="0">
                    <Canvas>
                        <TextBlock Text="Respuesta 3" Canvas.Left="94" Canvas.Top="72" Foreground="White" FontSize="20" Height="40" Width="223">
                            <TextBlock.BitmapEffect>
                                <OuterGlowBitmapEffect GlowColor="#FFFFFF" GlowSize ="10" Noise="0.2" Opacity="0.4" />
                            </TextBlock.BitmapEffect>
                        </TextBlock>
                    </Canvas>


                </StackPanel>
            </Grid>
        </Border>
    </Canvas>

0 个答案:

没有答案