如何在WPF中将动画缩放到窗口大小

Question

I want an animation that adapts to the size of the window.

I copied the code from the pointanimationusingpath example and changed it a little. I added a new path so I could see the path the circle follows. I also made a simpler path for the circle to follow.

I can add Stretch="Fill" to the path that shows the path of the circle. Now the size of the path changes with the window size. How do I do this with the path of the animation and make it follow the same path as the path shown?

<Window x:Class="TestPointAlongPath.MainWindow"
        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"
        xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
        mc:Ignorable="PresentationOptions"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Path Data="M1,200 L275,1 L345,200" Margin="15,15,15,15" 
                        Stroke="#BF708090" StrokeThickness="3" />

        <Path Fill="Blue" Margin="15,15,15,15" >
            <Path.Data>

                <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The
            Center property is animated, causing the Ellipse to animate across the screen-->
                <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
                Center="10,100" RadiusX="15" RadiusY="15"/>
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Name="MyBeginStoryboard">
                        <Storyboard>

                            <!-- Animates the ellipse along the path. -->
                            <PointAnimationUsingPath
                    Storyboard.TargetName="MyAnimatedEllipseGeometry"
                    Storyboard.TargetProperty="Center"
                    Duration="0:0:7.5" 
                    RepeatBehavior="Forever" >
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry 
                        Figures="M1,200 L275,1 L345,200"
                        PresentationOptions:Freeze="True">
                                        <PathGeometry.Transform>
                                            <ScaleTransform ScaleX="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
                                                            ScaleY="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"/>
                                        </PathGeometry.Transform>
                                    </PathGeometry>
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Grid>
</Window>

Answer 1

You hosted the Paths under Canvas. Canvas demands exact locations. Instead use Grid. All Paths will sit one on top of the other. Then, you can use their Stretch property to work out their stretching. Also, you dont need the Page element..