0

I have a problem when I try to animate these toggle button, because when you get to press random buttons, does not stop the animation and that means that I will not close the open panel but if you move the positions of the buttons that are more it down. The effect I want is that when you press the first button panel with answers opens when you press the second closes the first and the second is opened so on. It now works fine, the problem is when you start to press randomly, control no animation finishes executing, and that means it does not close the open panel but if you move the positions of the other toggle button and overlap. Looking at the code, I could see that fails to execute the animation, do not understand the reason for not it throws any errors, simply does not work well.

<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>
kennyzx
  • 12,845
  • 6
  • 39
  • 83
  • I think the translator you used may have worded your question a bit badly, but from what it looks like you're doing it incorrectly anyway and should look into using a RenderTransform with a TranslateTransform to accomplish the effect instead. Do you have an example of the effect you want and we can show you how to do it much less and more efficient code? Since code is a universal language. :) – Chris W. Apr 07 '15 at 21:08
  • sorry friend, do not use a translator xD. Similarly I explain the effect I want to achieve is that of a cascade button when you press the first button panel with answers opens when you press the second closes and opens the first second, so on. It now works fine, the problem is when you start to press randomly, control no animation finishes executing, and that means it does not close the open panel but if you move the positions of the other toogle button and overlap. – Sergio Eduardo Chavez Parra Apr 08 '15 at 12:24
  • Maybe something is lost in translation here, but are you really just looking for an Expander control that would allow only one item to be open at a time? (https://msdn.microsoft.com/en-us/library/system.windows.controls.expander%28v=vs.110%29.aspx) Essentially you'd want to hook into the expanded event and collapse all other open expanders which by default would allow only one to be open. – alan Apr 08 '15 at 13:01
  • i understandig, but i need make my own control no uses the expander – Sergio Eduardo Chavez Parra Apr 08 '15 at 13:40
  • Oh, you mean like an Accordion control? – Chris W. Apr 08 '15 at 13:40

0 Answers0