0

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

<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>
4

0 回答 0