Мои изображения размыты! Почему WPF SnapsToDevicePixels не работает?

Question

Я использую некоторые изображения в моем приложении WPF.

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       SnapsToDevicePixels="True"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

Но они кажутся нечеткими:

Мертвая ссылка - размытые изображения WPF

Вот увеличенное параллельное сравнение. Оригинал слева:

Мертвая ссылка - размытое изображение WPF увеличено

Почему не SnapsToDevicePixels="True" линия предотвратить эту проблему?

Answer 1

Возможно, вы захотите попробовать новое свойство, доступное сейчас в WPF4. Оставь RenderOptions.BitmapScalingMode в высоком качестве или просто не объявлять это.

NearestNeighbor работал для меня, за исключением того, что это приводило к неровным растровым изображениям при увеличении приложения. Это также, похоже, не исправляло никаких глюков, когда значки странным образом изменяли размеры.

В свой корневой элемент (т. Е. Главное окно) добавьте это свойство: UseLayoutRounding="True",

Свойство, ранее доступное только в Silverlight, теперь исправило все проблемы с размером растрового изображения.:)

Answer 2

Вместо того, чтобы использовать SnapsToDevicePixelsЯ вместо этого использовал RenderOptions.BitmapScalingMode и теперь они красивые и четкие!

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

Вот как это выглядит сейчас:

http://img13.imageshack.us/img13/9926/crispwpfimages.gif

Answer 3

+1 для Зака ​​Петерсона

Я использую.Net 3.5 sp1, и это выглядит как самое простое решение для большого количества нечетких изображений. Нет ничего сложного в том, чтобы указать RenderOptions на месте, но для сторонних компонентов имеет смысл стиль в ресурсе уровня приложения:

 <Style TargetType="{x:Type Image}">
    <Setter
        Property="RenderOptions.BitmapScalingMode"
        Value="NearestNeighbor" />
 </Style>

Хорошо работало, когда AvalonDock начал рендерить размытые иконки.

Answer 4

С использованием UseLayoutRounding="True" в корневом окне работает во многих случаях, но я столкнулся с проблемой при использовании элемента управления ленты WPF. Мое приложение использует контекстные вкладки, которые отображаются в зависимости от того, что делает пользователь, и когда я устанавливаю UseLayoutRounding в True контекстная вкладка не будет отображаться и изображение ленты RibbonButton. Также приложение зависает на много секунд и вентилятор процессора начинает петь.

С помощью RenderOptions.BitmapScalingMode="NearestNeighbor" на моем изображении исправлены проблемы с рендерингом изображения (размытое и обрезанное изображение), и он полностью совместим с использованием контекстных вкладок ленты.

Answer 5

RenderOptions.BitmapScalingMode="NearestNeighbor" работает хорошо большую часть времени. Тем не менее, иногда вы будете получать графические сбои (в моем случае 4 из 5 изображений были в порядке, но у пятого были небольшие искажения на правом краю). Я исправил это, увеличив правое поле элемента управления изображением на 1.

Если это по-прежнему не помогает, попробуйте элемент управления Bitmap, о котором упоминает EugeneZ. Это замена для управления изображением, и до сих пор он работал довольно хорошо для меня. См. http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Answer 6

Используйте UseLayoutRounding=True для самого верхнего элемента в вашем приложении

Answer 7

Убедитесь, что вы сохранили изображение в том же DPI, в котором работает ваше приложение WPF. Некоторые форматы изображений хранят эту информацию в виде метаданных. Я не знаю, решает ли это проблему, но у меня есть некоторые проблемы из-за этого, когда изображения, размер которых увеличен до 100%, стали больше или меньше, чем ожидалось.

Может быть что-то похожее.

Answer 8

Я обнаружил, что RenderOptions.BitmapScalingMode="NearestNeighbor" не работает для меня. Я использую Windows XP x32 с DirectX 9.0c. Поскольку фактический рендеринг для WPF выполняется с помощью DirectX, это может оказать влияние. У меня действительно включено сглаживание для XP со следующими записями реестра:

[HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Avalon.Graphics] "MaxMultisampleType" = dword: 00000004 "EnableDebugControl" = dword: 00000001

Однако отключение с этими настройками не влияет на изображения. Я думаю, что это влияет только на 3D Viewports.

Наконец, я обнаружил, что размытие происходит как с текстом TextBlocks, так и с изображениями. И размывание происходит только для некоторых текстовых блоков и изображений, а не для всех.

Answer 9

Я обнаружил, что ни одна комбинация предложенных обходных путей не излечит мою, казалось бы, случайную проблему с размытым изображением. Я, как и многие другие, не могу перейти на.net 4, чтобы использовать UseLayoutRendering имущество.

Что я нашел для работы:

• Убедитесь, что размеры вашего [оригинального] изображения кратны 2. Это, кажется, предотвращает некоторые странные проблемы с масштабированием изображения.
• Иногда я также обнаружил, что настройка полей на пикселях или 2 может предотвратить проблему.

Answer 10

Я считаю, что это ошибка (или, по крайней мере, так было). Посетите эту страницу обмена сообщениями службы поддержки Microsoft, чтобы узнать, как это исправить.

Answer 11

Когда я прочитал вопрос, моей первой мыслью было то, что вы слишком сильно взорвали изображение, но, похоже, это не тот случай, когда вы смотрите на изображение вашего приложения.

Вторая мысль - цветовая палитра, но с черным как один из цветов, который не передает правильно, это не так вероятно.

Если вы можете полностью исключить два выше, я в настоящее время в тупике.

В качестве эксперимента вы можете попробовать другие графические форматы, но PNG должен быть в порядке. Мне придется еще немного подумать, чтобы найти лучший ответ.

Answer 12

Я пытался использовать RenderOptions.BitmapScalingMode=HighQuality, похоже, это вызывает некоторые проблемы в Windows 8.1, поэтому я попытался запустить их через инструмент под названием PngOut.exe

http://advsys.net/ken/utils.htm

Что уменьшает заголовок png, а также уменьшает размер, но без изменения качества изображения.

И теперь все мои изображения идеальны!:-)