How to dynamically size a rectangular path with animated stroke width?

I have a Rectangle

and a Path


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


The rectangle dynamically changes its width to match the anchor. The rectangular Path

has animation applied to it StrokeThickness

. I want the rectangle Path

to fit exactly to the size of the rectangle, but in a way that animating the stroke weight won't affect it (a thicker stroke should Path

actually do a little more than that Rectangle

- that's the intended behavior).

How can i do this?

Please note that I cannot use the property Stretch="Fill"

in Path

. In this case, the stroke weight will only grow inside the borders Path

, but I want the default stroke behavior to increase in both the inward and outward directions.

Also, I cannot change the view model to which the width is bound Rectangle

. This is an external component that I am not allowed to modify.

I could Rectangle

really get rid of it . Path

Its dynamically changing width is also important to me .


source to share

1 answer

As noted, the influence of the impact thickness, which grows only inside, can be canceled by negative fields.

For an animation that changes its thickness from 1 to 3, the margin should change from 0 to -1 (compensate for half the change in thickness):

        <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"/>


With this, you can use your solution with Stretch="Fill"

whatever it looks like.



All Articles