Post
Ask Question

Mouse.Cursor Attached Property Extension In UWP

The Mouse.Cursor attached property enables you to easily change the mouse cursor over specific Framework elements. The property values are UniversalNo, Wait and Hand.

Mouse.Cursor property is from UWP Community Toolkit. The UWP Community Toolkit is a collection of extensions, helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use Mouse.Cursor attached property Extension in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

  1. Windows 10 (Recommended)
  2. Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/ )
  3. Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the Suitable Name for your App (UWPMouseCursor)->OK.

 

After Choosing the Target and minimum platform version your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the Project creates App.xaml and MainPage.xaml.

 

Step 2

First Update the Reference, Microsoft.Toolkit.UWP.UI with the latest version of Manage NuGet Packages

 

 Step 3

Add the following controls in design window for Mouse.Cursor attached property Extension feature view,

Add the TextBlock Control and change the Name and Text Property.

 

Add the two Border Controls, two Button controls and set the Mouse.Cursor attached properties like UniversalNo, Wait and Hand with namespace.

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

Border with extensions:Mouse.Cursor = "UniversalNo"

  1. <Border x:Name="BorUnivNoCur" Width="280" Height="120" Margin="355,196,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="UniversalNo" Background="LightCyan">  
  2.    <TextBlock x:Name="TblUnivNo" Margin="10,10,40,70" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Element with UniversalNo cursor" TextWrapping="Wrap" />  
  3. </Border>  

 

Border with extensions:Mouse.Cursor = "Wait"

  1. <Border x:Name="BorWaitcur" Width="280" Height="120" Margin="355,366,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="Wait" Background="LightPink">  
  2.    <TextBlock Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Element with Wait cursor" TextWrapping="Wrap" />  
  3. </Border>  

 

Button with no extensions

  1. <Button x:Name="btnnoccursor" Margin="20,196,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Button with no custom cursor" Width="293" Height="120" />  

 

Border with extensions:Mouse.Cursor = "Hand"

  1. <Button x:Name="btnhandcur" Margin="20,366,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="Hand"Content="Button with Hand cursor" Height="120" Width="293" />  

Note

Automatically the following code will be generated in XAML code view, while we are done in the design view.

  1. <Page x:Class="UWPMouseCursor.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPMouseCursor" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="124,96,0,0" Text="UWPMouse Cursor Property extension Demo" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />  
  4.         <Border x:Name="BorUnivNoCur" Width="280" Height="120" Margin="355,196,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="UniversalNo" Background="LightCyan">  
  5.             <TextBlock x:Name="TblUnivNo" Margin="10,10,40,70" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Element with UniversalNo cursor" TextWrapping="Wrap" /> </Border>  
  6.         <Border x:Name="BorWaitcur" Width="280" Height="120" Margin="355,366,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="Wait" Background="LightPink">  
  7.             <TextBlock Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Element with Wait cursor" TextWrapping="Wrap" /> </Border>  
  8.         <Button x:Name="btnnoccursor" Margin="20,196,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Button with no custom cursor" Width="293" Height="120" />  
  9.         <Button x:Name="btnhandcur" Margin="20,366,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" extensions:Mouse.Cursor="Hand" Content="Button with Hand cursor" Height="120" Width="293" /> </Grid>  
  10. </Page>  

 

Step 4

Deploy your app in Local Machine, and the output of the UWPMouseCursor is,

 

Summary

Now, you have successfully tested Mouse.Cursor attached property extension in XAML and UWP environment using Visual Studio 2017.


Similar Articles