dotnet
Unable to set Button opacity on press.
Description
On iOS/macCatalyst when button are in a "pressed" state, their platform specific behaviors tends to greyed them out. This greyed out appears to be an Alpha being set by UIKit.
Usually I would change this behavior using such code :
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Opacity" Value="1.0" />
<Setter Property="TextColor" Value="Red" />
<Setter Property="BackgroundColor" Value="Blue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
But unfortunately this doesn't work. Opacity doesn't apply, both colors apply but underlaying Alpha is still there.
PS Feel free to move it to FeatureRequest or proposal/open queue if you think it's more relevant. I set it as a bug as there's no need for a public API change. As far as Opacity/Alpha is concerned, it feels more like a bug as opposed to an android ripple effect applied to MaterialButton.
Steps to Reproduce
Nothing in particular, just add a <Button/> to your XAML.
Link to public reproduction project repository
No response
Version with bug
8.0.3
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
iOS, macOS, I was not able test on other platforms
Affected platform versions
No response
Did you find any workaround?
After some research, it seems that an Alpha is applied on UIKit.UIButton.
So I applied the following workaround to circumvent this, but to me it's a lot of code for just an Opacity set on press.
Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("NoAlphaOnPressed", (handler, view) =>
{
if (view is Button b)
{
#if IOS
if (handler.PlatformView is UIKit.UIButton iOSButton)
{
b.Pressed += (sender, args) =>
{
iOSButton.ImageView.Alpha = 1;
iOSButton.TitleLabel.Alpha = 1;
};
}
#endif
}
});
Relevant log output
No response
Sidenote, this also apply to Button with ImageSource set, where in this case I have no workaround for the image not being greyed...
We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.
@samhouts well, after being busy with this issue for some time now, this seems to be a bigger issue than it seems at first.
1- It also happens on Android, please add tag :)
2- It also happens when setting the Opacity for example for the Disabled state:
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.5" />
</VisualState.Setters>
</VisualState>
It also happens if you try to set it from a Style's Trigger , i.e. (IsEnabled == false).
3- It also happens with the ImageButton.
4- The good news: I managed to come with a pretty deranged and unexpected workaround, which might help you guys identify the problem.
Setting a shadow, even a dummy one, to the Button (or ImageButton) seems to trigger something that is not triggered otherwise. So:
<Button>
<Button.Shadow>
<Shadow Radius="0" Opacity="0" Brush="Transparent" Offset="0,0"/>
</Button.Shadow>
...
</Button>
solved the problem in such an unorthodox way 🥇
@MarcAlx I hope you find this useful :)
Will try it soon thanks, does it work with button that have an ImageSource? The mapper I put in my message doesn't apply to the image inside the button.
@MauiUIui your solution seems to not work for me.
To me the problem is that button enters in an highlighted state. This normal iOS behavior causes buttons to acquire an alpha of 0.2.
Best wrokaround I've found is :
Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("NoAlphaOnPressed", (handler, view) =>
{
if (view is Button b)
{
#if IOS
if (handler.PlatformView is UIKit.UIButton iOSButton)
{
b.Pressed += (sender, args) =>
{
//avoid alpha
iOSButton.Highlighted = false;
}
}
#endif
}
}