Develop Reference

c# W.P.F. image show tiff (just 1 page) blurry [duplicate]

I'm using some Images in my WPF applcation.
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" />
But, they appear fuzzy.
Why doesn't that SnapsToDevicePixels="True" line prevent this problem?

You may want to consider trying a new property available now in WPF4. Leave the RenderOptions.BitmapScalingMode to HighQuality or just don't declare it.
NearestNeighbor worked for me except it led to jaggy bitmaps when zooming in on the application. It also didn't seem to fix any glitches where icons were sizing in weird ways.
On your root element (i.e. your main window) add this property: UseLayoutRounding="True".
A property previously only available in Silverlight has now fixed all Bitmap sizing woes. :)

Rather than using SnapsToDevicePixels, I instead used RenderOptions.BitmapScalingMode and they're now nice and crisp!
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 for Zack Peterson
I'm using .Net 3.5 sp1 and it looks like the most simple solution for a large number of fuzzy images.
It's not a big deal to specify RenderOptions in-place, but for 3rd-party components a style in app-level resource makes sense:
<Style TargetType="{x:Type Image}">
<Setter
Property="RenderOptions.BitmapScalingMode"
Value="NearestNeighbor" />
</Style>
Worked nicely when AvalonDock started to render blurry icons.

Using the UseLayoutRounding="True" on the root Window works in many cases but I encountered a problem when using the WPF Ribbon control. My application relies on Contextual Tabs that appear according to what the user is doing and when I set the UseLayoutRounding to True, the contextual tab would not show up and the RibbonButton's image neither. Also, the application freezes for many seconds and CPU fan starts to sing.
Using RenderOptions.BitmapScalingMode="NearestNeighbor" on my image corrected the image rendering issues (fuzzy and cropped image) and is fully compatible with the Ribbon Contextual Tabs usage.

RenderOptions.BitmapScalingMode="NearestNeighbor" works well most of the time. However, occasionally you'll get graphical glitches (in my case, 4 out of 5 images showed up fine, but the fifth had a slight distortion on the right edge). I fixed it my increasing the Image control's right margin by 1.
If that still doesn't fix it, try the Bitmap class control above that EugeneZ mentions. It's a replacement for the Image control and so far it's worked pretty well for me. See http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

use UseLayoutRounding=True to the top most element in your application

Make sure you save the image in the same DPI as your WPF application is working in, some image formats have this info stored as metadata. I don't know if this solves the problem but I've hade some problems because of this where images resized to 100% got bigger or smaller than expected.
Might be something similar.

I believe this is a bug (or at least it was). Check out this Microsoft support e-mail exchange page for some ideas to fix it.

I have found that the RenderOptions.BitmapScalingMode="NearestNeighbor" does not work for me. I'm using Windows XP x32 with DirectX 9.0c. As the actual rendering for WPF is done with DirectX, this could have an effect. I do have anti-aliasing turned on for XP with the following registry entries:
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Avalon.Graphics]
"MaxMultisampleType"=dword:00000004
"EnableDebugControl"=dword:00000001
However, turning aa off with these settings has no effect on the images. I think this only effects 3D Viewports.
Finally, I found that the blurring occurs with the text of TextBlocks as well as images. And the blurring only happens for some text blocks and images, not all of them.

I have found that no combination of the suggested workarounds would cure my seemingly random blurry image problem. I like many others cannot upgrade to .net 4 in order to use the UseLayoutRendering property.
What I have found to work:
Ensure your [original] image dimensions are multiples of 2. This seems to prevent some of the funky image scaling problems.
Sometimes I have also found that adjusting margins on images by a pixel or 2 can prevent the problem.

My first thought, reading the question, was you were blowing up the image too much, but that does not appear to be the case looking at the image you have of the app.
Second thought is color palette, but with black as one of the colors that is not rendering correctly, this is not as likely.
If you can fully rule out the two above, I am currently stumped.
As an experiment, you can try other graphics formats, but PNG should be fine. I will have to think it through some more to come up with a better answer.

I've tried to use the RenderOptions.BitmapScalingMode=HighQuality, seems like is causes some problems in Windows 8.1, so what i did was to run them through the tool called PngOut.exe
http://advsys.net/ken/utils.htm
Which reduces the header of the png, and also reduces the size, but without changing the image quality.
And now all my images are perfect! :-)

Splashscreen Rect coordinates returning Screen dimensions on Win 10 Mobile

I am trying to create an extended SplashScreen on my UWP app for which the SplashScreen image coordinates are needed. I am using the following code in App.xaml.cs:
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
if (e.SplashScreen != null)
var SplashLocation = e.SplashScreen.ImageLocation;
//Rest of initialization...
}
However, if I inspect SplashLocation which is a Rect, SplashLocation.Height and SplashLocation.Width return 1280 and 768 which is the dimension of my phone's screen. All other properties are 0.
Is this a known bug in Win 10 Mobile [build 10536]? It works fine on desktop Windows 10.

