Cannot resolve TargetName - Silverlight4 C#

Question

I am getting the error Cannot resolve TargetName grdGeneral. What I am trying to do is have a fade out function which accepts a grid and fades the opacity to zero. I have this function called on MouseLeftButtonDown and is loaded after the xaml and form has loaded.

Calling the fade out:

private void imgNext_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            fadeOut(grdGeneral);            
        }

The fade out function:

private void fadeOut(Grid pGrid)
        {
            Storyboard stb = new Storyboard();

            DoubleAnimation da = new DoubleAnimation();
            da.From = 1.0;
            da.To = 0.0;

            stb.Duration = new Duration(TimeSpan.FromSeconds(.75));
            stb.Children.Add(da);

            Storyboard.SetTargetName(da, pGrid.Name);
            Storyboard.SetTargetProperty(da, new PropertyPath(Grid.OpacityProperty));

            stb.Begin();
        }

I have been on a handful of tutorial sites and my code seems to follow the same order. I also have been on this stackoverflow question before you say repost. That question has to deal with mutlipages and I am merely trying to start a animation.

The Stack Trace

System.InvalidOperationException was unhandled by user code
  Message=Cannot resolve TargetName grdGeneral.
  StackTrace:
       at MS.Internal.XcpImports.MethodEx(IntPtr ptr, String name, CValue[] cvData)
       at MS.Internal.XcpImports.MethodEx(DependencyObject obj, String name)
       at System.Windows.Media.Animation.Storyboard.Begin()
       at MeterTesting.QuarterReportGUI.fadeOut(Grid pGrid)
       at MeterTesting.QuarterReportGUI.imgNext_MouseLeftButtonDown(Object sender, MouseButtonEventArgs e)
       at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
       at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)
  InnerException: 

Answer 1

You really shouldn't try and code your storyboards like this if you don't absolutely have to. Once your animations get a little complex it's gonna bite you.

You should instead do this in xaml, preferably using Blend. Try this in your xaml:

<UserControl.Resources>
    <Storyboard x:Name="FadeGrid">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grdGeneral">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="grdGeneral" Background="White">
    <Image x:Name="imgNext" MouseLeftButtonDown="imgNext_MouseLeftButtonDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="/StoryboardInCode;component/Images/avatar.jpg"></Image>
</Grid>

In your code behind, you would then invoke it like so:

private void imgNext_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        FadeGrid.Begin();
    }

That should give you what you're looking for.

It would also be better to use a button instead of the image.

Answer 2

How would this work if I wanted to dynamically set the target name at runtime?