We Keep Coding

How to paint Images instead of colors from a Panel to another Panel?

I need to paint images from one panel to another panel like painting colors in a Windows Forms application but not colors, only Images.
I use an OpenFileDialog to open multiple images onto a panel and then paint those images by clicking on one and painting it with my mouse to the panel2.
My code for the openstripmenuitem:
private void openProjectToolStripMenuItem_Click(object sender, EventArgs e)
{
OpenFileDialog ofd = new OpenFileDialog();
ofd.Title = "Please select your files";
ofd.Multiselect = true;
ofd.Filter = "PNG|*.png|JPEG|*.jpeg|GIF|*.gif|TGA|*.tga|DDS|*.dds";
DialogResult dr = ofd.ShowDialog();
if (dr == System.Windows.Forms.DialogResult.OK)
{
string []files = ofd.FileNames;
int x = 20;
int y = 20;
int maxheight = -1;
foreach(string img in files)
{
PictureBox pic = new PictureBox();
pic.Image = Image.FromFile(img);
pic.Location = new Point(x, y);
pic.SizeMode = PictureBoxSizeMode.StretchImage;
x += pic.Width + 10;
maxheight = Math.Max(pic.Height, maxheight);
if (x > this.ClientSize.Width - 100)
{
x = 20;
y += maxheight + 10;
}
this.flowLayoutPanel1.Controls.Add(pic);
}
}
}
Any advice code examples welcome or link to references.

How to popup Image using codes UWP

I have an app load pictures from the internet I want to add a popup event to the image so the user can view the image by click on it !
I've try a lot of things to do that all that I can found is to resize the image or just view a content dialog with a text on it !
Here's my code :
private static void view_tapped(object sender, TappedRoutedEventArgs e)
{
Viewbox image = sender as Viewbox;
Panel parent = image.Parent as Panel;
if (parent != null)
{
image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
parent.Children.Remove(image);
parent.HorizontalAlignment = HorizontalAlignment.Stretch;
parent.VerticalAlignment = VerticalAlignment.Stretch;
parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag = parent });
}
else
{
Popup popup = image.Parent as Popup;
popup.Child = null;
Panel panel = popup.Tag as Panel;
image.RenderTransform = null;
panel.Children.Add(image);
}
}
I want it to look like that I want to keep my old image in the same place and create a new grid that have the same image like this image you can view it here
I can't use the xaml file because my image load from the web by code using a dll file !

The reason why the image doesn't display is because you don't add an Image control into the ViewBox to display the image content, you can try the following code to display an image in the popup.
private void Viewbox_Tapped(object sender, TappedRoutedEventArgs e)
{
Viewbox image = sender as Viewbox;
Image imageControl = new Image() { Width = 500, Height = 500 };
Uri uri = new Uri("Your image URL");
BitmapImage source = new BitmapImage(uri);
imageControl.Source = source;
image.Child = imageControl;
Panel parent = image.Parent as Panel;
if (parent != null)
{
image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
parent.Children.Remove(image);
parent.HorizontalAlignment = HorizontalAlignment.Stretch;
parent.VerticalAlignment = VerticalAlignment.Stretch;
parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag=parent});
}
else
{
Popup popup = image.Parent as Popup;
popup.Child = null;
Panel panel = popup.Tag as Panel;
image.RenderTransform = null;
panel.Children.Add(image);
}
}
By the way, please notice that the Popup is a control that displays content on top of existing content, within the bounds of the application window, and pay attention to the Remarks part,
Do not use a Popup if a Flyout, MenuFlyout, ToolTip or ContentDialog (MessageDialog for a Windows 8 app) is more appropriate.

How to select Images on Picture Boxes based on mouse click

I have 4 Picture box loading images. I want to select these images based on mouse click. For example If I click images from picturebox 1 and 2, I want to get images from these picturebox 1 and 2 only.The function look like Gallery in Android phones.

