Mouse.Cursor attached property

The Mouse.Cursor attached property enables you to easily change the mouse cursor over specific Framework elements.

Syntax

<Page ...
     xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions">

<UIElement extensions:Mouse.Cursor="Hand"/>

Properties

Property Type Description
Mouse.Cursor CoreCursorType Set cursor type when mouse cursor over a Framework elements

Example

Here is a example of setting Mouse.Cursor

<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.MouseCursorPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Border extensions:Mouse.Cursor="Hand"
	        Width="220" Height="120" Background="DeepSkyBlue"
	        HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Page>

Note

Even though Microsoft recommends in UWP Design guidelines hover effects instead of custom cursors over interactive elements, custom cursors can be useful in some specific scenarios.

Limitations

Because the UWP framework does not support metadata on Attached Properties, specifically the FrameworkPropertyMetadata.Inherits flag, the Mouse.Cursor might not work properly in some very specific XAML layout scenarios when combining nested FrameworkElements with different Mouse.Cursor values set on them.

Sample Code

Mouse Sample Page. You can see this in action in Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.Extensions
NuGet package Microsoft.Toolkit.Uwp.UI

API