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! :-)
This question already has an answer here:
Drop Shadow effect in Universal Windows Application
(1 answer)
Closed 5 years ago.
I am currently trying to create a circular button with two ellipse-elements in UWP and want one of them to throw a shadow at a certain angle. I found a way to do so in WPF which looks like this:
WPF XAML:
<Ellipse>
<Ellipse.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="-50" ShadowDepth="50" Softness=".7"/>
</Ellipse.BitmapEffect>
</Ellipse>
What's the equivalent in UWP?
The easiest way is to use the DropShadowPanel from UWP Community Toolkit.
So first just install
Install-Package Microsoft.Toolkit.Uwp.UI.Controls -Version 2.0.0
Then use the following code in your XAML
<controls:DropShadowPanel Color="Black"
OffsetX="-50"
OffsetY="-50"
BlurRadius="50"
ShadowOpacity=".7"
Width="120"
Height="120"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Ellipse />
</controls:DropShadowPanel>
In UWP there is a different component to do this job. It's called the Composition API and is available in the NuGet Package "Win2D.uwp".
Basically you'll need to get the compositor for your visual object with
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
and create a drop shadow using the compositor.
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
// create a red sprite visual
var myVisual = _compositor.CreateSpriteVisual();
myVisual.Brush = _compositor.CreateColorBrush(Colors.Red);
myVisual.Size = new System.Numerics.Vector2(100, 100);
// create a blue drop shadow
var shadow = _compositor.CreateDropShadow();
shadow.Offset = new System.Numerics.Vector3(30, 30, 0);
shadow.Color = Colors.Blue;
myVisual.Shadow = shadow;
// render on page
ElementCompositionPreview.SetElementChildVisual(this, myVisual);
The downside beeing, that this is not quite straight forward. You can use different brushes to display images, solid colors or other stuff, it won't apply to existing visuals on screen (as far as I understand it). You can read more about the basics here. Probalby you'll need to use a surface brush, which can hold a wide variety of different visual types, like images. Currently it does not look like there is a ready made component for ellipses though.
Alternatively there exists a xaml extension which will do all that stuff for you using pure xaml, might be worth a shot and maybe also support ellipses.
As an ending note, all of this is currently a work in progress on microsofts part and should become a native part of the UWP API in the future.
Just a simple question: I'm developing a Windows store app and for one function I want to show an intercept theorm. For that (now my question) I need some lines. Do I need to create an Image or is there any other possibility to display simple lines on a XAML-Form (I'm using XAML and C#).
I'm coming from Windows forms and there I used a line control from the Toolbox, but I can't find anything like that in the Toolbox of VS for Windows 8. I also had the idea to use GDI, but I read that it doesn't exist any longer (am I wrong?).
You should draw shape elements, in your XAML (or code-behind).
See MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/hh465055.aspx
you can use like bellow
<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Red"></Line>
this draws a line from (0,0) to (100,100).
don't forget to use stroke otherwise it won't be displayed.
Regarding this .net XAML UIElement property, Image.OpacityMask: http://msdn.microsoft.com/en-us/library/ms743320.aspx
I am having difficulty getting OpacityMask to work in my C# / XAML project for WinRT.
Sample XAML like this:
<Image ...
<Image.OpacityMask>
<ImageBrush ImageSource="Assets/alpha.png"/>
</Image.OpacityMask>
/>
Doesn't seem to work, "The attachable property OpacityMask property was not found in type Image"
How does one use an alpha mask .png to mask a Image UIElement in WinRT XAML?
There is no OpacityMask property on Image (or UIElement fo that matter) in XAML for Windows Store apps. You only have Opacity property available.
Depending on what you are trying to do, there are alternatives to OpactiyMask that you should check out. check out these alternatives here.
I have some PNGs with transparency that I use for buttons in my WPF/C# application.
Right now I have two versions of each PNG, one for normal view and one for hover, each a different color. However, I would really like to just have one single PNG and maybe make everything that's not transparent white (each image is all one color, no detail other than shape.
Would it be possible to then alter the color of each using a SolidColorBrush or similar and create the Normal/Hover versions as a static resource in my XAML?
Something like this:
<Image Key="BtnMenu" Source="Images/Menu.png" Fill="ButtonNormalBrush" />
<Image Key="BtnMenuHover" Source="Images/Menu.png" Fill="ButtonHoverBrush" />
Yeah, I totally made up the "Fill" thing...
But the basic idea is that I have a ResourceDictionary that contains the color scheme that is used throughout the entire application, which makes it so that I can change any of the about 6 colors I use in the application in one place and it updates on every control that references that color... but the one place I cannot do it is those PNGs for the buttons. (Ideally in the future I'll make that ResourceDictionary something that can be loaded in at runtime to make the application have alternate "skins"..but right now the PNGs keep me from doing that).
Edit: BTW, if the solution requires a Converter or something written in code, that's totally fine.
Hmm... If you created a Grid, and put the Image inside that Grid, you could set the Background of the Grid to your fill color.
Edit: Here is some code:
<Button>
<Grid Background="SkyBlue">
<Image Source="img.png" Stretch="None" />
</Grid>
</Button>
There is a solution: http://msdn.microsoft.com/ru-ru/library/ms752364.aspx
You can simply create ImageSource with new Format-object from another ImageSource. Format object specifies color mask for an Image.
You could try to apply a ShaderEffect as the Effect on the hover image or create a markup extension which transforms your image. Another possibility would be to encapsulate such logic in a subclass of Image.