it is not very difficult. create pictureBoxes dynamically, add them the same Click handler and store images from selected pictureBox
e.g. gallery form (last picture is selected)
public partial class GalleryForm : Form
{
// stores selected images in order of adding
private readonly List<Image> _gallery = new List<Image>();
private readonly Random _rnd = new Random();
// handle pics layout on form
private readonly FlowLayoutPanel flowPanel;
public GalleryForm()
{
InitializeComponent();
Name = "GalleryForm";
Text = "Gallery";
ClientSize = new Size(276, 274);
// flowPanel will contain picture boxes with images
flowPanel = new FlowLayoutPanel();
flowPanel.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left| AnchorStyles.Right;
flowPanel.Location = new Point(12, 12);
flowPanel.Name = "flowPanel";
flowPanel.Size = new Size(252, 250);
int picsCount = 4;
var picSize = new Size(100, 100);
var imSize = new Size(50, 50);
// creates required number of picture boxes with simple images
for (int p = 0; p < picsCount; p++)
{
var picBox = new PictureBox();
picBox.Name = "pic" + (p+1).ToString();
picBox.Size = picSize;
picBox.SizeMode = PictureBoxSizeMode.Zoom;
picBox.Image = GetImage(p, imSize);
picBox.Click += ClickOnImage;
flowPanel.Controls.Add(picBox);
}
Controls.Add(flowPanel);
}
// click handler
private void ClickOnImage(object sender, EventArgs eventArgs)
{
var picBox = (PictureBox) sender;
if (_gallery.Remove(picBox.Image))
// if _gallery contained image, remove selection
picBox.BorderStyle = BorderStyle.None;
else
{
// add selection
picBox.BorderStyle = BorderStyle.Fixed3D;
// add image to _gallery
_gallery.Add(picBox.Image);
}
}
// creates image with solid background
private Bitmap GetImage(int p, Size s)
{
var bmp = new Bitmap(s.Width, s.Height);
using (Graphics gr = Graphics.FromImage(bmp))
gr.Clear(Color.FromArgb(_rnd.Next(255), _rnd.Next(255), _rnd.Next(255)));
return bmp;
}
}

Panel and ScrollBar in Windows forms

