Transition Between Layers Online

This sample demonstrates a technique for creating a smooth visual transition when changing the visibility of a layer. The static CompositionTarget class represents the display surface of a Silverlight application. The CompositionTarget.Rendering event is used to determine when a frame of visuals are rendered. This sample uses the Rendering event to change layer visibility and opacity and create a smooth visual fade from one layer to another.

XAML

<UserControl x:Class="ArcGISWPFSDK.LayerTransitions"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot" Background="White">
        <esri:Map x:Name="MyMap" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="Streets" Visible="True" 
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            <esri:ArcGISTiledMapServiceLayer ID="Topo" Visible="False"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
            <esri:ArcGISTiledMapServiceLayer ID="Imagery" Visible="False"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
            <esri:ArcGISTiledMapServiceLayer ID="Oceans" Visible="False"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" />
            <esri:ArcGISTiledMapServiceLayer ID="NatGeo" Visible="False"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer" />
        </esri:Map>
        <Border HorizontalAlignment="Right" VerticalAlignment="Top" Padding="5" Margin="10"
                Background="White">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <StackPanel Orientation="Horizontal">
                <RadioButton IsChecked="true" Margin="5,0,0,0" GroupName="Layers" 
                             Content="Streets" Checked="RadioButton_Checked" />
                <RadioButton Margin="5,0,0,0" GroupName="Layers" 
                             Content="Topo" Checked="RadioButton_Checked" />
                <RadioButton Margin="5,0,0,0" GroupName="Layers" 
                             Content="Imagery" Checked="RadioButton_Checked" />
                <RadioButton Margin="5,0,0,0" GroupName="Layers" 
                             Content="Oceans" Checked="RadioButton_Checked" />
                <RadioButton Margin="5,0,0,0" GroupName="Layers"
                             Content="NatGeo" Checked="RadioButton_Checked" />
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

C#

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using ESRI.ArcGIS.Client;

namespace ArcGISWPFSDK
{
    public partial class LayerTransitions : UserControl
    {
        int progress = 0;
        Layer fromLayer;
        Layer toLayer;
        Layer pendingLayer;
        Layer animatingLayer;

        public LayerTransitions()
        {
            InitializeComponent();
            MyMap.Progress += MyMap_Progress;
        }

        private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            RadioButton radioButton = sender as RadioButton;
            if (MyMap != null)
            {
                Layer from = null;
                foreach (Layer layer in MyMap.Layers)
                    if (layer.Visible && layer.Opacity == 1)
                    {
                        from = layer;
                        break;
                    }

                string radioButtonContent = radioButton.GroupName;

                if (radioButtonContent != "")
                {
                    Layer to = MyMap.Layers[radioButton.Content.ToString()];

                    Fade(from, to);

                }

            }
        }

        private void Fade(Layer from, Layer to)
        {
            // If in process of animating
            if (animatingLayer != null)
            {
                pendingLayer = to;
                return;
            }
            pendingLayer = null;

            to.Opacity = 0;
            to.Visible = true;
            Dispatcher.BeginInvoke(new Action(() =>
            {
                if (progress >= 97)
                    StartFade(from, to);
                else // Wait for layer to load before fading to it
                {
                    EventHandler<ProgressEventArgs> handler = null;
                    handler = (s, e) =>
                    {
                        if (e.Progress >= 97)
                        {
                            MyMap.Progress -= handler;
                            StartFade(from, to);
                        }
                    };
                    MyMap.Progress += handler;
                }
            }));
        }

        private void StartFade(Layer from, Layer to)
        {
            fromLayer = from;
            toLayer = to;

            // If fromLayer is below toLayer, layer to animate is toLayer. 
            // If fromLayer is above toLayer, layer to animate is fromLayer. The toLayer opacity 
            // should be set to completely opaque. 
            if (MyMap.Layers.IndexOf(fromLayer) < MyMap.Layers.IndexOf(toLayer))
                animatingLayer = toLayer;
            else
            {
                animatingLayer = fromLayer;
                toLayer.Opacity = 1;
            }

            // Listen for when a frame is rendered
            CompositionTarget.Rendering += CompositionTarget_Rendering;
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            // Change the opacity of the fromLayer and toLayer
            double opacity = -1;
            if (animatingLayer == fromLayer)
            {
                opacity = Math.Max(0, fromLayer.Opacity - .05);
                fromLayer.Opacity = opacity;
            }
            else
            {
                opacity = Math.Min(1, toLayer.Opacity + .05);
                toLayer.Opacity = opacity;
            }

            // When transition complete, set reset properties and unhook handler 
            if (opacity == 1 || opacity == 0)
            {
                fromLayer.Opacity = 0;
                fromLayer.Visible = false;
                animatingLayer = null;
                CompositionTarget.Rendering -= CompositionTarget_Rendering;
                // If layer pending animation, start fading
                if (pendingLayer != null)
                    Fade(toLayer, pendingLayer);
                pendingLayer = null;
            }
        }

