Large Polyline Blurring Bug Workaround for Windows 8

Recently I wrote a blog post on How to Create Custom Shapes in Windows Store Apps. This post was originally targeted at Windows Store apps using Bing Maps. The custom shapes consisted of creating a class that extends from the Canvas class and then using the standard shapes that are in the Windows.UI.Xaml.Shapes namespace to create your custom shape. Since these were being use in Bing Maps the points for the lines would be recalculated as the map was panned or zoomed. When the map is zoomed in a lot the data points for the lines become very far apart. One person on the Bing Maps forums noticed that as they zoomed in the line became blurry. Looking into this I found several other forum posts reporting similar issues. It ends up that Windows 8 has renders shapes until either their width or height is 2048 pixels in size, after than Windows 8 scales the shape like an image. Here is a screenshot of what this issue looked like:

The logically solution was to clip the polyline to bounds of the viewable area. Unfortunately using the Clip property of the Polyline didn’t make a difference. The next thing to do was to try manually clipping the polyline by calculating the points of intersection with the bounds of the viewable area. While searching around for a good code sample on how to calculate the intersection of two polylines I stumbled on this blog post. This blog post had a good bit of code for calculating the point of intersection. I then modified this to calculate the line segments of the polyline that are within viewable area. After getting this working and testing I found that the rendering issue was resolved. Here is a screenshot of the my modified polyline using the same data points as the previous one.

I have upload the full source code for my workaround to the MSDN code samples here.