CustomCursors in Windows 8 CSharp Metro Applications

CustomCursors in Windows 8 CSharp Metro Applications

Rate This
  • Comments 5

ocypode cursor crab from west africa

Recently I came across the question: "I want to change the cursor in my Windows 8 Metro style application to a custom cursor I've designed. So, how can I use the custom cursor in metro app ? The Windows.UI.Core.CoreCursorType.Custom parameter for the Windows.UI.Core.CoreCursor constructor seems to indicate I can do this but how can it be accomplished?"

So after some tinkering around and putting together a few hints, I've put together a step by step route to adding your own custom cursors to your Windows 8 Metro Application. The end product will be a CSharp Metro application consuming a cursor in a .RES file generated by a C++ Metro DLL application. We'll even use some notepad. Hold on for a bumpy ride.  Want a VB one email me and I'll figure it out!

smiley

CREATE A CUSTOM CURSOR

  1. Open Visual Studio 2012

  2. Create a Metro DLL project by clicking File New Project => Visual C++ => DLL (Metro Style Apps)

  3. Name the project "MyCustomCursors"

  4. Add a resource file to the project. [right-mouse] the project name "MyCustomCursors" => Add New Item => Visual C++ => Resource File (.rc)

  5. Name the resource file "MyResources.rc"

  6. Add a cursor the the resource. Right mouse "Resource Files" => Add Resource => Cursor => New

  7. Modify the cursor by clicking the Pen, then the white square and draw something on it. You can see my fine artwork to the right.

  8. Now lets rename to the cursor to something friendlier. Click into Resource Files => MyResources.rc

  9. Right mouse on "IDC_CURSOR1". Hit F4 to bring up the properties window for a Cursor Node. Rename the cursor. I renamed mine to "IDC_SMILEY". You could also choose to save the cursor into another filename here if you like by changing the filename in the Cursor Node dialog.

  10. Now lets find out our resource id for our cursor. Double-click on "resource.h". Visual Studio may want to save and close some files, let it. resource.h will open up in a text editor Window.

  11. Look for your IDC_SMILEY. Write down the resource number for your cursor. Mine was 101.

  12. Close all Windows (just for safety).

  13. Set the Build type from Debug to Release.

  14. Build the project.

  15. We now have a MyResources.res file which contains our custom cursor located in (at least on my machine) C:\dev\win8\customcursor\MyCustomCursors\Release .

INTEGRATE OUR CURSOR

  1. Create a new CSharp Visual Studio 2012 Metro Style blank application named "CustomCursorDemo"

  2. Add the existing item MyResource.res to the CustomCursorDemo project by [right-mouse]ing the project name, clicking "Add Existing Item" and finding the .res file.

  3. Close Visual Studio

  4. Open CustomCursorDemo.csproj in NOTEPAD. Add a Win32Resource group to the first PropertyGroup in the .csproj and point it to our resource file, as below.  [ thanks to Aaron Stebner's blog for this pointer, it made this article happen ]

  5. Close NOTEPAD.

  <PropertyGroup>
    <Win32Resource>MyResources.res</Win32Resource>
    ...
  </PropertyGroup>

USE OUR CUSTOM CURSOR

  1. Open up the CustomCursorDemo.sln you created in Visual Studio 2012

  2. Modify the main grid in MainPage.xaml as follows:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Grid.Row="0">
                <Button Content="Change Cursor" x:Name="Button_ChangeCursor" Click="Button_ChangeCursor_Click_1" Style="{StaticResource TextButtonStyle}" Margin="10" />
                <Button Content="Load Custom Cursor" x:Name="Button_CustomCursor" Click="Button_CustomCursor_Click_1" Style="{StaticResource TextButtonStyle}" Margin="10"/>
                <Button Content="Restore Cursor" x:Name="Button_RestoreCursor" Click="Button_RestoreCursor_Click_1" Style="{StaticResource TextButtonStyle}" Margin="10"/>
            </StackPanel>
    </Grid>

ADD IN OUR CODE
Modify MainPage.xaml.cs and add the following methods:

        private void Button_ChangeCursor_Click_1(object sender, RoutedEventArgs e)
        {
            Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Hand, 0 );
        }

        private void Button_RestoreCursor_Click_1(object sender, RoutedEventArgs e)
        {
            Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Arrow,0);
        }

        private void Button_CustomCursor_Click_1(object sender, RoutedEventArgs e)
        {
            Window.Current.CoreWindow.PointerCursor = 
new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Custom, 101); }

Now hit F5 to give the code a run. When you click change cursor, the cursor changes to the built in "hand". When you click "restore" the cursor changes to a pointer. And when you click "custom" we get the cursor we created in C++, running in a CSharp Windows 8 Metro application. Enjoy!

got cursor!

RESOURCES
Full source code ( C++ .res and CSharp Demo ) - devfish downloads
CoreCursor on MSDN - http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br208206.aspx#constructors
Working with Resource Files ( VS2005 ) - http://msdn.microsoft.com/en-US/library/zabda143(v=vs.80).aspx
Aaron Stebner - How to build a managed assembly that contains Win32 resources using Visual Studio 2005 - http://blogs.msdn.com/b/astebner/archive/2006/02/28/541036.aspx
Building a Windows 8 App in 30 Days (tutorials) - GenerationApp

 

DISCLAIMER:

The sample code described herein is provided on an "as is" basis, without warranty of any kind, to the fullest extent permitted by law. Both Microsoft and I do not warrant or guarantee the individual success developers may have in implementing the sample code on their development platforms or in using their own Web server configurations.
Microsoft and I do not warrant, guarantee or make any representations regarding the use, results of use, accuracy, timeliness or completeness of any data or information relating to the sample code. Microsoft and I disclaim all warranties, express or implied, and in particular, disclaims all warranties of merchantability, fitness for a particular purpose, and warranties related to the code, or any service or software related thereto.

Microsoft and I shall not be liable for any direct, indirect or consequential damages or costs of any type arising out of any action taken by you or others related to the sample code.

Leave a Comment
  • Please add 8 and 3 and type the answer here:
  • Post
  • THANK YOU!! This tutorial was a life saver for me. The "None" cursor was yanked from Metro, so I needed a custom cursor to replace it, but it wasn't obvious how to do it. Readers should note that Visual Studio Express does not include the capability of creating a resource file, so you'll have to use something else for that task. I used my old Borland C++ IDE, but a tool like ResEdit should do the job just as well.

  • Used to be a Borland Certified Trainer "back in the day".  Good move to keep the old disks around.

    Glad you enjoyed the article.  I'm going to post out how to consume them in html/winjs, c++, and vb shortly.

  • Great article! Worked perfect for me! Thanks a lot!

  • @sillander - fantastic.  I love hearing from folks when something works for them.

  • Thanks for this tutorial, it helped me a lot!

    By the way, do you know of any way to replace the cursor to one that is bigger than 32x32? Thanks!

Page 1 of 1 (5 items)