Develop Reference

Add images on chart control

I'm not sure if I titled the question correctly so it would be better if I explained what I'm trying to do. I want to add some images on chart control and
around their to draw graphics.
I want to display the layout of the sensors on the coordinate plane defined by coordinates, while noting the location of geographic objects (forest, river, etc.). These objects will be images which I want to add to the chart/
How can I do it? It is possible?

If you show us an example we may be able to help to find the best way.
There are several options.:
You can place image controls like PictureBox or Panel on the Chart by adding them to the chart's Controls collection
You can draw them in the Pre- or PostPaint event
You can assemble a BackImage that contains all the Images you want to place around the chart.
You can add ImageAnnotations to the chart. (Recommended)
The latter obviously is the one that is best integrated.
Here is an example:
We start by adding the images we want to use to the Chart's Images collection:
List<string> imgFiles = new List<string>()
{ yourImageFileName1, ...};
for (int i = 0; i < imgFiles.Count; i++)
{
Image img = Bitmap.FromFile(imgFiles[i]);
chart1.Images.Add(new NamedImage("Image" + i, img));
}
Note the NamedImage class used here. It allows you to refer to the images by a string; pick better names! Maybe Path.GetFileNameWithoutExtension(imgFiles[i]) - Also note that you must not Dispose of the Images or else they will disappear!
Next make make a little room at the right side of the chart by reducing the ChartArea's size:
ChartArea ca = chart1.ChartAreas[0];
ca.Position = new ElementPosition(5,5,70,90);
Note the values are percentages of the Chart's ClientSize, so they will grow and shrink when resizing the Chart!
Finally we can add them all. You will want to add them at specific positions. I add them at some space to the right and also make them moveable:
foreach (NamedImage img in chart1.Images)
{
ImageAnnotation ia = new ImageAnnotation();
ia.Image = img.Name;
ia.AllowMoving = true;
ia.X = 77;
ia.Y = 15 * chart1.Images.IndexOf(img) + 5;
chart1.Annotations.Add(ia);
}
Now you should see the Annotions. And if you add this event:
private void chart1_AnnotationPositionChanging(object sender,
AnnotationPositionChangingEventArgs e)
{
testLabel.Text = e.Annotation.X + " " + e.Annotation.Y;
}
..you will see just what the numbers for the best position are. Eventually you will not keep them moveable, of course..
Note the the Annotations' position is also in percentages, so they will move along nicely, when the chart get resized! You may also scale the Images by setting the Width and Height; this is a little tricky, as it will also be in percent (and not as the docs falsely state in pixels). You would probably want to loop over the ImageAnnotations and rescale them in the Resize event..: ia.Height = ia.Width * chart1.Width / chart1.Height;
Also note that there are other ways to position annotations, like anchored to datapoints, but this seem the best for a static adornment.

Strange Behavior with Pictureboxes

I am experiencing strange behavior with PictureBoxes and have narrowed down a test case.
I have four PictureBoxes on my test form. Two have a background color set ... one red, one blue:
If I add the following code, the red Picturebox correctly parents itself to the upper Picturebox:
this.redPictureBox.Parent = this.pictureBox1;
this.redPictureBox.Location = this.pictureBox1.Location;
this.redPictureBox.Height = this.pictureBox1.Height;
this.redPictureBox.Width = this.pictureBox1.Width;
This works as expected:
However, if I add code to do the exact same thing with the blue PictureBox, nothing happens. In fact, it appears that the second PictureBox from the top disappears altogether:
this.bluePictureBox.Parent = this.pictureBox2;
this.bluePictureBox.Location = this.pictureBox2.Location;
this.bluePictureBox.Height = this.pictureBox2.Height;
this.bluePictureBox.Width = this.pictureBox2.Width;
Why is this behavior occuring? I must be missing something obvious but the code between the two is identical ... so why the different behavior?

I suspect this is the problem:
this.bluePictureBox.Location = this.pictureBox2.Location;
You're setting the location of the blue picture box within picture box 2 to be the location of picture box 2 relative to the container. I suspect you want:
this.bluePictureBox.Location = new Point(0, 0);
The only reason this wasn't much of an issue for the red picture box is that picture box 1 is near the top of the screen. Even so, you can see that it's not the full height/width that it was, and it's not at the top-left of picture box 1.

How to choose a Photo Selector?

I want the user be able to choose an avatar for himself. I implement selecting an image like this:
PhotoChooserTask photoChooser = new PhotoChooserTask();
photoChooser.Completed += photoChooser_Completed;
photoChooser.Show();
But after this, I want to show a one cell grid, and user can zoom in and out the picture to locate a part of image which wants be in the avatar. just like Instagram apps or WhatsApp.
How can I implement this second part? any reference or any example is appreciated. thanks

