Deep Zoom - Highlighting the clicked SubImage

Having played with the Hard Rock demo extensively, I noticed that it is a little difficult to see which image is associated with the displayed metadata. In general, it is the centered image but it could get confusing sometimes. This could be alleviated if there is a highlight or a border around the image.

It's not that hard actually...

1. Changes to the XAML

<Grid x:Name="LayoutRoot">
 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="5"/>
  <RowDefinition Height="30"/>
  <RowDefinition Height="30"/>
 </Grid.RowDefinitions>
 
 <Border x:Name="msiBorder" Grid.Row="0" BorderThickness="1" BorderBrush="Black">
  <MultiScaleImage x:Name="msi" UseSprings="false" Margin="2,2,2,2"/>
 </Border>
 <Canvas Grid.Row="0" Margin="3,3,2,2">
  <Border x:Name="imageBorder" BorderThickness="2" BorderBrush="Black" Opacity="0" />
 </Canvas>

 ...

2. The code to show and hide the highlight on a image

public void ShowImageHighlight(int nSubImageIndex)
{    // Hightlight the image by drawing a border around it

    int borderWidth = 2;        // Setting the default border width to 2
    if (msi.ViewportWidth < 1)    // This adjusts for zoomed images where a border of 2 is insufficient
        borderWidth = (int) (borderWidth / msi.ViewportWidth);
        
    Rect borderRect = ExpandRect(msiLogicalToElementRect(GetSubImageRect(nSubImageIndex)), borderWidth);
    
    imageBorder.Width = borderRect.Width;
    imageBorder.Height = borderRect.Height;
    imageBorder.SetValue(Canvas.LeftProperty, borderRect.X);
    imageBorder.SetValue(Canvas.TopProperty, borderRect.Y);
    imageBorder.BorderThickness = new Thickness(borderWidth);
    imageBorder.Opacity = 1.0;
}

public void HideImageHighlight()
{
    imageBorder.Opacity = 0.0;
}

Rect msiLogicalToElementRect(Rect rect)
{
    return new Rect(msi.LogicalToElementPoint(new Point(rect.Left, rect.Top)), 
                    msi.LogicalToElementPoint(new Point(rect.Right, rect.Bottom)));
}

Rect ExpandRect(Rect rect, int expandBy)
{
    return new Rect(rect.Left - expandBy, rect.Top - expandBy, rect.Width + expandBy*2, rect.Height + expandBy*2);
}

3. The hooks to invoke the above code

int _clickedImageIndex = -1;

msi.MotionFinished += (sender, e) => { if (_clickedImageIndex >= 0) ShowImageHighlight(_clickedImageIndex); };

msi.MouseLeftButtonDown += (sender, e) => { _clickedImageIndex = -1; };
new MouseWheelHelper(this).Moved += (sender, e) => { _clickedImageIndex = -1; };

msi.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
{
    if (mouseButtonPressed && !dragInProgress)
    {
        Point p = this.msi.ElementToLogicalPoint(e.GetPosition(this.msi));
        int subImageIndex = SubImageHitTest(p);
        if (subImageIndex >= 0) {
            DisplaySubImageCentered(subImageIndex);
            _clickedImageIndex = subImageIndex;
        }

        bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
        if (shiftDown)  Zoom(0.5, e.GetPosition(this.msi));
        else            Zoom(2.0, e.GetPosition(this.msi));
    }
    mouseButtonPressed = false;
    dragInProgress = false;
};

I updated the previous example Dissecting Hard Rock Memorabilia and Silverlight Deep Zoom - Part 7 with this code so you can see how it works!