如何使用动画描边粗细动态调整矩形路径的大小?

Question

我有一个Rectangle和一个由RectangleGeometry定义的Path：

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Stroke="Red" Width="{Binding RctWidth}"/>
<Path Grid.Row="1" Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="0,0,50,10"/>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="StrokeThickness">
<DoubleAnimation RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>          
</EventTrigger>
</Path.Triggers>
</Path>
</Grid>

矩形根据绑定动态更改其宽度。 矩形Path在其StrokeThickness上应用了动画。 我希望矩形Path的大小与该矩形完全匹配，但笔触粗细动画不会影响该矩形(较粗的笔触应使Path实际上比Rectangle大一点 - 这是预期的行为(。

我该怎么做？

请注意，我不能在Path上使用Stretch="Fill"属性。在这种情况下，描边粗细将仅在Paths边界内增长，但我想保持笔触在内向和外向增长的默认行为。

此外，我无法更改Rectangle宽度绑定到的视图模型。这是一个不允许我修改的外部组件。

实际上，我可以摆脱这种Rectangle。对我来说重要的是Path及其动态变化的宽度。

Answer 1

如前所述，描边粗细仅向内增长的影响可以通过负边距来抵消。

对于将厚度从 1 更改为 3 的动画，边距需要从 0 更改为 -1(补偿厚度更改的一半(：

<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="StrokeThickness" RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
<ThicknessAnimation Storyboard.TargetProperty="Margin" RepeatBehavior="Forever" From="0" To="-1" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>

有了这个，您可以将您的解决方案与Stretch="Fill"，无论它看起来像什么。