In one of the module, I have seen following style being set.
<Style TargetType="Rectangle">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="300" Duration="0:0:1.5" 
                    AccelerationRatio="0.10" DecelerationRatio="0.25" 
                    Storyboard.TargetProperty="(Canvas.Width)" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
Note that TargetType is Rectangle while, Storyboard.TargetProperty is Canvas.Width.
The style/trigger still is working correctly. It is animating the Rectangle.width property.
I understand that In Storyboard.TargetProperty (or anywhere else in XAML), we have to use PropertyPath syntax, which is like (ownerType.PropertyName).
My question is how setting animation on Canvas.Width is animating Rectangle.Width
It's because the XAML compiler resolves Canvas.Width by looking for a static field called WidthProperty on Canvas. Since Canvas inherits from FrameworkElement, a reference to Canvas.WidthProperty resolves to FrameworkElement.WidthProperty.
Because Rectangle also inherits from FrameworkElement, animating Canvas.WidthProperty is the same as animating Rectangle.WidthProperty, is the same as animating FrameworkElement.WidthProperty.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With