pointer Enter on desktop doesn't change my cursor the first time

Question

pointer Enter on desktop doesn't change my cursor the first time

Eduardo Gomez Romero 1,355

   <Label
       x:Name="ContactLbl"
       Grid.RowSpan="2"
       Grid.Column="1"
       FontFamily="Mat"
       FontSize="40"
       HorizontalOptions="EndAndExpand"
       Text="{x:Static helpers:IconFont.Email}"
       VerticalTextAlignment="Center">
       <Label.GestureRecognizers>
           <PointerGestureRecognizer
               PointerEnteredCommand="{Binding Path=ContactPointerEnteredCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}"
               PointerEnteredCommandParameter="{Binding Source={x:Reference ContactLbl}}"
               PointerExitedCommand="{Binding Path=ContactPointerExitedCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}"
               PointerExitedCommandParameter="{Binding Source={x:Reference ContactLbl}}" />
       </Label.GestureRecognizers>
   </Label>

    [RelayCommand]
    void ContactPointerEntered(Label emailLabel) {

#if WINDOWS || MACCATALYST
        emailLabel.SetCustomCursor(CursorIcon.Hand, emailLabel.Handler?.MauiContext);
#endif
        emailLabel.TextColor = Color.FromRgb(65, 105, 225);
    }

    [RelayCommand]
    void ContactPointerExited(Label emailLabel) {

        emailLabel.TextColor = Color.FromHex("#000000");
    }

1 answer

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

After testing, when changing icons with gestures, the issue of not changing the cursor style does occur for the first time written by Vladislav Antonyuk.

Did you refer to the blog called Setting a cursor for .NET MAUI VisualElement to modify the mouse style?

A Behavioral way to change the mouse style is mentioned in this Blog and it works as expected.

In order to set a custom cursor from XAML, let's create an attached property. Create a new file in the root of the project named CursorBehavior.cs and paste the following code:

public class CursorBehavior
{
    public static readonly BindableProperty CursorProperty = BindableProperty.CreateAttached("Cursor", typeof(CursorIcon), typeof(CursorBehavior), CursorIcon.Arrow, propertyChanged: CursorChanged);

    private static void CursorChanged(BindableObject bindable, object oldvalue, object newvalue)
    {
        if (bindable is VisualElement visualElement)
        {
            visualElement.SetCustomCursor((CursorIcon)newvalue, Application.Current?.MainPage?.Handler?.MauiContext);
        }
    }

    public static CursorIcon GetCursor(BindableObject view) => (CursorIcon)view.GetValue(CursorProperty);

    public static void SetCursor(BindableObject view, CursorIcon value) => view.SetValue(CursorProperty, value);
}

XAML:

<Label Text="test label" local:CursorBehavior.Cursor="Hand">
</Label>

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Eduardo Gomez Romero 1,355

Yes, I did, but I only Implemented it on Windows and Mac,

Mac

using AppKit;

using Microsoft.Maui.Platform;

using UIKit;

namespace DemyAI.Platforms.MacCatalyst {
    public static class CursorExtensions {

        public static void SetCustomCursor(this VisualElement visualElement, CursorIcon cursor, IMauiContext mauiContext) {

            ArgumentNullException.ThrowIfNull(mauiContext);
            var view = visualElement.ToPlatform(mauiContext);
            if (view.GestureRecognizers is not null) {

                foreach (var rognizers in view.GestureRecognizers.OfType<PointerUIHoverGestureRecognizer>()) {

                    view.RemoveGestureRecognizer(rognizers);
                }
            }

            view.AddGestureRecognizer(new UIHoverGestureRecognizer(r => {

                switch (r.State) {

                    case UIGestureRecognizerState.Began:
                        GetNSCursor(cursor).Set();
                        break;
                    case UIGestureRecognizerState.Ended:
                        NSCursor.ArrowCursor.Set();
                        break;
                    default:
                        break;
                }
            }));
        }

        static NSCursor GetNSCursor(CursorIcon cursor) {
            return cursor switch {

                CursorIcon.Hand => NSCursor.OpenHandCursor,
                CursorIcon.IBeam => NSCursor.IBeamCursor,
                CursorIcon.Cross => NSCursor.CrosshairCursor,
                CursorIcon.Arrow => NSCursor.ArrowCursor,
                CursorIcon.SizeAll => NSCursor.ResizeUpCursor,
                CursorIcon.Wait => NSCursor.OperationNotAllowedCursor,
                _ => NSCursor.ArrowCursor
            };
        }

        class PointerUIHoverGestureRecognizer : UIHoverGestureRecognizer {

            public PointerUIHoverGestureRecognizer(Action<UIHoverGestureRecognizer> action) : base(action) { }
        }
    }
}

Windows

using Microsoft.Maui.Platform;
using Microsoft.UI.Input;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Input;

using System.Reflection;

using Windows.UI.Core;

namespace DemyAI.Platforms.Windows {

    public static class CursorExtensions {

