C# WPF buttons icon size on high DPI problem - Stack Overflow

I have a problem with button's icon size under high resolution and DPI (200%).

Under 1920x1080 100% everything is fine: .png

Under 2880x1800 200% the icons are too small: .png

I use PNG images for icons.

What could be the right solution for this problem?

Thank you!

I have a problem with button's icon size under high resolution and DPI (200%).

Under 1920x1080 100% everything is fine: https://i.sstatic.net/fzrDEXa6.png

Under 2880x1800 200% the icons are too small: https://i.sstatic.net/iUbLWlj8.png

I use PNG images for icons.

What could be the right solution for this problem?

Thank you!

• c#
• wpf
• icons
• dpi

Share Improve this question Follow edited Feb 2 at 20:31 H.Daniel asked Feb 2 at 20:25 H.DanielH.Daniel 133 bronze badges 7

• There are several solutions. What is your prioroty or requirement? I don't recommend to use image files because making UI composed of image files DPI aware will be very cumbersome. – emoacht Commented Feb 3 at 11:50
• I would like to get a form that looks similalry on every resolution and DPI settings. What should I use instead of image file for a button image then? – H.Daniel Commented Feb 3 at 14:43
• It is no problem at all to use "image files", or more precisely raster images for button icons. WPF will scale them as necessary, provided that you have used Image elements correctly. Since you did not post the relevant parts of your code, it is however difficult to provide more help. – Clemens Commented Feb 3 at 15:25
• I’ve uploaded the images for the buttons in the ‘button control properties’ not manually in the code. – H.Daniel Commented Feb 3 at 15:37
• "Screen sizes and break points". Ideally, one provides different size images (as in UWP "assets"); unless one is using vector graphics. learn.microsoft.com/en-us/windows/apps/design/layout/… – Gerry Schmitz Commented Feb 3 at 17:17

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

I agree with the last answers. If you use bitmap images like png in your case you would provide different images for any given screen resolution. Your images seem to origin from some vectors or can easily replaced by such that are public and free available. I very often start looking at https://www.uxwing.com

In my case, I put the vector image path to a named static resource. The buttons look all like

<Button Command="{Binding AddDataCommand}" Width="150" >
    <StackPanel Orientation="Horizontal" >
        <Path Height="16" Width="16" Data="{StaticResource OperationAdd}" Style="{DynamicResource ButtonIconPathStyle}" />
        <TextBlock Text="{mExt:LanguageBinding ResourceName=OperationAddDescription}" Margin="6,0,0,0" />
    </StackPanel>
</Button>

I have outsourced the path data to a resource dictionary for readability:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    <StreamGeometry x:Key="OperationAdd">M 20 9.375 L 20 10.625 L 10.625 10.625 L 10.625 20 L 9.375 20 L 9.375 10.625 L 0 10.625 L 0 9.375 L 9.375 9.375 L 9.375 0 L 10.625 0 L 10.625 9.375 Z</StreamGeometry>
</ResourceDictionary>

The funny path data inside the stream geometry can directly be copied from the svg path property, if the file contains just one path. If you have multiple paths of the same color, merge them using a tool like Inkcape. Multi color SVGs can be stagged on a Canvas element.