Moje obrazy są zamazane! Dlaczego SnapsToDevicePixels WPF nie działa?

Używam niektórych obrazów w mojej aplikacji 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" />

Ale wydają się niewyraźne.

Dlaczego ta SnapsToDevicePixels="True"linia nie zapobiega temu problemowi?

Możesz rozważyć wypróbowanie nowej właściwości dostępnej teraz w WPF4 . Pozostawić RenderOptions.BitmapScalingModedo HighQuality lub po prostu nie objawi.

NearestNeighbor działał dla mnie, z wyjątkiem tego, że prowadził do postrzępionych bitmap podczas powiększania aplikacji. Wydawało się również, że nie naprawiono żadnych usterek, w których ikony zmieniały się w dziwny sposób.

Na elemencie głównym (czyli głównego okna) dodać tę właściwość: UseLayoutRounding="True".

Właściwość wcześniej dostępna tylko w Silverlight rozwiązała teraz wszystkie problemy z rozmiarami Bitmap. :)

Zamiast używać SnapsToDevicePixels, zamiast tego użyłem RenderOptions.BitmapScalingModei są teraz ładne i ostre!

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

+1 dla Zacka Petersona

Używam .Net 3.5 sp1 i wygląda na to, że jest to najprostsze rozwiązanie dla dużej liczby rozmytych obrazów. Określanie opcji RenderOptions w miejscu nie jest skomplikowane, ale w przypadku komponentów innych firm styl w zasobach na poziomie aplikacji ma sens:

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

Działało dobrze, gdy AvalonDock zaczął renderować rozmyte ikony.

Korzystanie z UseLayoutRounding="True"okna głównego działa w wielu przypadkach, ale napotkałem problem podczas korzystania z kontrolki Wstążki WPF . Moja aplikacja opiera się na kontekstowe karty, które pojawiają się zgodnie z tym, co użytkownik robi i kiedy ustawić UseLayoutRoundingsię Truena zakładce kontekstowe nie pojawi się i obrazków RibbonButton za nie. Ponadto aplikacja zawiesza się na wiele sekund, a wentylator procesora zaczyna śpiewać.

Użycie RenderOptions.BitmapScalingMode="NearestNeighbor"na moim obrazie rozwiązało problemy z renderowaniem obrazu (rozmyty i przycięty obraz) i jest w pełni zgodne z użyciem kart kontekstowych wstążki.

RenderOptions.BitmapScalingMode = "NearestNeighbor" działa dobrze przez większość czasu. Jednak od czasu do czasu pojawiają się usterki graficzne (w moim przypadku 4 z 5 obrazów pokazały się dobrze, ale piąty miał niewielkie zniekształcenie na prawej krawędzi). Naprawiłem to, zwiększając prawy margines kontroli obrazu o 1.

Jeśli to nadal nie rozwiązuje problemu, wypróbuj kontrolkę klasy Bitmap powyżej, o której wspomina EugeneZ. Jest to zamiennik kontroli obrazu i jak dotąd działał całkiem dobrze. Zobacz http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Upewnij się, że zapisujesz obraz w tym samym DPI, w którym działa aplikacja WPF, niektóre formaty obrazów mają te informacje przechowywane jako metadane. Nie wiem, czy to rozwiązuje problem, ale mam pewne problemy z powodu tego, że obrazy przeskalowane do 100% stały się większe lub mniejsze niż oczekiwano.

Może być coś podobnego.

use UseLayoutRounding = True do najwyższego elementu w aplikacji

Uważam, że to błąd (a przynajmniej był). Zapoznaj się z tą stroną wymiany wiadomości e-mail pomocy technicznej firmy Microsoft, aby znaleźć pomysły na rozwiązanie tego problemu.

Odkryłem, że RenderOptions.BitmapScalingMode = "NearestNeighbor" nie działa dla mnie. Używam systemu Windows XP x32 z DirectX 9.0c. Ponieważ rzeczywiste renderowanie WPF odbywa się za pomocą DirectX, może to mieć wpływ. Mam włączone antyaliasing dla XP z następującymi wpisami rejestru:

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

Jednak wyłączenie aa przy tych ustawieniach nie ma wpływu na obrazy. Myślę, że dotyczy to tylko rzutni 3D.

W końcu odkryłem, że rozmycie występuje zarówno w tekście TextBlocks, jak i na obrazach. Rozmywanie występuje tylko w przypadku niektórych bloków tekstu i obrazów, a nie wszystkich.

Zauważyłem, że żadna kombinacja sugerowanych obejść nie wyleczy mojego pozornie przypadkowego problemu z rozmytym obrazem. Podoba mi się, że wielu innych nie może uaktualnić do .net 4 w celu korzystania z tej UseLayoutRenderingwłaściwości.

Co znalazłem, że działa:

• Upewnij się, że wymiary [oryginalnego] obrazu są wielokrotnościami 2. Wydaje się, że zapobiega to niektórym dziwacznym problemom ze skalowaniem obrazu.
• Czasami stwierdziłem również, że dostosowanie marginesów na obrazach o piksel lub 2 może zapobiec problemowi.

Moją pierwszą myślą po przeczytaniu pytania było to, że zbyt mocno wysadziłeś obraz, ale nie wydaje się, aby tak było, patrząc na obraz aplikacji, który masz.

Druga myśl to paleta kolorów, ale jeśli czarny jest jednym z kolorów, który nie renderuje się poprawnie, jest to mniej prawdopodobne.

Jeśli możesz w pełni wykluczyć powyższe dwa, jestem obecnie zaskoczony.

W ramach eksperymentu możesz wypróbować inne formaty graficzne, ale PNG powinno wystarczyć. Będę musiał to przemyśleć jeszcze bardziej, aby znaleźć lepszą odpowiedź.

Próbowałem użyć RenderOptions.BitmapScalingMode = HighQuality, wydaje się, że powoduje to pewne problemy w Windows 8.1, więc to, co zrobiłem, to uruchomienie ich za pomocą narzędzia o nazwie PngOut.exe

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

Co zmniejsza nagłówek png, a także zmniejsza rozmiar, ale bez zmiany jakości obrazu.

A teraz wszystkie moje obrazy są idealne! :-)