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

Я использую некоторые изображения в моем приложении 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" />

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

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

Ответ 1

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

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

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

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

Ответ 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" />

Вот как теперь выглядит:

Четкие изображения WPF http://img13.imageshack.us/img13/9926/crispwpfimages.gif

Ответ 3

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

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

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

Работала приятно, когда AvalonDock начала создавать размытые значки.

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 9

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

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

Тем не менее, поворот с помощью этих настроек не влияет на изображения. Я думаю, что это только эффекты 3D-видовых экранов.

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

Ответ 10

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

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

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

Ответ 11

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

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

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

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

Ответ 12

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

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

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

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