microsoft / microsoft-ui-xaml

WinUI: a modern UI framework with a rich set of controls and styles to build dynamic and high-performing Windows applications.
MIT License
6.38k stars 683 forks source link

Disabled Buttons - UX Improvement #10019

Open Ajaiqmar opened 2 months ago

Ajaiqmar commented 2 months ago

Describe the bug

Noticed, that the disabled buttons doesn't seem to show Tooltips and it lets the click event bubble to the parent controls.

It seems vital to show the tooltip even in the disabled state, If the button just contains an Icon. Noticed this in the Windows Settings App.

image

Here the tooltip is shown, but incase we have reached the GoBack limit, The button disables and the tooltip isn't appearing anymore. And whether bubbling the event seems to be ideal or not is based on the UI that we opt for.

Keen to know, What's your take on this?

And checked out the same behaviour in Mac for comparison and found that they do show Tooltip and Nullify the event bubbling.

Steps to reproduce the bug

  1. Go to Windows Settings Page

Expected behavior

No response

Screenshots

No response

NuGet package version

None

Packaging type

No response

Windows version

No response

IDE

No response

Additional context

No response

castorix commented 2 months ago

You can use a Container like a transparent Grid For example, in this test, the Tooltip is displayed even when the Button is disabled :

        <Grid Margin="10, 10, 10, 10" Background="Transparent">
            <Button x:Name="btn1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0, 0, 0, 0" Width="60" Height="60"               
                    Click="btn1_Click" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                    FontFamily="Segoe UI Emoji" FontSize="40" Content="&#x1F4BE;" Padding="0, 0, 0, 0" >
            </Button>
            <ToolTipService.ToolTip>
                <ToolTip Content="This is a Tooltip" Placement="Bottom" Background="LightYellow" Foreground="Black"/>
            </ToolTipService.ToolTip>
        </Grid>
codendone commented 2 months ago

Same as #1149?

marcelwgn commented 1 week ago

Regarding the point of bubbling events, can you explain a little bit more what scenario and event you are encountering this with @Ajaiqmar ? With the following XAML, none of the events were raised:

<StackPanel 
    HorizontalAlignment="Center" 
    PointerPressed="StackPanel_PointerPressed" 
    Width="500" VerticalAlignment="Center">
    <Button Click="Button_Click" IsEnabled="False"/>
</StackPanel>

On the tooltip matter, I would agree with @codendone that this is the same ask as #1149

Ajaiqmar commented 1 week ago

Regarding the point of bubbling events, can you explain a little bit more what scenario and event you are encountering this with @Ajaiqmar ? With the following XAML, none of the events were raised:

<StackPanel HorizontalAlignment="Center" PointerPressed="StackPanel_PointerPressed" Width="500" VerticalAlignment="Center">

I noticed the bubbling, when having those disabled buttons inside a ListView Template, @marcelwgn.

Let's whip up a scenario, where I need to disable a button with an Icon inside a Data Template for a few ListView Items, i.e. Delete . In this case, I would still want the user to get the ToolTip and if we do show the tooltip then we should try restricting the ListView Item Click from firing when the disabled button is clicked upon.

We couldn't just remove the disabled button in view as it will cause a difference in UI across the ListView Items is what we thought. Open for your thoughts on this @marcelwgn . Could whip up a POC if you are not clear on what was mentioned, if need be @marcelwgn .

marcelwgn commented 2 days ago

Definitely see that removing the button is not an option for you. Unfortunately, I wasn't able to reproduce this with a quick project so if you could provide a repro project that would be great @Ajaiqmar !