WPF UserControl Animation in Code-behind Not Working with ContentPresenter

Question

When the code is like this, the animation works as expected.

AnimatedUserControl2.xaml

<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
    <Grid Background="Coral">
        <Canvas>
            <TextBlock x:Name="MNB" Text="ABCD"/>
        </Canvas>
    </Grid>
</UserControl>

AnimatedUserControl2.xaml.cs (Partial Code Only)

        private void AnimatedUserControl2_OnIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            if (Visibility == Visibility.Visible)
            {
                var storyboard = new Storyboard();
                var visibilityAnimation = new ObjectAnimationUsingKeyFrames();
                visibilityAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(Visibility.Visible,
                                                                             KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
                Storyboard.SetTargetProperty(visibilityAnimation, new PropertyPath(VisibilityProperty));
                storyboard.Children.Add(visibilityAnimation);
                var opacityAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1)));
                Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(OpacityProperty));
                storyboard.Children.Add(opacityAnimation);
                var canvasLeftAnimation = new DoubleAnimationUsingKeyFrames();
                canvasLeftAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200,
                                                                           KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
                canvasLeftAnimation.KeyFrames.Add(new SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)),
                                                                           new KeySpline(new Point(0.25, 0.1),
                                                                                         new Point(0.25, 1))));
                Storyboard.SetTargetProperty(canvasLeftAnimation, new PropertyPath(Canvas.LeftProperty));
                storyboard.Children.Add(canvasLeftAnimation);
                MNB.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
            }
        }

However, when I use a ContentPresenter in the XAML code, the animation does not work at all.

AnimationUserControl2.xaml (1st Revision)

<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
    <Grid Background="Coral">
        <Canvas>
            <ContentPresenter x:Name="MNB"/>
        </Canvas>
    </Grid>
</UserControl>

When I try to wrap the ContentPresenter with a Grid, the animation still doesn't work.

AnimationUserControl2.xaml (2nd Revision)

<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
    <Grid Background="Coral">
        <Canvas>
            <Grid x:Name="MNB">
                <ContentPresenter/>
            </Grid>
        </Canvas>
    </Grid>
</UserControl>

Here's the question. How can I get the animation to work with a ContentPresenter?

UPDATE 01

Here's how AnimatedUserControl2 is used.

MainWindow.xaml (Partial Code Only)

        <StackPanel Grid.Row="0" Orientation="Vertical">
            <usercontrols:AnimatedUserControl2 x:Name="ABCD" Visibility="Hidden">
                <TextBlock Text="ABC"/>
            </usercontrols:AnimatedUserControl2>
            <usercontrols:AnimatedUserControl2 x:Name="EFGH" Visibility="Hidden" Margin="10">
                <TextBlock Text="ABC"/>
            </usercontrols:AnimatedUserControl2>
        </StackPanel>
        <Button x:Name="ButtonBeginAnimation" Click="ButtonBeginAnimation_OnClick" Content="Begin Animation" Grid.Row="1"/>

MainWindow.xaml.cs (Partial Code Only)

        private void ButtonBeginAnimation_OnClick(object sender, RoutedEventArgs e)
        {
            ABCD.Visibility = (ABCD.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
            EFGH.Visibility = (EFGH.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
        }

Answer 1

So the problem is with how you're using your user control - you simply override content once specified inside UserControl xaml definition... anyway.. Try this approach (animation works on my machine so suppose to work on yours as well ;))

<UserControl x:Class="WpfApplication11.UserControl1"
         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"
         d:DesignHeight="300"
         d:DesignWidth="300"
         mc:Ignorable="d">
<UserControl.Template>
    <ControlTemplate TargetType="UserControl">
        <Grid Background="Coral">
            <Canvas>
                <ContentPresenter x:Name="MNB" Content="{TemplateBinding Content}"/>
            </Canvas>
        </Grid>
    </ControlTemplate>
</UserControl.Template>

And in animation itself:

  private void AnimatedUserControl2_OnIsVisibleChanged(object sender, EventArgs e)
    {
        var mnb = Template.FindName("MNB", this) as FrameworkElement;
        if (mnb == null)
        {
            return;
        }

        if (Visibility == Visibility.Visible)
        {
            var storyboard = new Storyboard();
            var visibilityAnimation = new ObjectAnimationUsingKeyFrames();
            visibilityAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(Visibility.Visible,
                                                                         KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
            Storyboard.SetTargetProperty(visibilityAnimation, new PropertyPath(VisibilityProperty));
            storyboard.Children.Add(visibilityAnimation);
            var opacityAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1)));
            Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(OpacityProperty));
            storyboard.Children.Add(opacityAnimation);
            var canvasLeftAnimation = new DoubleAnimationUsingKeyFrames();
            canvasLeftAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200,
                                                                       KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
            canvasLeftAnimation.KeyFrames.Add(new SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)),
                                                                       new KeySpline(new Point(0.25, 0.1),
                                                                                     new Point(0.25, 1))));
            Storyboard.SetTargetProperty(canvasLeftAnimation, new PropertyPath(Canvas.LeftProperty));
            storyboard.Children.Add(canvasLeftAnimation);
            mnb.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
        }
    }