New clothes for the mouse of the Silverlight puzzle game

In this article, we will beautify the mouse pointer and put on a special vest. You can select Image or Path for its style source. You can use Microsoft Expression Design to Design a mouse pointer style.

Let's take a look at the effect of replacing the mouse pointer with a new one:

 

1. Add the mouse pointer image to the Images Folder:

2. Create in InteractivityMouseCursorFolder, and addMouseCursorBehavior,NameResolvedEventArgs,NameResolverClass:

3In the NameResolver class, the most important thing is the UpdateObjectFromName method, which combines the CursorName attribute with the mouse pointer object:

private void UpdateObjectFromName(DependencyObject oldObject){   DependencyObject resolvedObject = null;   this.ResolvedObject = null;   if (this.NameScopeReferenceElement != null)   {      if (!IsElementLoaded(this.NameScopeReferenceElement))      {          this.NameScopeReferenceElement.Loaded += 
new RoutedEventHandler(this.OnNameScopeReferenceLoaded);          this.PendingReferenceElementLoad = true;          return;      }      if (!string.IsNullOrEmpty(this.Name))      {          FrameworkElement actualNameScopeReferenceElement = 
this.ActualNameScopeReferenceElement;          if (actualNameScopeReferenceElement != null)          {             resolvedObject = actualNameScopeReferenceElement.FindName(this.Name) 
as DependencyObject;          }      }   }   this.HasAttempedResolve = true;   this.ResolvedObject = resolvedObject;   if (oldObject != this.Object)   {      this.OnObjectChanged(oldObject, this.Object);   }}

4. The MouseCursorBehavior class contains the CursorName, OffsetX, and OffsetY attributes, which are used to set the mouse pointer in Blend:

public static readonly DependencyProperty CursorNameProperty =   DependencyProperty.Register("CursorName", typeof(string), typeof(MouseCursorBehavior),   new PropertyMetadata(new PropertyChangedCallback(OnCursorNameChanged)));public static readonly DependencyProperty OffsetXProperty =  DependencyProperty.Register("OffsetX", typeof(double), typeof(MouseCursorBehavior), null);public static readonly DependencyProperty OffsetYProperty =  DependencyProperty.Register("OffsetY", typeof(double), typeof(MouseCursorBehavior), null);

And MouseEnter, MouseLeave, and MouseMove events:

private void AssociatedObject_MouseEnter(object sender, MouseEventArgs e){   if (!this.IsCursorNameSet)      return;   FrameworkElement cursor = Cursor as FrameworkElement;   cursor.IsHitTestVisible = false;   cursor.Visibility = Visibility.Visible;   if (CursorStack.Count > 0 && CursorStack.Peek() != cursor)   {      CursorStack.Peek().Visibility = Visibility.Collapsed;   }   if (!CursorStack.Contains(cursor))      CursorStack.Push(cursor);   AssociatedObject.Cursor = Cursors.None;   this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);}private void AssociatedObject_MouseLeave(object sender, MouseEventArgs e){   if (!this.IsCursorNameSet)      return;   FrameworkElement cursor = Cursor as FrameworkElement;   cursor.Visibility = Visibility.Collapsed;   CursorStack.Pop();   if (CursorStack.Count > 0)   {      CursorStack.Peek().Visibility = Visibility.Visible;   }   this.AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);   AssociatedObject.Cursor = null;}private void AssociatedObject_MouseMove(object sender, MouseEventArgs e){   if (!this.IsCursorNameSet)      return;   FrameworkElement cursor = Cursor as FrameworkElement;   Point mousePosition = e.GetPosition(null);   cursor.Margin = new Thickness(mousePosition.X + OffsetX, mousePosition.Y + OffsetY, 0, 0);}

5. After adding the above three classes and re-compiling them, we will return to the Blend and add a new Behavior for UserControl->MouseCursorBehavior:

6Add the mouse pointer image in LayoutRoot and name itCursorArrow:

Place it above GameScreen, Left is set0, Top is set-50:

7. Select the added MouseCursorBehavior and set CursorName to the mouse pointer name cursorArrow and OffsetY to 50 (because it has a-50 deviation from LayoutRoot ):

Run the program to see the new mouse pointer effect. Download the source code: