C# 动画路径被切断

我试图创造一条看起来无限的动画路径。 路径是在按钮的顶部绘制的，但问题是，当路径移动时，您无法看到所有路径，它只是在按钮的宽度处剪切。 以下是一张图片： 路径非常简单，有10条对角线并排排列

故事板：

   <Storyboard x:Key="StoryboardPath" RepeatBehavior="Forever">
      <DoubleAnimationUsingPath Duration="0:0:0:1" 
                              Source="X" 
                              Storyboard.TargetProperty="(TranslateTransform.X)" 
                              Storyboard.TargetName="pathTranslateTranform">
         <DoubleAnimationUsingPath.PathGeometry>
            <PathGeometry Figures="M-120,0 L0,0"/>
         </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
   </Storyboard>

以及按钮的数据模板：

   <DataTemplate DataType="{x:Type controls:Button}">
      <Grid ClipToBounds="True">
         <Button Content="Test Button"/>
         <Path x:Name="busyIndicator"
               Fill="Brown">
            <Path.RenderTransform>
               <TransformGroup>
                  <TranslateTransform x:Name="pathTranslateTranform"/>
               </TransformGroup>
            </Path.RenderTransform>
            <Path.Data>
               M 0 0   l 20 0   l 80 100   l -20 0 z
               M 40 0  l 20 0   l 80 100   l -20 0 z
               M 80 0  l 20 0   l 80 100   l -20 0 z
               M 120 0 l 20 0   l 80 100   l -20 0 z
               M 160 0 l 20 0   l 80 100   l -20 0 z
               M 200 0 l 20 0   l 80 100   l -20 0 z
               M 240 0 l 20 0   l 80 100   l -20 0 z
               M 280 0 l 20 0   l 80 100   l -20 0 z
               M 320 0 l 20 0   l 80 100   l -20 0 z
               M 360 0 l 20 0   l 80 100   l -20 0 z
               M 400 0 l 20 0   l 80 100   l -20 0 z
            </Path.Data>
         </Path>
      </Grid>

      <DataTemplate.Triggers>
         <DataTrigger Binding="{Binding IsBusy.Value}" Value="False">
            <DataTrigger.EnterActions>
               <BeginStoryboard>
                  <Storyboard>
                     <StaticResource ResourceKey="StoryboardPath"/>
                  </Storyboard>
               </BeginStoryboard>
            </DataTrigger.EnterActions>
         </DataTrigger>
      </DataTemplate.Triggers>
   </DataTemplate>

M 0 0 l 20 0 l 80 100 l-20 0 z
M 40 0升20 0升80 100升-20 0 z
M 80 0 l 20 0 l 80 100 l-20 0 z
M 120 0 l 20 0 l 80 100 l-20 0 z
M 160 0 l 20 0 l 80 100 l-20 0 z
M 200 0 l 20 0 l 80 100 l-20 0 z
M 240 0 l 20 0 l 80 100 l-20 0 z
M 280 0 l 20 0 l 80 100 l-20 0 z
M 320 0升20 0升80 100升-20 0 z
米360 0升20 0升80 100升-20 0 z
M 400 0 l 20 0 l 80 100 l-20 0 z

我找到了一个解决方案：
将右边的边距值设置为负值可以解决此问题。
这对我来说很有用：

<Path x:Name="busyIndicator"
        Visibility="{Binding Visibility}"
        Fill="Red"
        Opacity="0.2"
        Margin="0,0,-160,0">
...
</Path>

...

如果有人感兴趣，为了使动画无缝，我必须调整故事板。
将顶部的替换为：

<PathGeometry Figures="M-160,0 L-80,0"/>

结果如下所示：

这是gif格式的，显示了动画的外观：

---

按钮的数据模板似乎没有意义，因为按钮不是“数据”。除此之外，为什么网格上有

cliptobunds=“True”

？如果删除该选项，或者将其设置为false，该怎么办？ClipToBounds根本不会更改路径的大小不幸的是，只需将其剪裁到网格区域之外即可。下面是一个gif显示：我刚刚通过Snoop发现DesiredSize被设置为网格/按钮的大小，如果我改变按钮大小变大，路径也变大。