Windowscommunitytoolkit: [uwp] Mouse.Cursor binding does not work

[jtorjo]

Describe the bug

xmlns:kituiext="using:Microsoft.Toolkit.Uwp.UI.Extensions"

I'm trying to bind the cursor, to be hand on the left side, and arrow on the right side of the control.
It does not work.

Steps to Reproduce

Steps to reproduce the behavior:

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:kituiext="using:Microsoft.Toolkit.Uwp.UI.Extensions" 
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
    <local:model/>
</Page.DataContext>

<Grid>
    <Grid Width="300" Height="300" PointerMoved="UIElement_OnPointerMoved" kituiext:Mouse.Cursor="{Binding cursor}" Background="Gray" >
    </Grid>
</Grid>
</Page>

private void UIElement_OnPointerMoved(object sender, PointerRoutedEventArgs e) {
    var grid = sender as Grid;
    var model = DataContext as model;
    var x = e.GetCurrentPoint(grid).Position.X ;
    model.cursor = x < 150 ? CoreCursorType.Hand : CoreCursorType.Arrow;
}

class model : INotifyPropertyChanged
{
    private CoreCursorType cursor_ = CoreCursorType.Arrow;
    public CoreCursorType cursor {
        get => cursor_;
        set {
            if (value == cursor_)
                return;
            cursor_ = value;
            on_property_changed();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void on_property_changed([CallerMemberName] string property_name = null) {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property_name));
    }
}

Expected behavior

The cursor should be hand on the left side, and arrow on the right side of the control.
Instead, if entering from left, the cursor is hand, and if entering from right, the cursor is arrow.

Environment

NuGet Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [x] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [x] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [ ] Insider Build (xxxxx)

Device form factor:
- [x] Desktop
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [x] 2019 (version: 16.3.4) 
- [ ] 2019 Preview (version: )

[michael-hawker]

@jtorjo the cursor extension is meant to change the mouse cursor back and forth when the mouse enters or exits the control it's attached to. It's not designed to change cursor dynamically on the same control based on a binding.

Could you describe the scenario you're trying to build in your app from your user's perspective?

[jtorjo]

Hi guys,

It's quite simple - I have a control that should have a "Hand" cursor, and "SizeWE" on the edges, to visually show it's resizeable.

Anyway, I had to code it, and implement it in PointerMoved, as a workaround, which is pretty much all I do, when porting WPF code to UWP.

Best,
John

[michael-hawker]

@jtorjo is there a reason you're not using GridSplitter as the gripper which provides the resize functionality for you? Or if you need custom functionality just creating a rectangle region within the Grid that uses the Mouse.Cursor extension property?

[jtorjo]

I need this cursor both on images, and on the "transitions" in between (the gray rounded rectangles).
To use GridSplitter, I would need to modify A LOT of code.

WPF has this natively, and the Mouse.Cursor is simply a workaround to the fact that the "designers" of UWP didn't think to add a Cursor property to Control.

So long story short, I do need to handle mouse movement, and update my cursor

[michael-hawker]

@jtorjo is there a reason the images and the transition rectangles can't use the cursor property over the grid itself? I feel like you can use the composition of your components and the Mouse.Cursor on multiple elements to solve your problem.

I'm not sure how much work it'd be to modify the behavior here, but it'd be a new feature.

[jtorjo]

@michael-hawker The images are an ItemsControl of ui_effect objects.
The transitions are an ItemsControl of ui_transition objects (on top of the previous one).

I know I've tried several things, but to me, the Mouse.Cursor is unreliable, when several overlapping objects use it.

I may be able to create 2 grids on each effect / transition - on their edges, and set the cursor for them (so the effect/transition would have a Hand cursor, and the edges would have a SizeWE cursor).

That may prove more trouble than it's worth - for now, I do understand that this is by design, and I'll know next time when I use it. Thanks for explaining it to me!

[michael-hawker]

Thanks for the great discussion @jtorjo, I'm sorry it couldn't be easier for you. Looks like a complex scenario beyond what we had originally envisioned for the extension. I can see where the overlapping objects would cause troubles as it's going to be based on where the mouse pointer is entering/exiting the objects.

Please feel free to file a feature request for the future, may make sense to file in the WinUI repo as it sounds like this is a WPF gap too.

[jtorjo]

@michael-hawker Again, many thanks for explaining this to me!
About the WPF - not sure what you mean by "gap", because in WPF it's working correctly. I ran into this issue when porting my code from WPF to UWP.

[michael-hawker]

@jtorjo sorry I mean that this is a gap in UWP for those coming from WPF, as you discovered. So, the WinUI repo would be the place to file an issue about adding a Cursor property back onto FrameworkElement.

[jtorjo]

@michael-hawker Got it, thanks!