I am using a panel to display a image in windows forms
I am drawing image in the panel in Panel_Paint event as follows:
Graphics g = panel1.CreateGraphics();
Image im = new Bitmap(#"../../Data/#3_Page2.PNG");
g.DrawImage(im,new Point(10,10));
Now, the image is drawn as i expected, with some part of the bottom of the image not displaying as its height is greater than forms height.
I have added the VScrollBar now. How do i make that panel to view the rest of the image with the help of VScrollBar.

You can use PictureBox with SizeMode set to AutoSize and AutoScroll property of Panel. That way the panel should add scrollbars if they are needed.
PictureBox pictureBox = new System.Windows.Forms.PictureBox();
pictureBox.Image = new Bitmap(#"../../Data/#3_Page2.PNG");
pictureBox.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
panel.AutoScroll = true;
panel.Controls.Add(this.pictureBox);

This solution works, however if your image is large enough, there is a little flicker when you scroll (however it's acceptable). First you have to add a VScrollBar right on the right of your panel and a HScrollBar right under the bottom of your panel. This demo requires you have a VScrollBar named vScrollBar1 and HScrollBar named hScrollBar1, a Button named buttonOpenImage to allow user to open some image, a Panel named panel1 used as the main area to draw the image:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
//To prevent/eliminate flicker, do this
typeof(Panel).GetProperty("DoubleBuffered",
System.Reflection.BindingFlags.Instance |
System.Reflection.BindingFlags.NonPublic).SetValue(panel1, true, null);
//------------------------
UpdateScrollbarsState();
}
int imgWidth, imgHeight;
Image image;
Point leftTop = Point.Empty;
int lastV, lastH;
private void OpenImage(){
OpenFileDialog openFile = new OpenFileDialog();
openFile.FileOk += (s, e) => {
try {
image = Image.FromFile(openFile.FileName);
//calculate the physical size of the image based on the resolution and its logical size.
//We have to do this because the DrawImage is based on the physical size (not logical).
imgWidth = (int)(image.Width * 96f / image.HorizontalResolution + 0.5);
imgHeight = (int)(image.Height * 96f / image.VerticalResolution + 0.5);
lastV = lastH = 0;
UpdateScrollbarsState();
vScrollBar1.Value = 0;
hScrollBar1.Value = 0;
panel1.Invalidate();
}
catch {
image = null;
MessageBox.Show("Image file is invalid or corrupted!");
}
};
openFile.ShowDialog();
}
private void UpdateScrollbarsState() {
//We have to update all the info about Minimum and Maximum
vScrollBar1.Minimum = 0;
hScrollBar1.Minimum = 0;
vScrollBar1.Maximum = Math.Max(imgHeight-panel1.Height,0);
hScrollBar1.Maximum = Math.Max(imgWidth-panel1.Width,0);
vScrollBar1.Visible = vScrollBar1.Maximum > 0;
hScrollBar1.Visible = hScrollBar1.Maximum > 0;
if (vScrollBar1.Maximum == 0) {
leftTop.Y = 0;
lastV = 0;
}
if (hScrollBar1.Maximum == 0) {
leftTop.X = 0;
lastH = 0;
}
}
private void panel1_Paint(object sender, PaintEventArgs e) {
if (image == null) return;
e.Graphics.DrawImage(image, leftTop);
}
//The ValueChanged event handler of your vScrollBar1
private void vScrollBar1_ValueChanged(object sender, EventArgs e) {
if (!vScrollBar1.Visible) return;
leftTop.Offset(0, -vScrollBar1.Value + lastV);
lastV = vScrollBar1.Value;
panel1.Invalidate();
}
//The ValueChanged event handler of your hScrollBar1
private void hScrollBar1_ValueChanged(object sender, EventArgs e) {
if (!hScrollBar1.Visible) return;
leftTop.Offset(lastH - hScrollBar1.Value, 0);
lastH = hScrollBar1.Value;
panel1.Invalidate();
}
//handler for SizeChanged event of the panel. However if resizing
//the form causes the panel's size changing, you should attach this
//handler for form.
private void panel1_SizeChanged(object sender, EventArgs e) {
UpdateScrollbarsState();
}
//handler for the Click event of a button (click to open an image)
private void buttonOpenImage_Click(object sender, EventArgs e) {
OpenImage();
}
}

How do I dynamically create multiple PictureBox instances from images in folder?

I'm trying to create pictures boxes dynamically from a folder containing images, but in my code I can only create one picture box. How do I do to create one picture box per image?
Here is my code:
namespace LoadImagesFromFolder
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
string[] images = Directory.GetFiles(#"C:\Users\Public\Pictures\Sample Pictures", "*.jpg");
foreach (string image in images)
{
pictureBox1.Image = new Bitmap(image);
}
}
}
}

You're just rewriting the image value for your single PictureBox (pictureBox1), but you need to create a new PictureBox for every picture instead and set its value. Do that and you'll be fine.
Something like this (just an example, modify this to your needs!)
foreach (string image in images)
{
PictureBox picture = new PictureBox();
picture.Image = new Bitmap(image);
someParentControl.Controls.Add(picture);
}

You have to use a dialog to select the files, create the PictureBox controls dynamically in the foreach loop and add them to the form's (or other container control's) Controls collection.
private void button1_Click(object sender, EventArgs e)
{
OpenFileDialog d = new OpenFileDialog();
// allow multiple selection
d.Multiselect = true;
// filter the desired file types
d.Filter = "JPG |*.jpg|PNG|*.png|BMP|*.bmp";
// show the dialog and check if the selection was made
if (d.ShowDialog() == DialogResult.OK)
{
foreach (string image in d.FileNames)
{
// create a new control
PictureBox pb = new PictureBox();
// assign the image
pb.Image = new Bitmap(image);
// stretch the image
pb.SizeMode = PictureBoxSizeMode.StretchImage;
// set the size of the picture box
pb.Height = pb.Image.Height/10;
pb.Width = pb.Image.Width/10;
// add the control to the container
flowLayoutPanel1.Controls.Add(pb);
}
}
}