Проблема с 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>