DrawingImage is getting fuzzy and image gets bigger and cut-off when Windows scaling is set to more-CodePudding

I have an WPF usercontrol which is used in a winforms applications. WPF usercontrol is contained within an ElementHost container.

This WPF usercontrol has some images, button with images, labels, etc.

I have a dictionary with some geometries, the following is one of them.

  <Geometry x:Key="hlpGeometry">F0 M22,22z M0,0z M11,22C17.0751,22 22,17.0751 22,11 22,4.92487 17.0751,0 11,0 4.92487,0 0,4.92487 0,11 0,17.0751 4.92487,22 11,22z M12.1901,16.6889L10.2662,16.6889 10.2662,18.6998 12.1901,18.6998 12.1901,16.6889z M8.18758,5.59005C7.40125,6.43439,7.00808,7.55265,7.00808,8.94484L8.72898,8.94484C8.76121,8.10695 8.89334,7.46564 9.12537,7.02091 9.53787,6.2217 10.2823,5.82209 11.3587,5.82209 12.2288,5.82209 12.8508,6.05412 13.2246,6.51818 13.6049,6.98224 13.795,7.53009 13.795,8.16173 13.795,8.61291 13.6661,9.04797 13.4083,9.46691 13.2665,9.70539 13.0796,9.9342 12.8475,10.1533L12.0741,10.9171C11.3329,11.6454 10.8527,12.2932 10.6336,12.8604 10.4144,13.4211 10.3049,14.1623 10.3049,15.084L12.0258,15.084C12.0258,14.2719 12.116,13.6596 12.2965,13.2471 12.4834,12.8281 12.8862,12.319 13.505,11.7195 14.3557,10.8945 14.9197,10.2694 15.1969,9.84396 15.4804,9.41857 15.6222,8.86427 15.6222,8.18107 15.6222,7.05314 15.2387,6.12824 14.4718,5.40636 13.7112,4.67804 12.6961,4.31388 11.4263,4.31388 10.0535,4.31388 8.9739,4.73927 8.18758,5.59005z</Geometry>
  <DrawingGroup x:Key="hlpDrawingGroup" ClipGeometry="M0,0 V22 H22 V0 H0 Z">
    <GeometryDrawing Brush="#FF00AA2B" Geometry="{StaticResource hlpGeometry}" />
  </DrawingGroup>
  <DrawingImage x:Key="ico_helpDrawingImage" Drawing="{StaticResource hlpDrawingGroup}" />

I have an WPF Image and I bound above DrawingImage to it using the Source attribute. I bind the source attribute to a property in the view model.

Something like below:

<Image x:Name="MyImage"
       Height="24"
       Width="24"
       VerticalAlignment="Center"
       Source="{Binding Path=MyIcon}"/>

It is working fine when windows is scaled to 100% but when scaled to a higher one, let's say, 125%, then the image gets fuzzy.

Also the image look like gets bigger than 24x24 and it is being cut-off when I set a scale greater than 100% (125%).

How can I make image to not get fuzzy and set image to always be the same size 24x24?

CodePudding user response：

You can use the UseLayoutRounding and SnapsToDevicePixels properties.

Set the UseLayoutRounding property to true to prevent blurring caused by anti-aliasing and to tell the layout system to align elements with pixel boundaries.

RenderOptions.BitmapScalingMode is mainly for larger images to be displayed more smoothly, you can choose HighQuality.

Use high quality bitmap scaling, which is slower than LowQuality mode, but produces higher quality output.

You can check this link:

https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapscalingmode?redirectedfrom=MSDN&view=windowsdesktop-7.0

Code：

<Image x:Name="img"  MouseWheel="img_MouseWheel"
   Height="24"
   Width="24"
   UseLayoutRounding="True" 
   SnapsToDevicePixels="True" 
   VerticalAlignment="Center"
   RenderOptions.BitmapScalingMode="HighQuality"
   Source="2.jpg"/>

CodePudding user response：

With images I have always found the below to always clear up the fuzzy stuff.

<Image x:Name="MyImage"
    Height="24"
    Width="24"
    RenderOptions.BitmapScalingMode="HighQuality"
    VerticalAlignment="Center"
    Source="{Binding Path=MyIcon}"/>