We Keep Coding

DrawingImage is getting fuzzy and image gets bigger and cut-off when Windows scaling is set to more than 100%, for example 125%

I have an WPF usercontrol which is used in a winforms applications. WPF usercontrol is contained within an ElementHost container.
This WPF usercontrol has some images, button with images, labels, etc.
I have a dictionary with some geometries, the following is one of them.
<Geometry x:Key="hlpGeometry">F0 M22,22z M0,0z M11,22C17.0751,22 22,17.0751 22,11 22,4.92487 17.0751,0 11,0 4.92487,0 0,4.92487 0,11 0,17.0751 4.92487,22 11,22z M12.1901,16.6889L10.2662,16.6889 10.2662,18.6998 12.1901,18.6998 12.1901,16.6889z M8.18758,5.59005C7.40125,6.43439,7.00808,7.55265,7.00808,8.94484L8.72898,8.94484C8.76121,8.10695 8.89334,7.46564 9.12537,7.02091 9.53787,6.2217 10.2823,5.82209 11.3587,5.82209 12.2288,5.82209 12.8508,6.05412 13.2246,6.51818 13.6049,6.98224 13.795,7.53009 13.795,8.16173 13.795,8.61291 13.6661,9.04797 13.4083,9.46691 13.2665,9.70539 13.0796,9.9342 12.8475,10.1533L12.0741,10.9171C11.3329,11.6454 10.8527,12.2932 10.6336,12.8604 10.4144,13.4211 10.3049,14.1623 10.3049,15.084L12.0258,15.084C12.0258,14.2719 12.116,13.6596 12.2965,13.2471 12.4834,12.8281 12.8862,12.319 13.505,11.7195 14.3557,10.8945 14.9197,10.2694 15.1969,9.84396 15.4804,9.41857 15.6222,8.86427 15.6222,8.18107 15.6222,7.05314 15.2387,6.12824 14.4718,5.40636 13.7112,4.67804 12.6961,4.31388 11.4263,4.31388 10.0535,4.31388 8.9739,4.73927 8.18758,5.59005z</Geometry>
<DrawingGroup x:Key="hlpDrawingGroup" ClipGeometry="M0,0 V22 H22 V0 H0 Z">
<GeometryDrawing Brush="#FF00AA2B" Geometry="{StaticResource hlpGeometry}" />
</DrawingGroup>
<DrawingImage x:Key="ico_helpDrawingImage" Drawing="{StaticResource hlpDrawingGroup}" />
I have an WPF Image and I bound above DrawingImage to it using the Source attribute. I bind the source attribute to a property in the view model.
Something like below:
<Image x:Name="MyImage"
Height="24"
Width="24"
VerticalAlignment="Center"
Source="{Binding Path=MyIcon}"/>
It is working fine when windows is scaled to 100% but when scaled to a higher one, let's say, 125%, then the image gets fuzzy.
Also the image look like gets bigger than 24x24 and it is being cut-off when I set a scale greater than 100% (125%).
How can I make image to not get fuzzy and set image to always be the same size 24x24?

You can use the UseLayoutRounding and SnapsToDevicePixels properties.
Set the UseLayoutRounding property to true to prevent blurring caused by anti-aliasing and to tell the layout system to align elements with pixel boundaries.
RenderOptions.BitmapScalingMode is mainly for larger images to be displayed more smoothly, you can choose HighQuality.
Use high quality bitmap scaling, which is slower than LowQuality mode, but produces higher quality output.
You can check this link:
https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapscalingmode?redirectedfrom=MSDN&view=windowsdesktop-7.0
Code：
<Image x:Name="img" MouseWheel="img_MouseWheel"
Height="24"
Width="24"
UseLayoutRounding="True"
SnapsToDevicePixels="True"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Source="2.jpg"/>

With images I have always found the below to always clear up the fuzzy stuff.
<Image x:Name="MyImage"
Height="24"
Width="24"
RenderOptions.BitmapScalingMode="HighQuality"
VerticalAlignment="Center"
Source="{Binding Path=MyIcon}"/>

Neon/Glow effect in C#/WPF

I'd like to create a neon(-like) effect in wpf/c#, to be used on a series of polylines.
The closest i come to this was using blur (not very close, but eh), but the it dims the colors too dark and I have no idea how to make even that glow. Is there an effect close to this, or I should try to write a shader for it somehow?
I'd like to do this for a school project and i'd rather not turn in a bunch of outside libraries for a small amount of self-written code. Also about google: most of the stuff i found were pretty much using blur/dropshadow to create these fading colors, not something that actually has this neon-y effect.

