如何动态调整具有动画笔触厚度的矩形路径？

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的动画，margin需要从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" 一起使用，无论它看起来像什么。