Daily Demos: Silverlight Deep Zoom Navigate Home Behavior

A common used feature in Deep Zoom Images is the “Home” Feature. If you zoom deep into an image you might get lost ;-). But don’t be afraid. The following behavior applied to you MultiScaleImage bring you back to the origin position (Home) of your image.

Livepreview

XAML-Code

 <UserControl
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:TheOliver_Controls="clr-namespace:TheOliver.Controls"
    x:Class="DeepZoomMouseBehavior.MainPage"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <TextBlock
            Text="Deep Zoom Sample" />
        <MultiScaleImage
            x:Name="_msi"
            Source="Images/dzc_output.xml"
            Margin="0,19,0,0">
            <i:Interaction.Behaviors>
                <TheOliver_Controls:DeepZoomBehavior />
            </i:Interaction.Behaviors>
        </MultiScaleImage>
        <Button
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Width="53"
            Content="Home">
            <i:Interaction.Triggers>
                <i:EventTrigger
                    EventName="Click">
                    <TheOliver_Controls:DeepZoomNavigateHomeBehavior
                        TargetName="_msi" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

Sourcecode for Behavior

 // Copyright © Microsoft Corporation.  All Rights Reserved.
// This code released under the terms of the 
// Microsoft Public License (MS-PL, https://opensource.org/licenses/ms-pl.html.)

using System.Windows.Interactivity;
using System.Windows;
using System.Windows.Controls;

namespace TheOliver.Controls
{
    public class DeepZoomNavigateHomeBehavior : TargetedTriggerAction<MultiScaleImage>
    {
        MultiScaleImage msi;

        protected override void Invoke(object parameter)
        {
            msi = this.Target as MultiScaleImage;
            
            msi.ViewportWidth = 1;
            msi.ViewportOrigin = new Point(0, 0);
        }
    }
}

Solutiondownload