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