Develop Reference

WPF - C# - Creating and setting image coordinates in code - behind

I currently work on WPF application according to my AI interest.
I wrote a Uniform Cost Search algorithm (pathfinding) and want to present it in graphical way.
Path should be found and show on a graph which could be adjusted by user.
I'm quite new in WPF technology, I worked more with WinForms and now have a problem with creating and managing graphical elements.
In other words - I want to give opportunity to click on data grid and create your own node (sth like place on a map) which is represented by a picture, when you have a few nodes you can choose two of them and connect them to make a connection, finally you can select your start and end point and algorithm will show the shortest path (color the suitable connections).
That's it.
Image with interface
I started with adding a CreateNode method which gets click's coordinates and create a point with right X and Y. Now there is a problem with creating an image in that specific place.
I read some questions on Stack and tried to write something with Image and BitmapImge classes but still don't know how to place it in specific place.
I read about manipulating margins but aren't there any easier solutions?
Here's part of that image loading code:
public void CreateNode(Node n)
{
Point point = new Point(n.X, n.Y);
Image node = new Image();
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("point.png");
logo.CacheOption = BitmapCacheOption.OnLoad;
logo.EndInit();
node.Source = logo;
}
If someone has any ideas how to create these methods in case of graphics I will really aprreciate that.
Thanks in advance
Paweł
EDIT: I was said to create new topic for my code problem so here is that here

Moving my comment to an answer to provide a little more information.
With the positioning, I'd recommend watching this video on advanced XAML techniques. He uses a custom ItemsControl and Canvas to bind the longitude and latitude of delivery trucks to show as graphics on a map. I think some of his techniques could work in your situation (or give you further ideas). I've linked to the a timestamp at the start of the relevant section.
The source code for the relevant demo is available here. See Events - 2014 TechEd Europe - DEV-B311 XAML Techniques - Demo05
The main difference from what you're doing to the video is that he uses Paths where you want to use images. You'd need to change the DataTemplates in App.xaml.cs to use images.
The video assumes some knowledge of MVVM, so if that's new to you, it's probably worth checking out a tutorial. You can find some recommendations in the answers to this question. I'd also recommend one on Rachel Lim's Blog. I found her tutorials very useful.
The first linked tutorials on WPF look like they will be useful to you. In addition to the basics it includes using images in DataTemplates.

WPF Printing Large Canvas over multiple Pages

I've got this problem:
I created a pretty large Canvas in WPF with a lot children.
I want to add a Print Button. PrintVisual seems not to work, because the image is to big. (I am using a scrollbar) I want to split the Canvas between multiple pages.
What i've done so far:
I am taking a Visual Brush for every part of the Canvas
Create a new Canvas and make the visual brush its background
Adding the new Canvas to a page, add the page to a FixedDocument.
Well, now i've got a FixedDocument and going to print it via printDocument.
The Problem is, that the whole process of printing takes a lot of time and sometimes it doesn't work at all. It's like there is a preprocessing step to convert the fixed document into a bitmap.
My Question: Is a Visualbrush in a Canvas to big? Should i convert the Canvas first into a bitmap?
I've found this great article: http://www.codeproject.com/Articles/339416/Printing-large-WPF-UserControls.
Whatever.
Is it a good way to convert a huge canvas into a bitmap first and then print parts of the bitmap? I could very well imagine, that one could get problems with blurring effects this way.
I've got also no idea how to add a bitmap to a page in wpf.
The worst thing is, that i couldn't found some really good sorces or a standardway (and i think there has to be one, cause this should be a pretty standard problem) for printing dynamic produced canvas in wpf.
I am really greatful for every really good source, help or code.
Thank you for your time.

How to get a ScrollViewer to zoom in to see individual pixels?

