c# - resource - image source wpf from file

Imagen en WPF borrándose

Question

Estoy desarrollando una aplicación en WPF usando C #. Estoy colocando Imágenes en un WrapPanel y mostrando dentro de una Cuadrícula con un Borde más y usando imágenes en Botones también. El problema es que mi control de imagen pierde su calidad. No puedo publicar mi imagen aquí, así que simplemente estoy describiendo aquí.

Utilicé SnapsToDevicePixels="True" para las imágenes, pero aún se ve borroso.

Actualizado:

Aquí compartí la imagen a continuación:

Answer 1

Creo que lo que Markus dijo es la única manera de resolver el problema e intentarlo agregando una propiedad más en él RenderOptions.EdgeMode="Aliased" para cada imagen que quiero decir:

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"/>

Si aún no puede solucionar su problema, puede consultar este http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx para crear una clase de mapa de bits personalizada y aplicar en todas las imágenes que están creando problemas para usted.

También puede ver esta Pregunta de desbordamiento de pila

Answer 2

Esto funciona para mí

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"</Image>

Establezca RenderOptions.BitmapScalingMode = "NearestNeighbor" para cada imagen. Alternativamente, vea esta question aquí en .

Editar:
Aquí está mi código de muestra

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="661">
<WrapPanel>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/icoChip32x32.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/icoChip32x32.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/Presentation-Edit.png"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/Presentation-Edit.png"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
</WrapPanel>
</Window>

Y este es mi resultado:

Answer 3

Me encontré con un problema de visión borrosa con fondos de imágenes causados ​​por escalas y la solución fue mucho más simple de lo que piensas. Mientras que al principio me preguntaba si se estaba ampliando a un tamaño de textura de potencia de dos, la escala en realidad coincidía con la proporción de DPI del sistema (96): Imagen DPI (72, que es el valor predeterminado para muchos editores). Si ajusta la imagen a 96 ppp, debería mostrar un píxel perfecto con la configuración predeterminada de Windows.

EDITAR: Intentó una imagen con alto contraste de detalles y se suavizó ligeramente.

Answer 4

SnapsToDevicePixels no parece funcionar para bitmaps.

Las opciones de NearestNeighbor realmente convierten el mapa de bits y terminará con uno diferente al mapa de bits original.

En WPF 4, se introduce una propiedad " UseLayoutRounding " en FrameworkElement para resolver este problema.

Al establecer esta propiedad en True en su elemento raíz, como Window alineará los elementos secundarios en los bordes de los píxeles.

<Window UseLayoutRounding="True">...</Window>

Answer 5

Tuve el mismo problema, pero en mi caso descargué Icons y descubrí que todos tenían DPI incorrecto ... 110,56 y 116, xx y 95,99, etc.

Cuando cambié el DPI a 96 para todo, ¡todo estaba bien!

Answer 6

Use la propiedad UseLayoutRounding = "True" en el elemento primario si la imagen se usa como contenido. En tu caso, es el Botón.

Answer 7

WPF no utiliza valores de píxeles concretos para los tamaños y el posicionamiento, por lo que puede escalar bien con DPI.

Esto puede conducir a un problema donde intenta usar una posición que no corresponde a un píxel discreto en pantalla; algunos de los píxeles de la imagen se representan sobre múltiples píxeles en pantalla que vemos borrosos.

UseLayoutRendering = true con SnapToDevicePixels = false debería resolver este problema. También necesita configurarlo en el nivel de la ventana principal también, para que los cálculos caigan en cascada al nivel de la imagen.

Puede probar esto creando una aplicación WPF simple con una ventana y sus imágenes. Establecer el margen de la imagen para que sea algo tonto (10.452, 0.736, 0, 0) dará lugar a imágenes borrosas. Esto desaparece con UseLayoutRendering = true en la imagen.

Si luego establece el margen nuevamente en el constructor de su ventana después de InitializeComponent (), es borroso independientemente de si configura UseLayoutRendering = true en la imagen, ya que los cálculos para alinearse con los píxeles en pantalla se realizaron antes de mover la imagen a una ubicación que no coincide con estos.

No estoy del todo seguro de cuál es la diferencia entre UseLayoutRendering y SnapToDevicePixels: creo que es el momento justo en que se realizan los cálculos. UseLayoutRendering parece ser preferible para las imágenes.

Estirar / aplastar una imagen desde su tamaño original también puede provocar problemas de borrosidad.