Animation problem

[PaulHuppé]

Hi,

I am trying to add animations to some panels and running into a problem.  I have a first panel which contains some navigation tools like ZoomIn, ZoomOut, ZoomToLocation, Pa, etc.  I have a second panel which will contain the ZoomToLocation controls.  My problem is that the animation to open/close the second panel does not work properly.  If I have the second panel open on startup, then the close button I have in that panel works fine and the panel closes using the animation.  But, the button in the first panel which is should open the second panel using an animation does not do anything.  I have been looking at the code so much that maybe I am not seeing something obvious.  Here is the code.  I have removed most of the buttons and extra stuff to keep it short:

 <Grid Effect="{StaticResource dropShadow}">
  <VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="PanelStates">
    <VisualStateGroup.Transitions>
     <VisualTransition GeneratedDuration="0:0:1">
      <VisualTransition.GeneratedEasingFunction>
       <CubicEase EasingMode="EaseInOut"/>
      </VisualTransition.GeneratedEasingFunction>
     </VisualTransition>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="PanelOn">
     <Storyboard>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="spNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="350" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="spNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="56" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="spNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="PanelOff">
     <Storyboard>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="120" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="24" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="imgNavTools" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PanelStatesZoomToLoc">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:1">
                        <VisualTransition.GeneratedEasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="PanelOnZoomLoc">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="240" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="spZoomToLoc" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="50" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="spZoomToLoc" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PanelOffZoomLoc">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="spZoomToLoc" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="spZoomToLoc" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  <Image x:Name="imgNavTools"
   DataContext="{Binding ElementName=NavTools,Path=ViewModel}"
   VerticalAlignment="{Binding Path=verticalAlignmentNavToolBar}"
   HorizontalAlignment="{Binding Path=horizontalAlignmentNavToolBar}"
   Source="/MIB.Map.Presentation;component/Images/navtools.png"
   Margin="15,0,0,5"
   Width="120" Height="24">
   <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonDown">
     <ei:GoToStateAction StateName="PanelOn"/>
    </i:EventTrigger>
   </i:Interaction.Triggers>
   <ToolTipService.ToolTip>
    <ToolTip Margin="0" BorderThickness="0" Padding="0">
     <StackPanel Background="#6699CC" Margin="0">
      <sdk:Label Content="{Binding localizationResources.strOpenNavTools}"
          Background="#336699" Foreground="White" FontWeight="Bold"
          HorizontalAlignment="Center" VerticalAlignment="Center"
          Width="300" Height="20"/>
     </StackPanel>
    </ToolTip>
   </ToolTipService.ToolTip>
  </Image>
  <StackPanel x:Name="spNavTools" Orientation="Horizontal" 
     DataContext="{Binding ElementName=NavTools,Path=ViewModel}"
     Effect="{StaticResource dropShadow}"
     Height="0" Width="0"
     HorizontalAlignment="{Binding Path=horizontalAlignmentNavToolBar}"
     VerticalAlignment="{Binding Path=verticalAlignmentNavToolBar}" 
     Margin="{Binding Path=marginNavToolBar}"
     Visibility="{Binding ViewVisibility}">
   <Border x:Name="bNavTools" BorderThickness="3" Style="{StaticResource menuBorder}">
    <Border.Effect>
     <DropShadowEffect Color="Black" Direction="-45" BlurRadius="20" Opacity="0.75" />
    </Border.Effect>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
     <Button x:Name="btnZoomToLoc" Style="{StaticResource ToolbarButton}" >
      <Button.Content>
       <Image Source="/MIB.Map.Presentation;component/Images/i_zoomtoloc.png" Stretch="Fill" />
      </Button.Content>
      <i:Interaction.Triggers>
       <i:EventTrigger EventName="MouseLeftButtonDown">
                                <ei:GoToStateAction StateName="PanelOnZoomLoc"/>
       </i:EventTrigger>
      </i:Interaction.Triggers>
      <ToolTipService.ToolTip>
       <ToolTip Margin="0" BorderThickness="0" Padding="0">
        <StackPanel Background="#6699CC" Margin="0">
         <sdk:Label  Content="{Binding localizationResources.strOpenZoomToLoc}"
            Background="#336699" Foreground="White" FontWeight="Bold"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Width="300" Height="20"/>
        </StackPanel>
       </ToolTip>
      </ToolTipService.ToolTip>
     </Button>
     <Image x:Name="imgClose" Source="/MIB.Map.Presentation;component/Images/bullet_red.png"
       Height="25" Width="25" Margin="-10,0,0,25">
      <i:Interaction.Triggers>
       <i:EventTrigger EventName="MouseLeftButtonDown">
        <ei:GoToStateAction StateName="PanelOff"/>
       </i:EventTrigger>
      </i:Interaction.Triggers>
      <ToolTipService.ToolTip>
       <ToolTip Margin="0" BorderThickness="0" Padding="0">
        <StackPanel Background="#6699CC" Margin="0">
         <sdk:Label Content="{Binding localizationResources.strCloseNavTools}"
          Background="#336699" Foreground="White" FontWeight="Bold"
          HorizontalAlignment="Center" VerticalAlignment="Center"
          Width="300" Height="20"/>
        </StackPanel>
       </ToolTip>
      </ToolTipService.ToolTip>
     </Image>
    </StackPanel>
   </Border>
  </StackPanel>
  <StackPanel x:Name="spZoomToLoc" Orientation="Horizontal" 
    DataContext="{Binding ElementName=NavTools,Path=ViewModel}"
    Effect="{StaticResource dropShadow}"
    Height="0" Width="0"
    HorizontalAlignment="{Binding Path=horizontalAlignmentNavToolBar}"
    VerticalAlignment="{Binding Path=verticalAlignmentNavToolBar}"
    Margin="100,0,0,50" Visibility="Visible">
   <Border x:Name="bZoomToLoc" BorderThickness="3" Style="{StaticResource menuBorder}">
    <Border.Effect>
     <DropShadowEffect Color="Black" Direction="-45" BlurRadius="20" Opacity="0.75" />
    </Border.Effect>
    <StackPanel Orientation="Horizontal" Width="210" VerticalAlignment="Center" Margin="5,0,5,5">
     <ComboBox Width="190" SelectedIndex="0" Height="25" Margin="0,5,0,0">
      <ComboBoxItem Content="Zoom to ..." />
     </ComboBox>
     <Image x:Name="imgCloseZoomToLoc" Source="/MIB.Map.Presentation;component/Images/bullet_red.png"
      Height="25" Width="25" Margin="0,-5,0,0" VerticalAlignment="Top">
      <i:Interaction.Triggers>
       <i:EventTrigger EventName="MouseLeftButtonDown">
        <ei:GoToStateAction StateName="PanelOffZoomLoc"/>
       </i:EventTrigger>
      </i:Interaction.Triggers>
      <ToolTipService.ToolTip>
       <ToolTip Margin="0" BorderThickness="0" Padding="0">
        <StackPanel Background="#6699CC" Margin="0">
         <sdk:Label Content="{Binding localizationResources.strCloseZoomToLoc}"
         Background="#336699" Foreground="White" FontWeight="Bold"
         HorizontalAlignment="Center" VerticalAlignment="Center"
         Width="300" Height="20"/>
        </StackPanel>
       </ToolTip>
      </ToolTipService.ToolTip>
     </Image>
    </StackPanel>
   </Border>
  </StackPanel>
 </Grid>

[JenniferNery]

That's a lot of code and is kind of difficult to read. This also seems like the kind of question that is best answered at a Silverlight forum http://forums.silverlight.net/. And you might also want to try to use ExpressionBlend to set up your animation. This might be the simplest solution.

[PaulHuppé]

Ok, I will try on that forum.
Thanks,
Paul