Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for .NET

Swipe

Download Samples Repository

Description

Shows how to swipe one map over another.

"Desktop" "Store" "Phone" Available for Desktop, Store, Phone

Sample Code

<UserControl
    x:Class="ArcGISRuntime.Samples.Desktop.SwipeMap"
    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/runtime/2013">

    <Grid x:Name="layoutRoot">
        <esri:MapView x:Name="mapStreets" WrapAround="True">
            <esri:Map>
                <esri:ArcGISTiledMapServiceLayer
                    ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            </esri:Map>
        </esri:MapView>

        <esri:MapView x:Name="mapImagery" WrapAround="True" IsHitTestVisible="False">
            <esri:Map>
                <esri:ArcGISTiledMapServiceLayer
                    ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
            </esri:Map>
        </esri:MapView>

		<Thumb x:Name="thumb" Background="Blue" HorizontalAlignment="Left" Width="16" DragDelta="Thumb_DragDelta"/>

		<Border Background="White" BorderBrush="Black" BorderThickness="1"
				HorizontalAlignment="Right" VerticalAlignment="Top"
				Margin="30" Padding="20" IsHitTestVisible="False">
			<Border.Effect>
				<DropShadowEffect/>
			</Border.Effect>
			<TextBlock TextAlignment="Center" Text="Drag the splitter to swipe." FontSize="14" />
        </Border>
    </Grid>
</UserControl>
using System;
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace ArcGISRuntime.Samples.Desktop
{
    /// <summary>
    /// Shows how to swipe one map over another.
    /// </summary>
    /// <title>Swipe</title>
    /// <category>Mapping</category>
    public sealed partial class SwipeMap : UserControl
    {
        public SwipeMap()
        {
            this.InitializeComponent();

            thumb.RenderTransform = new TranslateTransform() { X = 0, Y = 0 };
            mapImagery.Clip = new RectangleGeometry() { Rect = new Rect(0, 0, 0, 0) };

            mapStreets.ExtentChanged += mapStreets_ExtentChanged;
        }

        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            try
            {
                var transform = (TranslateTransform)thumb.RenderTransform;
                transform.X = Math.Max(0, Math.Min(transform.X + e.HorizontalChange, this.ActualWidth - thumb.ActualWidth));
                mapImagery.Clip = new RectangleGeometry() { Rect = new Rect(0, 0, transform.X, this.ActualHeight) };
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
            }
        }

        private void mapStreets_ExtentChanged(object sender, EventArgs e)
        {
            try
            {
                if (mapImagery.Extent != null)
                    mapImagery.SetView(mapStreets.Extent);
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
            }
        }
    }
}
Feedback on this topic?