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?