        // Track overall progress of loading map content 
        private void MyMap_Progress(object sender, ESRI.ArcGIS.Client.ProgressEventArgs e)
        {
            progress = e.Progress;
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports System.Windows
Imports ESRI.ArcGIS.Client
Imports System
Imports System.Windows.Media

Namespace ArcGISWPFSDK
    Partial Public Class LayerTransitions
        Inherits UserControl
        Private progress As Integer = 0
        Private fromLayer As Layer
        Private toLayer As Layer
        Private pendingLayer As Layer
        Private animatingLayer As Layer

        Public Sub New()
            InitializeComponent()
            AddHandler MyMap.Progress, AddressOf MyMap_Progress
        End Sub

        Private Sub RadioButton_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim radioButton As RadioButton = TryCast(sender, RadioButton)
            If MyMap IsNot Nothing Then
                Dim [from] As Layer = Nothing
                For Each layer As Layer In MyMap.Layers
                    If layer.Visible AndAlso layer.Opacity = 1 Then
                        [from] = layer
                        Exit For
                    End If
                Next layer

                Dim radioButtonContent As String = radioButton.GroupName
                If radioButtonContent <> "" Then
                    Dim [to] As Layer = MyMap.Layers(radioButton.Content.ToString())

                    Fade(from, [to])
                End If
            End If
        End Sub

        Private Sub Fade(ByVal [from] As Layer, ByVal [to] As Layer)
            ' If in process of animating
            If animatingLayer IsNot Nothing Then
                pendingLayer = [to]
                Return
            End If
            pendingLayer = Nothing

            [to].Opacity = 0
            [to].Visible = True
            Dispatcher.BeginInvoke(Sub()
                                       If progress >= 97 Then
                                           StartFade([from], [to])
                                       Else 'Wait for layer to load before fading to it
                                           Dim handler As EventHandler(Of ProgressEventArgs) = Nothing
                                           handler = Sub(s, e)
                                                         If e.Progress >= 97 Then
                                                             RemoveHandler MyMap.Progress, handler
                                                             StartFade([from], [to])
                                                         End If
                                                     End Sub
                                           AddHandler MyMap.Progress, handler
                                       End If
                                   End Sub)
        End Sub

        Private Sub StartFade(ByVal [from] As Layer, ByVal [to] As Layer)
            fromLayer = [from]
            toLayer = [to]

            ' If fromLayer is below toLayer, layer to animate is toLayer. 
            ' If fromLayer is above toLayer, layer to animate is fromLayer. The toLayer opacity 
            ' should be set to completely opaque. 
            If MyMap.Layers.IndexOf(fromLayer) < MyMap.Layers.IndexOf(toLayer) Then
                animatingLayer = toLayer
            Else
                animatingLayer = fromLayer
                toLayer.Opacity = 1
            End If

            ' Listen for when a frame is rendered
            AddHandler CompositionTarget.Rendering, AddressOf CompositionTarget_Rendering
        End Sub

        Private Sub CompositionTarget_Rendering(ByVal sender As Object, ByVal e As EventArgs)
            ' Change the opacity of the fromLayer and toLayer
            Dim opacity As Double = -1
            If animatingLayer Is fromLayer Then
                opacity = Math.Max(0, fromLayer.Opacity - 0.05)
                fromLayer.Opacity = opacity
            Else
                opacity = Math.Min(1, toLayer.Opacity + 0.05)
                toLayer.Opacity = opacity
            End If

            ' When transition complete, set reset properties and unhook handler 
            If opacity = 1 OrElse opacity = 0 Then
                fromLayer.Opacity = 0
                fromLayer.Visible = False
                animatingLayer = Nothing
                RemoveHandler CompositionTarget.Rendering, AddressOf CompositionTarget_Rendering
                ' If layer pending animation, start fading
                If pendingLayer IsNot Nothing Then
                    Fade(toLayer, pendingLayer)
                End If
                pendingLayer = Nothing
            End If
        End Sub

        ' Track overall progress of loading map content 
        Private Sub MyMap_Progress(ByVal sender As Object, ByVal e As ESRI.ArcGIS.Client.ProgressEventArgs)
            progress = e.Progress
        End Sub


    End Class
End Namespace