Flyout Navigation - Mouse hover

Question

Flyout Navigation - Mouse hover

Dani_S 4,171

Hi,

In continue to https://learn.microsoft.com/en-us/answers/questions/2202802/flyout-navigation-improvements?page=1#answer-1989782

How I support mouse hover when navigation on collection view ?

I want Custom Cursor hand when hovering over an item in collection view in menu in Desktop.

want solution to this collection view, not influence other collection views in my app.

How i set the behavior to grid



<CollectionView.ItemTemplate> <DataTemplate x:DataType="vm:FlyoutPageItem"> <Grid Padding="5,10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding IconSource}" /> <Label Grid.Column="1" Margin="20,0" Text="{Binding Title}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate>

Thanks,

Dani_S 4,171 Reputation points

2025-03-10T12:41:25.0733333+00:00

I want Custom Cursor when hovering over an item in collection view in Desktop.
Dani_S 4,171 Reputation points

2025-03-10T12:44:51.1+00:00

I want Custom Cursor hand when hovering over an item in collection view in menu in Desktop.
Dani_S 4,171 Reputation points

2025-03-10T13:09:27.3166667+00:00

I meant when hovering on item in menu - of collection view item the cursor is hand.
Dani_S 4,171 Reputation points

2025-03-11T00:56:40.3733333+00:00

I want solution to this collection view, not influence other collection views in my app.

1 answer

Your answer

Dani_S 4,171 Reputation points

2025-03-10T12:41:25.0733333+00:00

I want Custom Cursor when hovering over an item in collection view in Desktop.
Dani_S 4,171 Reputation points

2025-03-10T12:44:51.1+00:00

I want Custom Cursor hand when hovering over an item in collection view in menu in Desktop.
Dani_S 4,171 Reputation points

2025-03-10T13:09:27.3166667+00:00

I meant when hovering on item in menu - of collection view item the cursor is hand.
Dani_S 4,171 Reputation points

2025-03-11T00:56:40.3733333+00:00

I want solution to this collection view, not influence other collection views in my app.

Answer 1

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Microsoft External Staff

Hello,

used: xmlns:behavior="clr-namespace:GssdDesktopClient.MAUI.Behaviors" in MyRootPage.

but when i used behavior on grid in data templates is not recognized the >behavior:CursorBehavior.Cursor="Hand"

what do I miss?

Please change the settings of .net 9.0 android to the .net 9.0-windows at the top-right corner. enter image description here

Like this screenshot.

enter image description here

From Custom Cursor when hovering over View on Desktop #4552

You can see MauiCursor by VladislavAntonyuk for all platforms. You can add cursorExtensions for different platforms. Then create a CursorBehavior and add CursorProperty. You can control cursor is hand by local:CursorBehavior.Cursor="Hand", I set it to the VerticalStackLayout in the CollectionView

<CollectionView ItemsSource="{Binding LeaveSummarys}">
 <CollectionView.ItemTemplate>
   <DataTemplate>
   <Frame Padding="10" Margin="5" CornerRadius="10" BorderColor="Gray">
     <VerticalStackLayout  local:CursorBehavior.Cursor="Hand">
        <Label Text="{Binding Name}" FontSize="18" FontAttributes="Bold"/>
        <Label Text="{Binding TotalLeaveCount}" FontSize="16"/>
         <Label Text="{Binding LeaveTaken}" FontSize="16"/>
      </VerticalStackLayout>
   </Frame>
  </DataTemplate>
 </CollectionView.ItemTemplate>
</CollectionView>

Best Regards,

Leon Lu

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.

Dani_S 4,171 Reputation points

2025-03-11T06:12:20.44+00:00

How i set the behavior to grid <CollectionView.ItemTemplate> <DataTemplate x:DataType="vm:FlyoutPageItem"> <Grid Padding="5,10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding IconSource}" /> <Label Grid.Column="1" Margin="20,0" Text="{Binding Title}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Microsoft External Staff

