Edit

Mouse.Cursor attached property

  • Article

Warning

This docs page is outdated, please refer to the new one for the FrameworkElementExtensions type. The Mouse.Cursor attached property enables you to easily change the mouse cursor over specific Framework elements.

Try it in the sample app

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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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 Project

Mouse Sample Page. You can see this in action in the 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