Question

I have a bing map with this clip:

<my:Map.Clip>
     <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,450,250" />
</my:Map.Clip>

The map is in a ScrollViewer somewhere at the bottom and only half of it is visible.
The problem is that when I scroll up to reveal the entire map, the part of the map that was not visible is now black.

This problem doesn’t occur when I don’t have a clip on my map. It’s rendered correctly.
So is this a bug in the control or am I doing something wrong?
Anyone had this issue before?

Update: I have made a small sample project to demonstrate this: link. Also, while doing this I also noticed that the problem only occurs when the map control is inside a grid. If I place it straight in the ScrollViewer it works just fine.

Update: Setting a fixed height for the grid row doesn’t help. Also, putting the grid + map inside a stackpanel and then inside a scrollviewer doesn’t work. Any of you found anything to fix this?

Answer 1

On looking at your code, this has nothing to do with the map capturing the gestures rather than the ScrollViewer, the map maintains its original clip regardless of where the user initiates their scroll.

The reason for this behaviour is that the Map Silverlight control (and the WebBrowser control too) include a native rendering component. For example the WebBrowser has a TileHost as described in this article. For this reason, various Silverlight framework effects cannot be applied to the map, for example RenderTransforms.

To solve you issue you are going to have to force the map to re-render itself when the user scrolls. To do this, I locate the ScrollViewer vertical ScrollBar using Linq-to-VisualTree, then as the user scrolls apply a very very small zoom to the map. This will cause it to re-render:

using System.Linq;
using System.Windows;
using System.Windows.Controls.Primitives;
using LinqToVisualTree;
using Microsoft.Phone.Controls;

namespace BingMapClipIssueDemo
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ContentPanel_Loaded);
        }

        void ContentPanel_Loaded(object sender, RoutedEventArgs e)
        {

          ScrollBar verticalScroll = ContentPanel.Descendants<ScrollBar>()
                          .Cast<ScrollBar>()
                          .Where(sb => sb.Orientation == System.Windows.Controls.Orientation.Vertical)
                          .Single();

          verticalScroll.ValueChanged += (s, e2) =>
            {
              map.ZoomLevel = map.ZoomLevel + 0.00001;
            };

        }
    }
}

Just drop the code above into your example and it should work.