Animate MatrixAnimationUsingPath not running on runtime in WPF

Question

I have arrowhead and lines which working from my other SO question for a prototype/proof of concept. Now, I want to apply to real application that contains more than 5 lines using the same arrowhead. So, I want to convert the matrix from code and start the storyboard on button click. Unfortunately, the animation is not starting(the arrow is in first position and not moving through path data)

I have follow sample from MSFT Path Animations Overview.

Below are my current application

XAML:

<Path
    x:Name="Path_Room1"
    Width="68.729"
    Height="71.077"
    Data="M248.37977,129.8855 C248.37977,129.8855 248.37977,102.93943 248.37977,97.931796 248.37977,92.924162 253.51313,93.863426 263.68489,93.863426 273.85665,93.863426 274.63926,94.685097 274.63926,86.939011 274.63926,76.767263 274.63926,65.520282 274.63926,62.46878 274.63926,59.417279 277.53466,59.827827 280.50799,59.827827 283.48133,59.827827 316.10902,59.827827 316.10902,59.827827"
    Stretch="Fill"
    Stroke="Black" />
<Path
    x:Name="Arrowhead"
    Width="23"
    Height="19.5"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Data="M94,29 L117,39 95,49 99,38 z"
    Fill="#ff387cc0"
    Stretch="Fill">
    <Path.RenderTransform>
        <MatrixTransform />
    </Path.RenderTransform>
</Path>

Code-behind:

private void BtnRoom1_Click(object sender, RoutedEventArgs e)
{
    var pathdata = Path_Room1.Data;
    // I have to comment this as other animation is failed to found settargetname
    //NameScope.SetNameScope(this, new NameScope());
    PathGeometry animationPath = PathGeometry.CreateFromGeometry(pathdata);
    animationPath.Freeze();
    System.Windows.Media.Animation.MatrixAnimationUsingPath matrixAnimationUsingPath = new System.Windows.Media.Animation.MatrixAnimationUsingPath();
    matrixAnimationUsingPath.PathGeometry = animationPath;
    matrixAnimationUsingPath.Duration = TimeSpan.FromSeconds(5);
    matrixAnimationUsingPath.RepeatBehavior = System.Windows.Media.Animation.RepeatBehavior.Forever;
    matrixAnimationUsingPath.DoesRotateWithTangent = true;

    System.Windows.Media.Animation.Storyboard.SetTarget(matrixAnimationUsingPath, Arrowhead);
    System.Windows.Media.Animation.Storyboard.SetTargetProperty(matrixAnimationUsingPath, new PropertyPath("RenderTransform.Matrix"));

    System.Windows.Media.Animation.Storyboard pathAnimationStoryboard = new System.Windows.Media.Animation.Storyboard();
    pathAnimationStoryboard.Children.Add(matrixAnimationUsingPath);

    Arrowhead.Loaded += delegate (object ss, RoutedEventArgs es)
    {
        pathAnimationStoryboard.Begin(this);
    };
}

Clemens · Accepted Answer · 2021-07-21T07:54:55.303

Attaching a handler to the Loaded event of the Arrowhead element has no effect if it is already loaded.

Besides that, you don't need a Storyboard in code behind.

private void BtnRoom1_Click(object sender, RoutedEventArgs e)
{
    var pathdata = Path_Room1.Data;
    var animationPath = PathGeometry.CreateFromGeometry(pathdata);
    animationPath.Freeze();

    var matrixAnimationUsingPath = new MatrixAnimationUsingPath
    {
        PathGeometry = animationPath,
        Duration = TimeSpan.FromSeconds(5),
        RepeatBehavior = RepeatBehavior.Forever,
        DoesRotateWithTangent = true
    };

    Arrowhead.RenderTransform.BeginAnimation(
        MatrixTransform.MatrixProperty,
        matrixAnimationUsingPath);
}

Animate MatrixAnimationUsingPath not running on runtime in WPF

1 Answers1