I would like to know how I can create one image from many. I would like to create a tile in my windows phone application like in this image (specifically, the People tile):
(source: addictivetips.com)
I have nine pictures, and I would create an image, that I will add like tile to background. Does anybody know how can I create an image that looks like the one in that picture?
I have very little experience in this space, but have you considered creating a control that simply displays up to 9 pictures side by side in a grid like that? You then can bind each image independently & change them out however you want. This article touches on how to bind phontos in WP7 nicely:
http://msdn.microsoft.com/en-us/library/hh286418(v=vs.92).aspx
If you're talking about assembling an actual graphic image like a jpeg or bitmap, you'll need to look at the Image Class, Bitmap Class, and Graphics Class. Essentially you'll need to implement the following steps:
Load the relevant images with From method in Image, typically Image.FromFile.
Determine how many rows and columns you'll be using.
Calculate the total width and height for your layout using the widths and heights of the loaded images with appropriate padding added.
Create a new Bitmap of the appropriate size with the correct background color and iamge format.
Have variables for the current drawing location (x & y).
Have variables for the current row and column in your layout.
In a loop, Create your Graphics object.
Use Graphics.DrawImage to add your loaded image to the layout bitmap.
Increment your drawing row and or column as appropriate.
Calculate your new drawing location.
Repeat until done.
One of the options is to use WriteableBitmapEx
Also you can probably find an answer to your question here: How can I merge two images into one?
Related
How can I load 2 Images in one PictureBox ?
Here is an example:
http://postimg.org/image/l78kth897/
Thank you so much.
You can use Graphics.DrawImage() to draw any image anywhere inside a PictureBox or any other control for that matter. If you're writing your own control, override OnPaint(). If you want to use an existing PictureBox, simply use its Paint event to do this:
e.Graphics.DrawImage(YourImageObjectHere, ...);
e.Graphics.DrawImage(YourSecondImageObjectHere, ...);
GDI+ already supports transparency channel, so if your images have transparent areas, they'll draw just like the sample image you have posted. DrawImage() has over a dozen overloads, using which you can control several aspects of how an image is drawn. The simplest one takes the image object and the position to draw at.
Remember that an image object is an object of System.Drawing.Image or one of its derived classes. If all you have is the path of the image, you should use Image.FromFile() to create an Image object from that image file first.
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.
I'm doing some programming in WPF. My goal is creat a TRPG(Text-RPG), so a map is definitely needed.
I got a PNG picture that can be separated in 5×5.
I want to separate this PNG, the add some Code on these little squares, for example, the picture's code in left bottom corner is (0, 0).
(I'll add functions to make sure I'll be able to travel on this MAP later.)
Now I want to figure out how can I separate the PNG?
Then add it in my code?
Creat a new .cs? .edmx?
I'd recommend taking a step back and concisely identify exactly how you plan to represent geographic area in your application.
If you are planning to have an NxM grid to display geographic area of the "map" in your app, you might want to instead just draw the map's "image" on the background of your window. You can then overlay transparent controls on top of the actual map (such as labels for the individual grid cells).
Fortunately, WPF provides a very applicable layout mechanism for you to do this, a Grid.
See http://wpftutorial.net/GridLayout.html.
You can create a dynamic bitmap array. and define all of the bitmaps and just run a foreach loop to draw them.
Bitmap[] bitmapArray = new Bitmap[width * height]; //the size of your map
for(int i = 0; i <= bitmapArray.Length - 1; i++)
{
//Define the bitmaps here
}
foreach(Bitmap b in bitmapArray)
{
//Drawing Code
}
Hello I need to know how I can manage to resize and draw pictures in a given space and the top and left values are stored in a database or XML. What elements need to use?
I put pictures of the software that works to perfection, really need to create something like what is shown in the following images:
Imagen 2
Imagen 3
Thanks!!
You probably want a canvas with a resizing adorner that tells the elements what size and placement to draw. Here is one such example.
I am working on a project where I need to play with two bitmaps. I am putting them in a grid one over the other with reduced opacity (to give a watermark effect).
I am rendering the grid to a bitmap using RenderTargetBitmap and saving the bitmap to a file.
Now my requirement is to load the rendered bitmap again and recover the original pictures separately. Is there any way to recover the original images again. I am not able to think any algorithm to implement this.
My aim is to give a watermarking effect and then recover the images individually.
No. The information is lost during "flattening" of the image.
You need to save both images and information about their properties (position, opacity) into single file. And restore it on load.
If your goal is to simulate watermarking and allow later 'dewatermarking', then assuming that you have your watermarking bitmap present at decoding time, you probably can do that. Sure you cannot use your initial approach - just simple merging of two layers is not reversible.
You need to use some reversible transformation, like rotating source image pixel RGB values vector, using watermark image pixel RGB values as parameters. While dewatermarking you just use negative values from watermark image.
Well, RGB vector is not ideal - you can go out of RGB space while rotating it. Probably you can find color space (or some other transformation in RGB space), better suited to your goal.
(English is not my first or even second language, thereby I apologize if you can't understand my idea - just ask over.)
Why don't you try to make it two layers of bitmap?
i wonder if you can use TIFF format, where you can store multiple images. that way on display you can choose to show with/without watermark.