locked
Blurry Lines in XAML + WinRT RRS feed

  • Question

  • It appears that large line geometry is blurred in WinRT. To reproduce:

    1) Create a new project in VS2012 (Blank App template)

    2) Open the MainPage.xaml file and add the following inside the Grid element:

            <Canvas            
                Width="6000"
                Height="6000"
                Background="White">

                <Path
                    Stroke="Black"
                    StrokeThickness="1">
                    <Path.Data>
                        <LineGeometry
                            StartPoint="0,0"
                            EndPoint="6000,6000" />
                    </Path.Data>
                </Path>
            </Canvas>

    You'll see in the XAML viewer that the line is very blurry (as well as if you run the app). If you make the line smaller, for example, with EndPoint 100,100 then the line is not blurry.

    Does anyone know how to prevent lines from becoming blurred?

    Thanks!
    -Tom B.
    Wednesday, February 13, 2013 7:30 AM

Answers

  • The size of each shape is limited by the hardware you're running your app on. The lowest common denominator is 2048 x 2048. This is large enough that everything will look sharp as long as you keep each component of your UI at roughly the same scale as a typical screen. As soon as you try to draw things that are significantly larger than the screen, the shapes will be clamped to the maximum size supported on your hardware, and will be scaled up from that point to the size you requested. Since the shape is clamped to a lower resolution than what you requested, scaling it up causes it to look blurry. The simple answer is that you'll have to use smaller lines, or break your line up into separate smaller shapes, to try and keep the elements you're drawing at similar sizes to the screen resolution.
    Wednesday, February 13, 2013 8:02 PM

All replies

  • The size of each shape is limited by the hardware you're running your app on. The lowest common denominator is 2048 x 2048. This is large enough that everything will look sharp as long as you keep each component of your UI at roughly the same scale as a typical screen. As soon as you try to draw things that are significantly larger than the screen, the shapes will be clamped to the maximum size supported on your hardware, and will be scaled up from that point to the size you requested. Since the shape is clamped to a lower resolution than what you requested, scaling it up causes it to look blurry. The simple answer is that you'll have to use smaller lines, or break your line up into separate smaller shapes, to try and keep the elements you're drawing at similar sizes to the screen resolution.
    Wednesday, February 13, 2013 8:02 PM
  • I know this post is a bit old however this issue still persists. I've put together a workaround that manually clips the polyline to the bounds of the viewable area. For anyone else having this issue take a look at this blog post: http://rbrundritt.wordpress.com/2014/03/28/large-polyline-blurring-bug-workaround-for-windows-8/

    http://rbrundritt.wordpress.com

    Friday, March 28, 2014 4:59 PM