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