Set the PixelHeight and PixelWidth properties of the PhotoChooserTask before calling Show. The user will then be able to crop the image to the dimensions set.
PhotoChooserTask photoChooser = new PhotoChooserTask();
photoChooser.PixelHeight = 100;
photoChooser.PixelWidth = 100;
photoChooser.Completed += photoChooser_Completed;
photoChooser.Show();

For the "locating a part of the image" question, i think this will help
Getting a particular Portion of Image (Picture)
Display the image inside a rectangle and you can cut out only the part that appears inside the rectangle.

Images Scaling Down in draw in C#

Alright guys last little bit of this project I'll ask for help on I promise.
So I go to load the images, works fine however I notice upon loading that the dimensions of the image have been scaled down in the y to 300 (all are a constant value of 433) and up or down from their original width to 600.
I'm using the following method to load them
foreach (string file in Directory.EnumerateFiles(imagePath, "*.JPG"))
{
Image contents = Image.FromFile(file);
treesImage[count] = contents;
count++;
}
and this is the resulting image when I have it loaded.
http://i.stack.imgur.com/Q40kK.png
As you can see the image below the red rectangle is quite small
Any help would be appreciated. If you require any more information please post below and I'll make sure to edit the original question with the relevant information as soon as humanly possible.
EDIT: I am using a simple windows form application and not another graphical framework for my own reasons.
Thanks in advance :)

I'll assume you are using a PictureBox control to display the image.
When someone chooses a tree from your map, you obviously set the PictureBox Image property to the image object referenced by the index in the array. Use the Image object to set the ClientSize of the PictureBox control.
...
Image img = treesImage[idx];
MyPictureBox.SizeMode = PictureBoxSizeMode.Normal;
MyPictureBox.ClientSize = new Size(img.Width,img.Height);
MyPictureBox.Image = img;
...
Alternately you can define one size for your PictureBox and force all the images to be scaled to that size by setting the control SizeMode property to StretchImage declaratively.
I would recommend that you create a simple class (MyImageInfo for example) that would store the Path, Width, and Height of the images found in your first function into a list and then just as before when a user clicks to view an image you set the width and height of the PictureBox and then call the LoadAsync(path) method to get the image. then you aren't storing all images in memory at once, just as you need them since it doesn't look like this requires a lot of quick jumping from image to image.

Scaling down a high resolution set of co-ordinates?

Here is some background to the problem. We are working with an EyeVis wall setup, see this link: http://www.eyevis.co.uk/
The EyeVis wall can have any number of 'windows' displayed on the wall at any time. We query the wall for its size dimensions, and then query it for a list of all the windows currently being displayed on the wall. This comes back as a set of co-ordinates as follows:
Left, Top, Width, Height
So at this stage we have the size of the wall, and the co-ordinates of each window being displayed within that wall.
What we need to do is display a representation of the wall's layout on a monitor being viewed by the controller. The controller will then select one of the windows (from the monitor) and this window will be enlarged on the EyeVis wall.
I have tried a few things, in the hope that there might be a simple way to achieve this. One idea I had was this:
Create a panel in code with the dimensions of the wall.
Add each window to this panel using the co-ordinates.
Add the main panel to a form and dock the panel
I thought this would auto scale all the panels within the main panel and we would see the layout, but docking at runtime doesn't seem to behave the way I imagined?
This is the code I had: (Using C#)
Panel mainPanel = new Panel();
mainPanel.Width = eyeVisWallWidth;
mainPanel.Height = eyeVisWallHeight;
foreach (Window thisWindow in windowList)
{
Panel newWindow = new Panel();
newWindow.Top = thisWindow.windowTop;
newWindow.Width = thisWindow.windowWidth;
newWindow.Height = thisWindow.windowHeight;
newWindow.Left = thisWindow.windowLeft;
Label newLabel = new Label();
newLabel.Text = thisWindow.windowID.ToString() + ":" + newWindow.Height + ":" + newWindow.Width;
newWindow.Controls.Add(newLabel);
newWindow.BorderStyle = BorderStyle.FixedSingle;
mainPanel.Controls.Add(newWindow);
}
this.panel1.Controls.Add(mainPanel);
mainPanel.Dock = DockStyle.Fill;
mainPanel.Anchor = AnchorStyles.None;
So now I'm starting to think this might have to be solved with math, which is really not my strong point. Does anyone have any advice or a pointer to something which might help me with this?
Any help appreciated!
Regards
Adrian

Forgot to close thise, we just ended up dividing all the co-ordinates by a common factor.