Daily Demo: Silverlight Deep Zoom Slide Show Behavior

Deep Zooms are very useful for catalog systems or holiday photos. You can get a big impression of all your images, but when you want to step through each single picture, navigation could get a little bit challenging … until now. Here is a small behavior to step through each single photo in a deep zoom collection.

Live Preview

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
            x:Name="_home"
            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>
        <Button
            x:Name="_shuffle"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Width="53"
            Content="Shuffle"
            Margin="0,0,57,0">
            <i:Interaction.Triggers>
                <i:EventTrigger
                    EventName="Click">
                    <TheOliver_Controls:DeepZoomRandomImageArrangeBehavior
                        TargetName="_msi"
                        XOffset="1"
                        YOffset="1" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button
            x:Name="_slideShow"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Width="68"
            Content="Slideshow"
            Margin="0,0,114,0">
            <i:Interaction.Triggers>
                <i:EventTrigger
                    EventName="Click">
                    <TheOliver_Controls:DeepZoomSlideShowBehavior
                        TargetName="_msi" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

 

Sourcecode

 // 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;
using System.Windows.Controls;
using System.Windows.Interactivity;

namespace TheOliver.Controls
{
    public class DeepZoomSlideShowBehavior : TargetedTriggerAction<MultiScaleImage>
    {
        private MultiScaleImage _msi;
        private int _count = 0;
        private int _totalImages;

        protected override void Invoke(object o)
        {
            if (this._msi == null)
            {
                this._msi = this.Target;
                _totalImages = _msi.SubImages.Count;
            }

            if (_count < _totalImages)
            {
                ZoomOnImage(_count);
            }
            else
            {
                _count = 0;
                ZoomOnImage(_count);
            }
        }

        private void ZoomOnImage(int subImageIndex)
        {
            _count++;

            MultiScaleSubImage subImage = _msi.SubImages[subImageIndex];

            double scaleBy = 1 / subImage.ViewportWidth;

            Rect subImageRect =
                new Rect(-subImage.ViewportOrigin.X * scaleBy,
                    -subImage.ViewportOrigin.Y * scaleBy,
                    scaleBy,
                    (1 / subImage.AspectRatio) * scaleBy);

            if ((this._msi.Width / this._msi.Height) > subImage.AspectRatio)
            {
                double targetViewportWidth = subImageRect.Height * this._msi.AspectRatio;
                double targetPointX = (targetViewportWidth - subImageRect.Width) / 2;

                this._msi.ViewportOrigin = new Point(subImageRect.X - targetPointX, subImageRect.Y);
                this._msi.ViewportWidth = targetViewportWidth;
            }
            else
            {
                this._msi.ViewportWidth = subImageRect.Width;
                this._msi.ViewportOrigin = new Point(subImageRect.X, subImageRect.Y);
            }
        }
    }
}

 

Solutiondownload