Clipped Bing Map won't refresh in a ScrollViewer? - windows-phone-7.1

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

You should not include a Bing Map control within a ScrollViewer or Pivot, Panorama or any other control that captures pan / scroll gestures. This will lead to a very poor user-experience because the user will not know whether the gesture is going to be captured by the map or the hosting control. What I think is happening is that when you scroll, you are not scrolling the ScrollViewer, rather, you are panning the map.

Answer 2

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.

Answer 3

Try using the Static Bing Maps API instead of the Bing Map control if you don't want the user to interact with the Map
http://msdn.microsoft.com/en-us/library/ff701724.aspx