wpfのアニメーションをウィンドウのサイズに合わせるにはどうすればいいですか？

Question

ウィンドウのサイズに合わせたアニメーションが必要です。

ポイントアニメーションの使用パスexampleからコードをコピーして少し変更しました。 新しいパスを追加したので、円が追随するパスを確認できました。私はまた、円が続くためのより簡単な道を作った。

円のパスを示すパスにStretch="Fill"を追加できます。現在、パスのサイズはウィンドウのサイズに応じて変化します。どのようにしてアニメーションのパスでこれを行い、それが示されたパスと同じパスに従うようにするのですか？

<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

あなたはCanvasでパスをホストしました。キャンバスには正確な場所が必要です。 代わりに、グリッドを使用してください。すべてのパスは、もう一方の上に1つ置かれます。 次に、ストレッチプロパティを使用してストレッチを調整することができます。 また、Page要素が必要ありません。