Actually the issue is that the code given on the MSDN docs is wrong. Have a look at their samples on Github instead. You can find it here:
Splash Screen Sample
Notice the differences between the MSDN docs and the sample:
ExtendedSplash DOES NOT extend page
They use a ScaleFactor for phone
The root element of the XAML is Grid and not page.
I followed their sample (after hours of wondering) and it all worked well. I hope they update their docs to reflect the correct thing.

As a workaround, here's what I did:
Create an Image in XAML inside a Grid (and NOT inside a Canvas as suggested by the msdn Docs)
<Image Name="ExtSplash"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/Splash/SplashScreen.png"/>
Now, the trick is to make it work on both Mobile (which doesn't give correct Rect coordinates and Desktop (which works as expected)
So, in the loaded event of Page in code behind, I used this code:
if (splash.Top < splash.Left)
ExtSplash.Margin = new Thickness(splash.Top);
else
ExtSplash.Margin = new Thickness(splash.Left);
where Splash = e.SplashScreen.ImageLocation from the OnLaunched event in App.xaml.cs.
This works because, Splash.Top and Splash.Left both return 0 in case of Mobile. So the app just displays the splashscreen fully extended to the width. In case of Desktop, the Image may have some Left or Top Coordinates as it's reported correctly on desktop, where I set them as Margin for the centrally aligned uniform stretched image.
NOTE 1: There may be cases where a slight variation may occur between splashscreen and the ExtendedSplash image. But in my testing it worked fine. It will continue to work even when in a later build MS fixes the issue, so you can take your time to implement the standard method then.
NOTE 2: I had some issues with this logic if scale-400 splashscreen image was provided. For some reason WM10 picks up the highest resolution available. So I just supplied 100, 125, 150 and 200 scale images (skipped the 400)

I ended up ditching the SplashScreen.ImageLocation approach. The Microsoft tutorial does not work on mobile at the time of writing, and the sample is hackish. Instead I used a simple layout like this for the extended splash screen:
<Grid>
<Image x:Name="splashScreenImage" Source="Assets/SplashScreen.png" MaxWidth="620" MaxHeight="300"/>
<!-- plus some other control -->
</Grid>
The magic is to use MaxWidth/MaxHeight.
On mobile the the image will be slightly different positioned vertically (because of status bar and navigation bar I guess), but otherwise correct including size. On desktop the image seems to be exactly positioned and sized as the initial splash.

WPF: Multiple screens

I'm writing a screensaver in WPF. I have the screensaver working, however, it only displays on my main monitor. Is there a way to "black out" or draw graphics to additional monitors when the user has multiple displays? I've done some searching around, but haven't found anything relevant.
UPDATE
From ananthonline's answer below, I was able to accomplish the "black out" effect on non-primary displays using the following window:
<Window x:Class="ScreenSaver.BlackOut"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Cursor="None" WindowStyle="None" ResizeMode="NoResize" Background="Black">
</Window>
and initializing one for each screen in App.xaml.cs using the following process:
foreach (Screen s in Screen.AllScreens)
{
if (s != Screen.PrimaryScreen)
{
BlackOut blackOut = new BlackOut();
blackOut.Top = s.WorkingArea.Top;
blackOut.Left = s.WorkingArea.Left;
blackOut.Width = s.WorkingArea.Width;
blackOut.Height = s.WorkingArea.Height;
blackOut.Show();
}
}
Note an import to System.Windows.Forms is required to access the Screen class.

You should be able to use the System.Drawing.Screen.* classes to set up multiple windows on each screen. Mind that you don't set each window to be maximized, but a properly sized, border less window.
Also - you might want to remember that the total bounds of the multi monitor setup may not always be a rectangle (if you plan to "union" all the bounds to create a window spanning all monitors).

Image in WPF getting Blurry

I am developing an application in WPF using C#. I am putting Images in a WrapPanel and showing inside a Grid with one more Border and using images in Buttons also. Problem is my Image control loosing its quality. I am not able to post my image here so I am simply describing here.
I used SnapsToDevicePixels="True" for the images but still it looks blurry.
Updated:
Here I shared the Image below:

I think what Markus told is the one way to resolve your issue and try by adding one more property in it RenderOptions.EdgeMode="Aliased" for each image I mean :
<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"/>
if you still not able to fix your problem then you can refer this http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx to create a custom Bitmap class and apply on all Images which are creating trouble for you.
You can also see this Stack Overflow Question

SnapsToDevicePixels seems not working for bitmaps.
The NearestNeighbor options actually converts the bitmap and will end up with different one to the original bitmap.
In WPF 4, a property "UseLayoutRounding" on the FrameworkElement is introduced to solve this problem.
By setting this property to True on your root element, such as Window will align children elements on the edges of pixels.
<Window UseLayoutRounding="True">...</Window>

This works for me
<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"</Image>
Set RenderOptions.BitmapScalingMode="NearestNeighbor" for each image. Alternatively see this question here on StackOverflow.
Edit:
Here is my sample code
<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>
And this is my result:

Use UseLayoutRounding="True" property on the parent element if image is used as a content. In your case it is the Button.

I ran into a blurriness issue with image backgrounds caused by scaling and the solution was much simpler than you may think. While at first I wondered if it was being scaled up to a power-of-two texture size, the scaling actually matched the ratio of System DPI (96) : Image DPI (72, which is the default for many editors). If you adjust the image to 96 DPI it should display pixel-perfect with the default Windows settings.
EDIT: Tried an image with high detail contrast and it is slightly softened.

WPF doesn't use concrete pixel values for sizes and positioning, so that it can scale well with DPI.
This can lead to a problem where it tries to use a position that doesn't correspond to a discrete on-screen pixel; some of the image pixels are rendered over multiple on-screen pixels which we see as blurring.
UseLayoutRendering=true with SnapToDevicePixels=false should solve this issue. You also need to set it at the main window level too, so that the calculations cascade down to the image level.
You can try this out by creating a simple WPF application with one window, and your images. Setting the image margin to be something silly like (10.452, 0.736, 0, 0) will lead to blurring. This goes away with UseLayoutRendering=true on the image.
If you then set the margin again in your window's constructor after InitializeComponent(), it is blurry regardless of whether you set UseLayoutRendering=true on the image, since the calculations to line up with on-screen pixels were made before you then moved the image to a location which doesn't match up with these.
I'm not entirely sure what the difference is between UseLayoutRendering and SnapToDevicePixels - I think it is just the time that the calculations are made. UseLayoutRendering seems to be preferable for images.
Stretching/squashing an image from its original size can also lead to blurring problems.

I had the same Problem, but in my case I've downloaded Icons and found out, that they all had wrong DPI too... 110,56 and 116,xx and 95,99 etc...
When i changed the DPI to 96 for all, everything was fine!

C# WinForms disable DPI scaling

I have a WinForm application which hosts many images. When I put the application on a Win7 machines that has a DPI of 120, it completely ruins the look of the form. Is there a way to disable the scaling for my form?
I am aware that this is something that is not advised and that DPI should be seamless and handled by the OS. But when it comes to a skinned application, the images do not scale well. I do not have the luxury of creating images for all the DPI variations, so please don't suggest that as an answer.

You'll have bigger problems when you change the AutoScaleMode property. Increasing the DPI also changes the system font size. Necessarily so, font sizes are expressed in points, 1/72 inch. The fonts need to be bigger to get the same point size when the DPI increases and keep the text just as readable when viewed from the same distance.
Since the controls don't get resized anymore, the text on, say, a button no longer fits. One way to battle this is to change the font size on the controls proportionally. Easy if you let all the controls inherit the form font, just changing the form's Font property automatically updates the controls as well. The clear disadvantage is that the user will have a harder time reading the text. This especially gets bad when the DPI goes to 150 dots per inch and beyond, your UI just turns into an unusable postage stamp.
Yes, background images need to get scaled to fit the larger control or form. A pixel in the image now no longer maps one-to-one to a pixel of the monitor. The default Graphics.InterpolationMode value does a fairly decent job of filtering the image. But it depends on the kind of image how well that turns out. A photo almost always scales very well. Finely detailed line art and text does not. Picking the right kind of image goes a long way to avoiding having to create separate ones.
This problem isn't going to go away until monitors start to have the kind of resolution a printer has. We're still a long way from 600 dpi for desktop monitors. Phones will be first.

Create a application manifest file (right-click on project/ add/new item/application file) and uncomment this section:
<application xmlns="urn:schemas-microsoft-com:asm.v3">
<windowsSettings>
<dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware
</windowsSettings>
</application>
Creds to this site: https://www.telerik.com/blogs/winforms-scaling-at-large-dpi-settings-is-it-even-possible-

Adding one line of code before the auto-generated call to InitializeComponent in the Form1-constructor solved it for me:
public partial class Form1 : Form
{
public Form1()
{
// Make the GUI ignore the DPI setting
Font = new Font(Font.Name, 8.25f * 96f / CreateGraphics().DpiX, Font.Style, Font.Unit, Font.GdiCharSet, Font.GdiVerticalFont);
InitializeComponent();
}
}

You can set the AutoScaleMode property of the form to None.