ImageButton state don't reset to Normal

Question

Faced such a problem, if you use ImageButton together with VisualStateManager and click on it, and then slide your finger outside of the control and release, then the state is not reset to Normal.

Does anyone know how to get around this problem?

Here's an example of the ImageButton style:

<Style x:Key="ProductButton" TargetType="ImageButton">
<Setter Property="HeightRequest" Value="70"/>
<Setter Property="WidthRequest" Value="210"/>
<Setter Property="Aspect" Value="Fill"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="VisualStateManager.VisualStateGroups">
    <VisualStateGroupList>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.8"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateGroupList>
</Setter>

Answer 1

I find one workround that using platform effect that triggers the released event when the touch up occurs outside the Imagebutton.

Create effect in the .NET Standard library(shared code).

public class SpecialButtonEffect : RoutingEffect
{
    public SpecialButtonEffect() : base($"MyCompany.{nameof(SpecialButtonEffect)}")
    {
    }
}

Implementing SpecialButtonEffect in ios:

[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(EffectTest.iOS.Effects.SpecialButtonEffect), 
nameof(EffectTest.iOS.Effects.SpecialButtonEffect))]
namespace EffectTest.iOS.Effects
{
public class SpecialButtonEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        (Control as UIButton).TouchUpOutside += OnTouchUpOutside;
    }

    protected override void OnDetached()
    {
        (Control as UIButton).TouchUpOutside -= OnTouchUpOutside;
    }

    private void OnTouchUpOutside(object sender, EventArgs e)
    {
        (Element as IButtonController).SendReleased();
    }
}
}

consuming the effect in xaml.

<ImageButton
            HorizontalOptions="Center"
           
            Source="favorite.png"
            VerticalOptions="CenterAndExpand">
            <ImageButton.Effects>
                <local:SpecialButtonEffect  />
            </ImageButton.Effects>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="1" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="0.5" />
                        </VisualState.Setters>
                    </VisualState>
                    
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </ImageButton>