As others have already suggested you should use DropShadowEffect to achieve a neon-like effect:
<Canvas Height="120" Width="280" Background="Black">
<Polyline
Points="10,110 60,10 110,110 105,110 60,18 15,110 10,110"
Stroke="#BB0000"
Fill="#FF0000"
StrokeThickness="2" >
<Polyline.Effect>
<DropShadowEffect Color="#FF9999" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
<Polyline
Points="10,105 110,105 110,10 115,10 115,110 10,110 10,105"
Stroke="#00BB00"
Fill="#00FF00"
StrokeThickness="2"
Canvas.Left="150">
<Polyline.Effect>
<DropShadowEffect Color="#99FF99" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
</Canvas>
Unfortunately there is no built-in effect which is specifically designed to create neon effect, but by tweaking the colors you can create quite good (or at least acceptable) results (especially for a school project...):

How to Flip and Rotate image in C# Windows 8.1 Store App

I am trying to flip and rotate image in C# (for Windows Store App).
And it becomes complicated if I try to flip image which is rotated first by some angle say x.
I see
Image.RotateFlip
method is available only in for Dektop apps.
Is there any existing API that can help in this situation? Any help appreciated :)

If you are working on a Windows Store App (in C#), I am assuming that you are using XAML for your GUI. If that is the case and you want to perform a rotation, This bit of markup should do it.
For Rotation :
<Image Source="/Assets/Logo.png" >
<Image.RenderTransform>
<RotateTransform Angle="90"/>
</Image.RenderTransform>
</Image>
For Flipping :
<Image Source="/Assets/Logo.png">
<Image.RenderTransform>
<ScaleTransform ScaleY="-1"/>
</Image.RenderTransform>
</Image>
If you want to perform an animation, you might want to take a look at this answer.

SnapsToDevicePixels doesn't work with images?

I've encountered a problem with bitmap images in WPF. When the image container starts on a position which is not a whole number, the image seems to not respect the value of SnapsToDevicePixels.
Example code:
<Window x:Class="BlurryImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="110" Width="200">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button SnapsToDevicePixels="True">
<Image SnapsToDevicePixels="True" Source="i16.png" Stretch="None"/>
</Button>
<Button SnapsToDevicePixels="True" Margin="10.333333,0,0,0">
<Image SnapsToDevicePixels="True" Source="i16.png" Stretch="None"/>
</Button>
</StackPanel>
</Window>
(Note the value of the left margin: 10.333333.)
Here the image i16.png is a simple 16x16 bitmap in 96 DPI resolution with thin vertical lines: . (My system resolution is 96 DPI, Windows XP, .NET 4)
When I run the program, the first image is sharp, whereas the second one is blurry:
Different sources, including some here on stackoverflow, suggest different workarounds. (For example, these posts: [1], [2] and [3].) I tried the workarounds, and them seem to work. Using UseLayoutRounding="true" on the main window makes both images sharp. Using RenderOptions.BitmapScalingMode="NearestNeighbor" on the image makes it sharp, too.
The question is, why doesn't SnapsToDevicePixels="True" work without workarounds? Is it a bug in WPF or I am using it in a wrong way?

From this blog entry:
SnapsToDevicePixels
WPF anticipated that there would be cases where people wanted to align
with the pixel grid instead of using sub-pixel precision. You can set
the SnapsToDevicePixels property on any UIElement. This will cause us
to try and render to the pixel grid, but there are quite a few cases
that don't work - including images. We will be looking to improve
this in the future.
So it's just a known limitation of what SnapsToDevicePixels can do.

Display only certain portion of an image file in an Image

I want to be able to have an Image object render just a portion an image, that I will control programatically. For example, this is what I have so far:
<Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Height="160"
HorizontalAlignment="Right" Name="avatarImage" Stretch="None"
VerticalAlignment="Center" Width="160"
Source="/Crystal%20Cloud;component/data/images/characters.png"
Margin="0,0,40,0" />
I want to only render one of the characters at a time, and use the button to change which one it renders. Can I do this, and if so, how?

You can definitely use the ImageBrush.Transform to extract the portion of the bitmap that you are interested in, and if you do not require very high frame rates that is the way to go.
However if you are going to need to optimize the frame rate then you can dynamically extract the individual bitmaps from the sprite sheet and cache those bitmaps and display them as required. The blog post below provides some code that you can use to extract the individual bitmaps, that you can then cache.
http://taylorza.blogspot.com/2009/08/silverlight-spritesheet-management-with.html
Remember the key to performance here is that you cache the bitmaps and do not go through all the trouble of extracting them each time you need a new image.

You also can place your image inside a Canvas and define a clip for it (visible portion). Then for animating the character you can programatically change the Top and Left of the image in time intervals:
<Canvas Width="200" Height="100">
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 200, 100"/>
</Canvas.Clip>
<Image x:Name="imgCharacter" Source="..." Canvas.Left="..." Canvas.Top="..." />
</Canvas>
imgCharacter.SetValue(Canvas.LeftProperty, currentFrame.Left);
imgCharacter.SetValue(Canvas.LeftProperty, currentFrame.Top);