How to handle display densities?


I’m trying to create some elements with primitives and I’ve found that when displaying them on an HDPI screen, it doesn’t handle well the calculations. The density for this screen sucks, because 1dp = 1.5px but it’s very common in low end Android cellphones.

I’m using this code:

  <StackPanel Margin="0,80">
    <Circle Width="20" Height="20" Alignment="Center" Margin="0,30">
      <Stroke Width="2" Color="#3F51B5" />
      <Circle Width="10" Height="10" Color="#3F51B5" Alignment="Center" />
    <Rectangle Height="2" Width="33.3%" Color="#3F51B5" />

And is producing this:


As you can see, the circles are not centered and the line, which is supposed to measure a perfect 3px (1.5 x 2) instead it does a strange antialiased height.

Is there something I need to wrap this to make it work? Thanks!


Looks like some calculation is doing snapping in the wrong space. Thanks for bringing this to our attention, an internal ticket has been filed.

No problem! In the meantime, do you have some quick fix to draw elements in this density?

Hmm no, I don’t think I have a quick fix off the top of my head, sorry!

Well, the great Anders (@duckers) came up with a solution. Using the SnapToPixels="false" property on the primitives, it gives you the expected behavior (in my example, align the circles).

It comes with a cost though, the circles will be a bit blurry but at least they are centered.