ScrollViewer Prevents Panning

[SamRosewall]

WORK AROUND:

For anyone that has been told they can't use the Esri Map within a ScrollViewer in Silverlight, I have found a work around and am posting it to help others. Let me know if this helps you.

Some people have had issues with the Click event when inside the Map that is nested in a scrollViewer. The fix for that can be found at:

http://forums.esri.com/Thread.asp?c=158&f=2455&t=291951 

It is basically:

private void MyMap_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
 e.Handled = false; 
}

Now for the part that I figured out through trial and error. The PANNING problem. For those of you that have placed a map within a scrollViewer you quickly realize that you lose the panning functionality of the Map and the forums out there currently point to the fact that this is not supported and no current work arounds are available. So until this is supported, here is my code and hopefully it will help someone else.

Start by puttin the ScrollViewer around the Grid that you are trying to let expand and contract dynamically based on the dynamic content within it. Then on the view xaml file you will need the following. Of course the enhancements and binding is optional. I'm using MVVM. I also removed alot of design code here and made it far more generic for demo purposes.

<ScrollViewer>
<Grid>
<esri:Map Grid.Row="1"  Layers="{Binding VisibleLayers}" WrapAround="True" MouseMove="StateTerritoryMap_MouseMove" MouseLeftButtonUp="StateTerritoryMap_MouseLeftButtonUp" MouseLeftButtonDown="StateTerritoryMap_MouseLeftButtonDown" x:Name="StateTerritoryMap" Loaded="StateTerritoryMap_Loaded"/>
<ItemsControl Grid.Row="2" ItemsSource="{Binding TerritoryManagerRegionalTerritoryViewList, Mode=TwoWay}" />
</Grid>
</ScrollViewer>

Now for the Code Behind:

//Members
        private bool isMouseLeftButtonDown;
        private double originalMouseLeftButtonDownXCoord;
        private double originalMouseLeftButtonDownYCoord;
//Ref Members
        private MapPoint originalMapPoint;

        private void StateTerritoryMap_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            isMouseLeftButtonDown = true;

            originalMapPoint = StateTerritoryMap.Extent.GetCenter();
            MapPoint mp = StateTerritoryMap.ScreenToMap(new Point(e.GetPosition(StateTerritoryMap).X, e.GetPosition(StateTerritoryMap).Y));

            originalMouseLeftButtonDownXCoord = mp.X;
            originalMouseLeftButtonDownYCoord = mp.Y;
        }
        private void StateTerritoryMap_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isMouseLeftButtonDown = false;
        }
        private void StateTerritoryMap_MouseMove(object sender, MouseEventArgs e)
        {
            if (isMouseLeftButtonDown)
            {
                Point p = new Point(e.GetPosition(StateTerritoryMap).X, e.GetPosition(StateTerritoryMap).Y);
                MapPoint mp = StateTerritoryMap.ScreenToMap(p);

                double xDiff = originalMouseLeftButtonDownXCoord - mp.X;
                double yDiff = originalMouseLeftButtonDownYCoord - mp.Y;

                MapPoint newPoint = new MapPoint(originalMapPoint.X + xDiff, originalMapPoint.Y + yDiff);

                StateTerritoryMap.PanDuration = new TimeSpan(0, 0, 0, 0, 500);
                StateTerritoryMap.PanTo(newPoint);
            }
        }

I have left out my logic for allowing multiple selection using the Ctrl key and my wiring and unwiring of additional map layers. However, hopefully this helps some of you avoid the hastle that I went through to get this functioning. You can change the PanDuration if you need to adjust the smoothness of the Pan. It is subjective to the refresh rate of the monitor of course.

If anyone has any questions, I will try to help out, but at least wanted to get this example out there for anyone else that needs to allow a mapping page to expand vertically or horizontally based on content but doesn't want to lose the Map functionality and doesn't want to fix the Map permanently in one place while scrolling the rest of the page. (Which is where I started, but needed more functionality).

Sam