{"id":398,"date":"2013-01-03T21:03:26","date_gmt":"2013-01-03T10:03:26","guid":{"rendered":"http:\/\/blog.quppa.net\/?p=398"},"modified":"2013-01-03T21:03:26","modified_gmt":"2013-01-03T10:03:26","slug":"pixel-perfect-multi-dpi-images-in-wpf-part-1","status":"publish","type":"post","link":"https:\/\/www.quppa.net\/blog\/2013\/01\/03\/pixel-perfect-multi-dpi-images-in-wpf-part-1\/","title":{"rendered":"Pixel-perfect Multi-DPI Images in WPF (Part 1)"},"content":{"rendered":"

View source on GitHub.<\/a><\/p><\/blockquote>\n

See also: Part 2<\/a> and Part 3<\/a>.<\/i><\/p>\n

I\u2019ve written previously<\/a> about DPI-awareness in the Windows Presentation Foundation and how to specify measurements in pixels rather than Device Independent Units (DIUs). Something else to consider is image scaling \u2013 unlike the Windows Ribbon control<\/a> or WinRT<\/a>, WPF has no in-built mechanism for displaying different images according to the system\u2019s DPI setting. This is a nuisance.<\/p>\n

To illustrate the problem, I created 5 images. Left-to-right, the image DPIs (vertical and horizontal) are: 72, 96, 120, 144 and 192. The image dimensions are: 32x32px, 32x32px, 40x40px, 48x48px and 64x64px. I purposely used single-pixel-wide lines to make any stretching obvious.<\/p>\n

\"Original<\/p>\n

Read on to see what WPF does with these images.<\/p>\n

<\/p>\n

I created a simple application to display these images while varying certain properties. I present here screenshots of the application running at 96 DPI, 120 DPI, 144 DPI and 192 DPI.<\/p>\n

The code for the first row of images is:<\/p>\n

<Image Stretch="None" \u2026 \/><\/pre>\n
The code for the second row of images is:<\/p>\n
<Image Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbour" \u2026 \/><\/pre>\n
The code for the third row of images is:<\/p>\n
<Image Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbour" SnapsToDevicePixels="True" \u2026 \/><\/pre>\n
The code for the fourth row of images is:<\/p>\n
<Image Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbour" SnapsToDevicePixels="True" UseLayoutRounding="True" \u2026 \/><\/pre>\n
The code for the fifth row of images is:<\/p>\n
<Image Stretch="Uniform" SnapsToDevicePixels="True" UseLayoutRounding="True" Width="32" Height="32" \u2026 \/><\/pre>\n
The code for the sixth row of images is:<\/p>\n
<Image Stretch="Uniform" RenderOptions.BitmapScalingMode="NearestNeighbour" SnapsToDevicePixels="True" UseLayoutRounding="True" Width="32" Height="32" \u2026 \/><\/pre>\n
96 DPI<\/h1>\n
\"96<\/a><\/p>\n
120 DPI<\/h1>\n
\"120<\/a><\/p>\n
144 DPI<\/h1>\n
\"144<\/a><\/p>\n
192 DPI<\/h1>\n
\"192<\/a><\/p>\n
Discussion<\/h1>\n
If you want pixel-perfect bitmap images in your WPF application, the two important properties are \u2018UseLayoutRounding\u2019 and \u2018SnapsToDevicePixels\u2019. I recommend setting both of these to \u2018true\u2019 on your Window; you can disable them for specific child elements if necessary. RenderOptions.BitmapScalingMode can be set to \u2018NearestNeighbour\u2019 when you have an image designed for the current DPI. If no such image is available, you should set it to one of LowQuality, Linear (the default), HighQuality or Fant<\/a> for a better result when scaling is necessary.<\/p>\n
Notice that when the width and height is not set explicitly, the 72 DPI 32x32px image is scaled to about 43x43px when running at 96 DPI. Be careful with tools like PNGOUT<\/a> (and the great Windows GUI PNGGauntlet<\/a>), as they will strip out DPI\/PPI information, causing WPF to scale your images when you\u2019d not expect it to<\/a>.<\/p>\n
In the next part, I\u2019ll describe my solution to displaying different images at different DPIs.<\/p>\n","protected":false},"excerpt":{"rendered":"
View source on GitHub. See also: Part 2 and Part 3. I\u2019ve written previously about DPI-awareness in the Windows Presentation Foundation and how to specify measurements in pixels rather than Device Independent Units (DIUs). Something else to consider is image scaling \u2013 unlike the Windows Ribbon control or WinRT, WPF has no in-built mechanism for … Continue reading “Pixel-perfect Multi-DPI Images in WPF (Part 1)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9],"tags":[48,68,102,123,171,185],"class_list":["post-398","post","type-post","status-publish","format-standard","hentry","category-programming","category-windows","tag-dpi","tag-images","tag-ppi","tag-scaling","tag-windows-2","tag-wpf"],"_links":{"self":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":0,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}