I'm making an app for Windows 8.1 where it is important to be able to zoom in and examine images in detail. If I just open up the bitmap and zoom in it looks like.
However when I load the image into my app and use the ScrollViewer to zoom in I get.
As it appears to be trying to interpolate pixel values for some sort of anti-aliasing.
How can I get it so that when I zoom in it shows (as best it can) the exact pixels of the image? In particular I'm using the image as the background to a canvas which is contained in a scroll viewer.
I've looked around on here and MSDN and found a pair of related questions, but as yet they don't seem to have solved my exact problem.
A discussion on WPF
A similar issue with a canvas
Older related question on pixel art
A way to use bitmap encoding (which I couldn't get to work)
Similarly phrased question

There is no easy way to go about this, your best option is to use DirectX to render the image much larger so that you can mitigate the effect of WinRT automatically interpolating pixel values.
As someone explained on MSDN and based on this outstanding request I can't see any other way to accomplish this.
Use Win2D
Win2D is a DirectX inter-op library for WinRT. With this you can render the image at a much larger size, and then set the default zoom level for the scrollViewier to be very small. Because of this when you zoom in it will appear to be that you can see the individual pixels without any fuzzy/blurry interpolation because you will actually be seeing groups of 64 pixels or so all as one color. I couldn't find any way to actually override what kind of interpolation gets done so this seems to be the best method.
Download Win2D as a NuGet package using Visual Studio, Win2D's
quickstart guide does a good job explaining some of the setup
Set up your canvas and the draw event and use the DrawImage function to render the image larger
<ScrollViewer x:Name="Scroller" ZoomMode="Enabled"
MinZoomFactor="0.1" MaxZoomFactor="20">
<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" CreateResources="create"/>
</ScrollViewer>
In the canvas_draw function.
canvas.Width = original.Width * 10;
canvas.Height = original.Height * 10;
args.DrawingSession.DrawImage(bitmap,new Rect(0,0,original.Width*10,original.Height*10), new Rect(0,0,original.Width,original.Height), 1.0f, CanvasImageInterpolation.NearestNeighbor);
Make sure to set your canvas to be larger as well
In your code behind set the default zoom of your ScrollVieiwer to be appropriate so your image appears to be the same size.
In the page constructor
Scroller.ZoomToFactor (0.1f);
Other Ways Which I Looked Into and Didn't Work
Making the canvas very large and using BitmapEncoder/BitmapDecoder with the interpolation mode set to NearestNeighbor, this introduced lots of visual artifacts even when scaled to a power of 2 size
Render options only appear to be usable in WPF and not WinRT
It may also be possible to use some image manipulation library to simply make the bitmap 10x or so as large and then use that, but I ended up using Win2D instead.

How to change the contrast of an image using emgu

I am trying to improve the quality of an image.
I use emgu for this.
I use this code to change the contrast (I think!).
Image<Bgr, byte> improveMe = new Image<Bgr, byte>(grid);
improveMe._EqualizeHist();
For a daytime image I get this:
For a night time image I get this:
Obviously, not so good!
The 1st image is nice and lush and the 2nd is as you can see could be descirbed as over-exposed.
Are there ways to avoid get such a poor image at night-time? Is it because the image is now lower in color channels (if that makes sense)? Should I check for min/max color ranges of an image before deciding to apply this filter? Should I use a completely different filter?
Reading material links are welcome answers as well...

There are many ways to do this some better then others depending whether is a video feed, still and even camera shutter speed... and so on.
I would recommend you to try "adaptive threshold" (EMGU ThresholdAdaptive function) and also check some white balance algorithms. Check this one: White balance algorithm

Resizing an image using Magick.net

I've got an image that I want to resize using Magick.net before displaying in an ASP .Net page, but when I look at the displayed image in my browser, it comes up as a broken image.
Here's what my code would look like if I wasn't resizing:
this.LogoBox.Image = _myModel.LogoImage;
Here's what my ImageMagick-using code looks like:
var logoToDisplay = new MagickImage(new Bitmap(_myModel.LogoImage));
logoToDisplay.Resize(imageWidth, imageHeight);
this.LogoBox.Image = logoToDisplay.ToBitmap();
When I take out the second ...Resize... line, nothing comes up. I can't seem to find good documentation for Magick.net, even on the CodePlex site.
Any thoughts?

When you use the ToBitmap method your image will be converted to Bmp. You probably want to use another image format, e.g. ImageFormat.Png or ImageFormat.Jpeg. Feel free to post a message here also: https://magick.codeplex.com/discussions. And can you also put up a link to the image you are trying to resize?