Home/ Questions/Q 3308894
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:34:32+00:00

I have a canvas that contains a couple other elements. I need this canvas

  • 0

I have a canvas that contains a couple other elements. I need this canvas to animate continuously along a circular (elliptical) path.

How can I do this in XAML?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    not sure if this is doing it the hard way or not but this works…

    <Canvas>
    <Rectangle Height="30" Width="30" Fill="Blue">
        <Rectangle.RenderTransform>
            <MatrixTransform x:Name="elementMatrixTransform">
                <MatrixTransform.Matrix >
                    <Matrix />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <MatrixAnimationUsingPath
                            Storyboard.TargetName="elementMatrixTransform"
                            Storyboard.TargetProperty="Matrix"
                            Duration="0:0:10"
                            RepeatBehavior="Forever">
                            <MatrixAnimationUsingPath.PathGeometry>
                                <PathGeometry>
                                    <PathFigure StartPoint="0,50">
                                        <ArcSegment Point="50,0" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
                                        <ArcSegment Point="100,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
                                        <ArcSegment Point="50,100" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
                                        <ArcSegment Point="0,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
                                    </PathFigure>
                                </PathGeometry>
                            </MatrixAnimationUsingPath.PathGeometry>
                        </MatrixAnimationUsingPath>

                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Canvas>
    • 0