Is it possible to globally define Silverlight 4 Storyboard Animations?

Question

I have two animations defined in my silverlight app :

<Storyboard x:Name="ShowControls">
    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="SlideOutMenu" />
</Storyboard>
<Storyboard x:Name="Hide-Controls">
    <DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="SlideOutMenu" />
</Storyboard>

When these Storyboards are defined in an external styles xaml file they dont work. I havent been able to figure out why I cant programmatically access these resources.

This code works for other resource types like brushes and templates so... I suspect that this resource dictionary issue is specific to Resources of the type Storyboard.

This is the code that throws the error: (SlideOutMenu is a Border Control).

public void AddEventHandlers()
        {
            SlideOutMenu.MouseEnter += new MouseEventHandler(SlideOutMenu_MouseEnter);
            SlideOutMenu.MouseLeave += new MouseEventHandler(SlideOutMenu_MouseLeave);
        }

        public void SlideOutMenu_MouseEnter(object sender, MouseEventArgs e)
        {

            Storyboard showMenu = Application.Current.Resources["ShowControls"] as Storyboard;
            showMenu.Begin();
        }

Any Ideas ?

Chris Taylor Chris Taylor · Accepted Answer · 2010-11-11T19:09:19

There are a few things I could spot

1- The name of the storyboard Hide-Controls is not a valid name, you need to remove the -

2- The property you are animating is not the correct name TranslateX should be X. I assume you are using a standard TranslateTransform?

3- You will need to wire the target property in the eventhandler.

Here is a quick test I did

App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="SilverlightApplication1.App"
             >
  <Application.Resources>
    <Storyboard x:Name="ShowControls">
      <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"  />
    </Storyboard>
    <Storyboard x:Name="HideControls">
      <DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"  />
    </Storyboard>
  </Application.Resources>
</Application>

MainPage.xaml

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">  
  <Canvas x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
    <Border x:Name="SlideOutMenu" BorderBrush="Red" BorderThickness="5">
      <Border.RenderTransform>
        <TranslateTransform X="100" />
      </Border.RenderTransform>
      <ListBox Height="200" Width="100" />
    </Border>
  </Canvas>
</UserControl>

MainPage.xaml.cs

using System.Windows.Shapes;

namespace SilverlightApplication1
{
  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      InitializeComponent();
      AddEventHandlers();
    }

    public void AddEventHandlers()
    {
      SlideOutMenu.MouseEnter += new MouseEventHandler(SlideOutMenu_MouseEnter);

    }

    public void SlideOutMenu_MouseEnter(object sender, MouseEventArgs e)
    {
      Storyboard showMenu = Application.Current.Resources["ShowControls"] as Storyboard;
      Storyboard.SetTarget(showMenu, SlideOutMenu);
      showMenu.Begin();      
    } 
  }
}

Is it possible to globally define Silverlight 4 Storyboard Animations?

1 Answers