Firstly, you need to add the local namespace in current Contentpage

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


             xmlns:local="clr-namespace:YourMauiApp"

             x:Class="MauiApp11.MainPage">

Then you can add local:CursorBehavior.Cursor="Hand" to your Gird.

<CollectionView.ItemTemplate>
 <DataTemplate x:DataType="vm:FlyoutPageItem">
 <Grid Padding="5,10"  local:CursorBehavior.Cursor="Hand"  >
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="30"/>
 <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <Image Source="{Binding IconSource}" />
 <Label Grid.Column="1" Margin="20,0" Text="{Binding Title}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" />
 </Grid>
 </DataTemplate>
 </CollectionView.ItemTemplate>

By the way, do not forget to add CursorBehavior.cs and yourproject/Platforms/Windows/CursorExtensions.cs

Dani_S 4,171

I have problem: SetCustomCursor not complied.

using GssdDesktopClient.Maui.Platforms.Windows;

namespace GssdDesktopClient.Maui.Behaviors

{

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, visualElement.Handler?.MauiContext ?? Application.Current?.Windows.LastOrDefault()?.Page?.Handler?.MauiContext);

        }

    }

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

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

}

}

Dani_S 4,171

My cursor extension:

using System.Reflection;

using Microsoft.Maui.Controls;

using Microsoft.Maui.Platform;

using Microsoft.UI.Input;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Input;

using Windows.UI.Core;

using GssdDesktopClient.Maui.Behaviors;

namespace GssdDesktopClient.Maui.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, new object[] { 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,

        };

    }

}

}

Dani_S 4,171 Reputation points

2025-03-11T08:56:36.23+00:00

Your quick answer will be appreciated.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Microsoft External Staff

If you just add CursorExtensions for windows platform. Please use conditional compilation like following code for your CursorBehavior.

#if WINDOWS
    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, Microsoft.Maui.Controls.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

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Reputation points Microsoft External Staff

2025-03-11T09:15:21.1066667+00:00

Your quick answer will be appreciated.

Please see my latest comment, I moved your additional information to main question. If you have some update, you can update question as well. Thanks for your understanding.
Dani_S 4,171 Reputation points

2025-03-11T09:20:44.49+00:00

I added the conditional compilation.

I got this error:

The type or namespace name 'Platforms' does not exist in the namespace 'GssdDesktopClient.Maui' (are you missing an assembly reference?)

Does this using is ok?

using GssdDesktopClient.Maui.Platforms.Windows;
Dani_S 4,171 Reputation points

2025-03-11T09:23:06.35+00:00

Your quick answer will be appreciated.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Reputation points Microsoft External Staff

2025-03-11T09:30:47.0966667+00:00
use conditional compilation when you use GssdDesktopClient.Maui.Platforms.Windows;;

#if WINDOWS using GssdDesktopClient.Maui.Platforms.Windows;; #endif
Dani_S 4,171 Reputation points

2025-03-11T09:56:02.9666667+00:00

Another problem:

I used: xmlns:behavior="clr-namespace:GssdDesktopClient.MAUI.Behaviors" in MyRootPage.

but when i used behavior on grid in data templates is not recognized the behavior:CursorBehavior.Cursor="Hand"

what do I miss?

Your quick answer will be appreciated.
Dani_S 4,171 Reputation points

2025-03-11T11:43:22.1566667+00:00

Your quick answer will be appreciated.
Dani_S 4,171 Reputation points

2025-03-11T12:10:53.41+00:00

Added screencast:https://app.screencast.com/WVaTV5EPvgl0I
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,606 Reputation points Microsoft External Staff

2025-03-12T02:22:16.5833333+00:00

Dani_S Please my updated answer. By the way, if you have additional information that need to be added. Please update your main question.

Share via

Flyout Navigation - Mouse hover

1 answer

Your answer