AlohaKit.Animations
AlohaKit.Animations copied to clipboard
Using RotationAnimation when binding to another event
I am wanting to use a DataTrigger so I can bind to another element to cause my element to animate when something happens. In this example it is an image that gets rotated 180 degrees when an Expander from MAUI toolkit is expanded.
My first thought was a DataTrigger on the IsExpanded property. But this isn't how you use setters so it does not work.
<Image x:Name="ChevronImage" WidthRequest="8" HeightRequest="4" Source="chevron_down" >
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding IsExpanded, Source={x:Reference MyExpander}}" Value="True">
<DataTrigger.Setters>
<alohakitAnimations:RotateToAnimation Rotation="180" Duration="1000" />
</DataTrigger.Setters>
</DataTrigger>
</Image.Triggers>
</Image>
<toolkit:Expander x:Name="MyExpander">
</toolkit:Expander>
I then thought I could do it the other way as to be an event from the Expander but it doesn't work as this is not an action.
<Image x:Name="ChevronImage" WidthRequest="8" HeightRequest="4" Source="chevron_down" />
<toolkit:Expander x:Name="MyExpander" >
<toolkit:Expander.Triggers>
<EventTrigger Event="ExpandedChanged">
<EventTrigger.Actions>
<alohakitAnimations:RotateToAnimation Target="{x:Reference ChevronImage}" Rotation="180" Duration="1000" />
</EventTrigger.Actions>
</EventTrigger>
</toolkit:Expander.Triggers>
</toolkit:Expander>
I am going to stuff around with some other ways, but is this kind of implementation possible and I am just overlooking something?