        public static void SetCustomCursor(this VisualElement visualElement, CursorIcon cursor, IMauiContext? mauiContext) {
            ArgumentNullException.ThrowIfNull(mauiContext);
            UIElement view = visualElement.ToPlatform(mauiContext);
            view.PointerEntered += ViewOnPointerEntered;
            view.PointerExited += ViewOnPointerExited;

            void ViewOnPointerExited(object sender, PointerRoutedEventArgs e) {
                view.ChangeCursor(InputCursor.CreateFromCoreCursor(new CoreCursor(GetCursor(CursorIcon.Arrow), 1)));
            }

            void ViewOnPointerEntered(object sender, PointerRoutedEventArgs e) {
                view.ChangeCursor(InputCursor.CreateFromCoreCursor(new CoreCursor(GetCursor(cursor), 1)));
            }
        }

        static void ChangeCursor(this UIElement uiElement, InputCursor cursor) {
            Type type = typeof(UIElement);
            type.InvokeMember("ProtectedCursor", BindingFlags.Public | BindingFlags.NonPublic
                | BindingFlags.SetProperty
                | BindingFlags.Instance,
                null, uiElement,
                [cursor]);
        }

        static CoreCursorType GetCursor(CursorIcon cursor) {
            return cursor switch {
                CursorIcon.Hand => CoreCursorType.Hand,
                CursorIcon.IBeam => CoreCursorType.IBeam,
                CursorIcon.Cross => CoreCursorType.Cross,
                CursorIcon.Arrow => CoreCursorType.Arrow,
                CursorIcon.SizeAll => CoreCursorType.SizeAll,
                CursorIcon.Wait => CoreCursorType.Wait,
                _ => CoreCursorType.Arrow,
            };
        }
    }
}

Enum

    public enum CursorIcon {

        Wait,
        Hand,
        Arrow,
        IBeam,
        Cross,
        SizeAll
    }
}

I am not creating the behavior in XAML, I only want this in Mac and Windows

    [RelayCommand]
    void ContactPointerEntered(Label emailLabel) {
#if WINDOWS || MACCATALYST
        emailLabel.SetCustomCursor(CursorIcon.Hand, emailLabel.Handler?.MauiContext);
#endif
        emailLabel.TextColor = Color.FromArgb("1f66e5");
    }
    [RelayCommand]
    void ContactPointerExited(Label emailLabel) {
        emailLabel.TextColor = Color.FromArgb("#000000");
    }

But it doesn't change the first time I hover my mouse

Using the Custom Cursor in Your Application


MyVisualElement.SetCustomCursor(CursorIcon.Hand, MyVisualElement.Handler?.MauiContext);
With this code, we set the cursor to a “Hand” style when the mouse pointer is over the “MyVisualElement” control.

My code change the cursor, but not the first time

but the rest of the time works fine

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-04-08T08:59:35.5866667+00:00
My code change the cursor, but not the first time

This should be an unknown bug about the WinUI platform.

You can easily set the mouse style in xaml only for desktop platforms, please refer to the following code and official documentation.

local:CursorBehavior.Cursor="{OnIdiom Desktop=Hand}"

Customize UI appearance based on the platform and device idiom

Eduardo Gomez Romero 1,355

the biggest problem here, is that because I only Implemented mac and windows, when I run in Android I get an error

                                local:CursorBehavior.Cursor="{OnIdiom Desktop=Hand}"

Severity	Code	Description	Project	File	Line	Suppression State	Details
Error	XLS0415	The attachable property 'Cursor' was not found in type 'CursorBehavior'.

#if WINDOWS
using DemyAI.Platforms.Windows;
#elif MACCATALYST
using DemyAI.Platforms.MacCatalyst;
#endif
namespace DemyAI {
    public class CursorBehavior {
#if WINDOWS || MACCATALYST
        public static readonly BindableProperty CursorProperty = BindableProperty.CreateAttached("Cursor", typeof(CursorIcon), typeof(CursorBehavior), CursorIcon.Arrow, propertyChanged: CursorChanged);
        private static void CursorChanged(BindableObject bindable, object oldvalue, object newvalue) {
            if (bindable is VisualElement visualElement) {
                visualElement.SetCustomCursor((CursorIcon)newvalue, Application.Current?.MainPage?.Handler?.MauiContext);
            }
        }
        public static CursorIcon GetCursor(BindableObject view) => (CursorIcon)view.GetValue(CursorProperty);
        public static void SetCursor(BindableObject view, CursorIcon value) => view.SetValue(CursorProperty, value);
    }
#endif
    }
}

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-04-09T03:17:21.01+00:00
This error is expected because the #if WINDOWS || MACCATALYST box selection range you use is too large, resulting in the Cursor Property being unavailable on mobile platforms. Actually, you just need to set SetCustomCursor to be Windows and Mac specific.

#if WINDOWS || MACCATALYST visualElement.SetCustomCursor((CursorIcon)newvalue, Application.Current?.MainPage?.Handler?.MauiContext); #endif
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-04-11T03:04:05.3433333+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Share via

pointer Enter on desktop doesn't change my cursor the first time

1 answer

Your answer