[BUG?] unable to set cursor type to Hand in a AppBarButton (WINUI3)

[vmiguelangmsft]

Hi everyone! 👋

I've been working on a project where I need to customize the cursor type for an AppBarButton and MenuFlyoutItem to a Hand cursor. I've looked through the official documentation but haven't been able to find the specific information on how to achieve this.

To give you a bit more context, I'm developing a user interface where it's important for the AppBarButton to clearly indicate it's clickable, hence the need for a Hand cursor. I've tried a few different approaches, but none seem to work as expected.

for instance the code below makes the icon in a AppBarButton.Flyout to have a inconsistent behavior.

public class CustomAppBarButton : AppBarButton
{
    public CustomAppBarButton():base()
    { 
        ProtectedCursor = InputSystemCursor.Create(InputSystemCursorShape.Hand);
    }
}

<local:CustomAppBarButton x:Name="ShareButton" x:Uid="ShareButton" Foreground="{ThemeResource TextFillColorPrimaryBrush}"
          Width="42">
    <local:CustomAppBarButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedRight">
            <MenuFlyout.SystemBackdrop>
                <MicaBackdrop/>
            </MenuFlyout.SystemBackdrop>                                
            <MenuFlyoutItem Text="X" Command="{x:Bind ViewModel.ShareClickCommand}">
                <MenuFlyoutItem.Icon>
                    <FontIcon FontFamily="{StaticResource glyphs}" Glyph="&#xe900;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>
        </MenuFlyout>
    </local:CustomAppBarButton.Flyout>
    <ToolTipService.ToolTip>
        <ToolTip x:Uid="ShareAppBarButtonTooltip" Placement="Bottom"></ToolTip>
    </ToolTipService.ToolTip>
    <FontIcon Glyph="&#xE72D;" FontFamily="{StaticResource SymbolThemeFontFamily}"/>
</local:CustomAppBarButton>

Does anyone have experience with this or know where I can find the relevant documentation? Any guidance or examples would be greatly appreciated! 😊

Thanks in advance for your help!

[ghost1372]

Cursor property is a protected property.
But you can use my helper method to change cursor for any uielement:

GeneralHelper.ChangeCursor(element, InputSystemCursor.Create(InputSystemCursorShape.Hand));

https://github.com/ghost1372/DevWinUI/blob/main/dev/DevWinUI/Helpers/GeneralHelper.cs

[vmiguelangmsft]

Cursor property is a protected property. But you can use my helper method to change cursor for any uielement:

GeneralHelper.ChangeCursor(element, InputSystemCursor.Create(InputSystemCursorShape.Hand));

https://github.com/ghost1372/DevWinUI/blob/main/dev/DevWinUI/Helpers/GeneralHelper.cs

Thanks for the helper... it works perfectly for Buttons and AppBarButtons however I also want to use it in a MenuFlyoutItem, the property gets the change but the UI does not reflect the new cursor.. have you had this issue before @ghost1372 ?

<AppBarButton.Flyout>
    <MenuFlyout Placement="BottomEdgeAlignedRight">
        <MenuFlyout.SystemBackdrop>
            <MicaBackdrop/>
        </MenuFlyout.SystemBackdrop>                                
        <MenuFlyoutItem Text="X" Command="{x:Bind ViewModel.ShareClickCommand}">
            <MenuFlyoutItem.Icon>
                <FontIcon FontFamily="{StaticResource glyphs}" Glyph="&#xe900;" />
            </MenuFlyoutItem.Icon>
        </MenuFlyoutItem>
    </MenuFlyout>
</AppBarButton.Flyout>

thank you

[ghost1372]

I didn't test on MenuFlyoutItem. And I don't know about it.

[karkarl]

Thanks for chiming in @ghost1372.

There's also this discussion thread in WindowsAppSDK - perhaps this can work as well: microsoft/WindowsAppSDK#1816

[vmiguelangmsft]

Thanks @karkarl but MenuFlyoutItem does not work even tried to subclass it.