Posted on

AutoScroller for UWP ScrollViewer

I recently published a couple of open source projects on NuGet and GitHub. One is UWP.AutoScroller. It auto-scrolls a UWP ScrollViewer when an element within it is dragged against its edge. It’s ported from a similar tool I wrote for Silverlight some time ago. 

I simplified its functionality. The Silverlight version also allowed you to programmatically scroll the ScrollViewer. This is not included in the new version – you just enable or disable the basic function.

I also simplified the code. In this version, handlers are added to events of the ScrollViewer itself instead of on elements within it. This is a simpler and more efficient approach.

Further information is in the project readme and the nuget documentation.

https://github.com/peterdongan/AutoScroller

https://www.nuget.org/packages/UWP.AutoScroller/

 

 

Posted on

‘Hand’ Cursor and Website Icons

When you hover over a UI element and the cursor changes, this is an implementation of the Cursor Invitation design pattern. It indicates to the user that the UI element may be interacted with. The convention is to use it only when the interaction may be non-obvious, so it’s not used with standard buttons.

I was wondering if the convention was to use it with buttons in the form of icons. I couldn’t find anything about it online, so I looked at some Websites using icon-buttons to see what the consensus was. In all examples I found, hand cursors were used for icon buttons. This is logical, since not every icon on every Webpage is interactive. This isn’t consistent with Windows, where the cursor doesn’t change over icons. (This is also logical – every icon in Windows is interactive by default, so the extra prompt is unnecessary.)

Icon button at bing.com
Icon button at bing.com

It’s very easy to implement this in Silverlight – in both XAML and code-behind. You can just set the cursor property to the hand cursor.Eg:

XAML:
<Grid x:Name="LayoutRoot" Cursor="Hand">

C#:
target.Cursor = Cursors.Hand;

Even better, setting IsEnabled to false stops the cursor change from occurring  – so there’s no need to change the cursor property manually when the button is disabled.