Мои изображения размыты! Почему 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" />

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

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

Answer 1

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

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" />

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

Четкие изображения WPF 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 Ribbon . Мое приложение использует контекстные вкладки, которые отображаются в зависимости от того, что делает пользователь, и когда я установил 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

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

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

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

Answer 9

Я обнаружил, что 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 10

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