We Keep Coding

How can we pop-up picture boxes in c# forms like bing images search do

I am trying to make my dynamic generated picture boxes acts on a mouse hover like the "bing" do. Below is the picture attached of what bing search looks like on mouse hover :
Now this is my search results of a project I am working on, what i really want to do is that I want to make picture pop-up as the way which is shown above in bing search.
Please note that all of the picture boxes are generated dynamically on the run time.

if you are using picture boxes.
then you can enhance the current picture box like this
and use it.
//extending the picture box
public class PicControl : PictureBox
{
// variables to save the picture box old position
private int _OldWidth;
private int _OldHeight;
private int _OldTop;
private int _OldLeft;
public PicControl()
{
}
protected override void OnLoadCompleted(System.ComponentModel.AsyncCompletedEventArgs e)
{
_OldTop = this.Top;
_OldLeft = this.Left;
_OldWidth = this.Width;
_OldHeight = this.Height;
base.OnLoadCompleted(e);
}
protected override void OnMouseEnter(EventArgs e)
{
//once mouse enters
// take the backup of height width top left
//so we can restore once mouse leaves
_OldTop = this.Top;
_OldLeft = this.Left;
_OldWidth = this.Width;
_OldHeight = this.Height;
//decrease the control top left to show hover effect
this.Top = this.Top - 10;
this.Left = this.Left - 10;
// same increase the height width
this.Height = this.Height + 20;
this.Width = this.Width + 20;
// show to control on top of all
this.BringToFront();
//trigger the base event
base.OnMouseEnter(e);
}
protected override void OnMouseLeave(EventArgs e)
{
// mouse leaves now we have to restore
//picture box to its original position
this.Height = _OldHeight;
this.Width = _OldWidth;
this.Left = _OldLeft;
this.Top = _OldTop;
base.OnMouseLeave(e);
}
}
Now when you add this class in your project and build it,it will
show you PicControl in your toolbox you can replace pictureBox with PicContorl
in order get that effect.
hope it will helps you.

Here is some example how you could make very trivial popup for such images.
//Sample object representing one of your pictures
PictureBox pb1 = new PictureBox();
List<PictureBox> images = new List<PictureBox>();
images.Add(pb1);
int frameSize = 5;
PictureBox popup = new PictureBox();
popup.Visible = false;
popup.MouseLeave += (s, a) =>
{
popup.Visible = false;
};
foreach (var pb in images)
{
pb.MouseEnter += (s, a) =>
{
var sender = (PictureBox)s;
popup.Image = sender.Image;
popup.Left = sender.Left - frameSize;
popup.Top = sender.Top - frameSize;
popup.Width = sender.Width + (2 * frameSize);
popup.Height = sender.Height + (2 * frameSize);
popup.Visible = true;
popup.BringToFront();
};
}
Let's assume your picture boxes are in "images" collection. We have one more picture box which is hidden that will work as popup.
Next for each of them we bind to MouseEnter event. On MouseEnter we position popup picturebox above the hovered image and we set there same image but we make it slightly bigger and centered over underlying picture and we show the popup.
We are also bound to MouseLeave event of popup so when mouse leaves the popup it will dissapear.
Of course it's just a concept to inspire you for further development. Remember to mark as answer if helps you and you like it :)

Use this code in style sheet
.image:hover {
-webkit-transform:scale(1.2); transform:scale(1.2);
}
.image {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
and pass this class to the image
<img alt="" src="../Sample%20Pictures/Chrysanthemum.jpg"
style="width: 301px; height: 196px" class="image " />
input:-
Output:-

Zoom Image in Picture Box

I am creating an application, in which user will be able to Upload an image and then Zoom in and Out the image on a particular location (current mouse pointer).
Also user should be able to drag the image to see other parts of the image when the image is zoomed.
I have implemented some functionality to achieve it but i am scaling the complete image. I want to know that how i can scale a particular portion of image, or scale the complete image and then point to that location where my current mouse pointer is placed.
Code:
private void DisplayIsdDiagram(BO.IsdDiagram IsdDiagram)
{
DoubleBuffered = true;
zoomFac = 1;
translateX = 0;
translateY = 0;
transStartX = 0f;
transStartY = 0f;
picIsdDiagram.BorderStyle = BorderStyle.Fixed3D;
bmp = new Bitmap(Image.FromStream(new MemoryStream(IsdDiagram.Image.ToArray())));
if (bmp.Width > bmp.Height)
{
ratio = (float)picIsdDiagram.Width / (float)bmp.Width;
translateRatio = (float)bmp.Width / (float)picIsdDiagram.Width;
}
else
{
ratio = (float)picIsdDiagram.Height / (float)bmp.Height;
translateRatio = (float)bmp.Height / (float)picIsdDiagram.Height;
}
//picIsdDiagram.Image = bmp;
picIsdDiagram.Refresh();
picIsdDiagram.MouseWheel += new MouseEventHandler(picIsdDiagram_MouseWheel);
}
private void picIsdDiagram_MouseWheel(object sender, MouseEventArgs e)
{
IsZooming = true;
if (e.Delta < 0)
{
if (zoomFac > 1)
zoomFac = zoomFac - (float)0.1;
}
else
{
if (zoomFac <= 5)
zoomFac = zoomFac + (float)0.1;
}
picIsdDiagram.Refresh();
IsZooming = false;
}
private void picIsdDiagram_MouseDown(object sender, MouseEventArgs e)
{
IsZooming = false;
IsMouseDown = true;
transStartX = e.X;
transStartY = e.Y;
}
private void picIsdDiagram_MouseUp(object sender, MouseEventArgs e)
{
IsZooming = false;
IsMouseDown = false;
translateX = translateX + ((e.X - transStartX) * (translateRatio / zoomFac));
translateY = translateY + ((e.Y - transStartY) * (translateRatio / zoomFac));
picIsdDiagram.Refresh();
}
private void picIsdDiagram_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.ScaleTransform(ratio * zoomFac, ratio * zoomFac);
if (IsZooming == false && IsMouseDown == true)
g.TranslateTransform(translateX, translateY);
g.DrawImage(bmp, 0, 0);
}
I tried to get the current mouse position from MouseHover event and tried to Translate the picture when only Zoom is done, but that is not working.
Also the Picture Box has some other multiple Picture boxes inside it, to show some representation on the big image. While scaling the Big Image, small images (inside images) should not be scaled. Although there position needs to be recalculated to show them at their real places even after zooming on the Big image.
So in above i am facing two problems:
1) To Zoom an Image at any particular location (current mouse pointer)
by scrolling.
2) To regenerate the coordinates of the sub images while
zooming and translating.
Any help that can guide me in correct direction.
Also if by any other means, i could be able to achieve this functionality.
Application : Windows
Control : Picture Box (Please suggest if any other control can be used, if not possible with this)
Language : C#
Waiting for response!

PictureEdit control provided by DevExpress 13.2

winform move an image inside a picturebox

I've been trying to do this for a few hours now, but for the life of me I can't make it possible.
What I'm trying to do is simply move the image found within a picture box in a winform application. My image is roughly 1000x1000 pixels and my box is something arbitrary like 400x500, so, for example, when I click the mouse I'd want the image to move 50 to the left. But the image box should remain the same size.
For the life of me, however, I can't get this to work. What I have been able to do is the following:
if (kinectController.hands[0].fingertips.Count == 1)
{
pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
}
This function is for my kinect finger tracking app. So when the application finds a single finder point visiable on the screen, the image is centered. However, I would eventually like the image to move along with my finger movement, which will come once I work out the basic step of moving the image a few pixels to the side.
Any help with this would be appreciated.

I did a little bit of research and apparently moving an image within a PictureBox is no easy task, at the very least I couldn't find anything that would make this possible (not saying there isn't a way to do it though).
However, I came up with a bit of a "workaround", see if this fits your needs. To accomplish this:
Create a Panel control, and size it to however much of the image you
would like to display
Inside that panel place a PictureBox control with your image in it
and set the SizeMode property to AutoSize.
Now, put this code in your form
private bool Dragging;
private int xPos;
private int yPos;
private void pictureBox1_MouseUp(object sender, MouseEventArgs e) { Dragging = false; }
private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left) {
Dragging = true;
xPos = e.X;
yPos = e.Y;
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
Control c = sender as Control;
if (Dragging && c!= null) {
c.Top = e.Y + c.Top - yPos;
c.Left = e.X + c.Left - xPos;
}
}
Now whenever you click and drag on the PictureBox, it won't actually move the image within it, but the PictureBox control within the panel. Again, not exactly what you were looking for and I'm not sure how this would convert over to Kinect, but I hope this gets you on the right track.

Not enough reputation to comment but I wanted to add on Ben Black answer if someone ever need more control over the image moving around so you can't move the image past it's borders :
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Control c = sender as Control;
if (Dragging && c != null)
{
int maxX = pictureBox1.Size.Width * -1 + panel.Size.Width;
int maxY = pictureBox1.Size.Height * -1 + panel.Size.Height;
int newposLeft = e.X + c.Left - xPos;
int newposTop = e.Y + c.Top - yPos;
if (newposTop > 0)
{
newposTop = 0;
}
if (newposLeft > 0)
{
newposLeft = 0;
}
if (newposLeft < maxX)
{
newposLeft = maxX;
}
if (newposTop < maxY)
{
newposTop = maxY;
}
c.Top = newposTop;
c.Left = newposLeft;
}
}

How to scroll in flowlayout panel without showing scrollbar in windows form

I am working on a touch screen POS in WinForms.
I have a flowlayoutpanel and add buttons dynamically but I dont want to show a scrollbar.
I use 2 buttons to scroll instead, so please help me how to scroll without showing a scrollbar

Try placing the FlowLayoutPanel inside another panel with these properties:
flowLayoutPanel1.AutoScroll = false;
flowLayoutPanel1.AutoSize = true;
flowLayoutPanel1.AutoSizeMode = AutoSizeMode.GrowAndShrink;
From here, you have to control yourself the location of the FlowLayoutPanel1 inside your panel (which should also have AutoScroll = false;) based on your two buttons.

Take two buttons btnLeft and btnRight and try this code :
private void btnLeft_Click(object sender, EventArgs e)
{
if (flowPanelItemCategory.Location.X <= xpos)
{
xmin = flowPanelItemCategory.HorizontalScroll.Minimum;
if (flowPanelItemCategory.Location.X >= xmin)
{
xpos -= 100;
flowPanelItemCategory.Location = new Point(xpos, 0);
}
}
}
private void btnRight_Click(object sender, EventArgs e)
{
if (flowPanelItemCategory.Location.X <= xpos)
{
xmax = flowPanelItemCategory.HorizontalScroll.Maximum;
if (flowPanelItemCategory.Location.X < xmax)
{
xpos += 100;
flowPanelItemCategory.Location = new Point(xpos, 0);
}
}
}

Track cusor location and add image from cusor location into PDF with iTextSharp

I'm looking for the most appropriate way to allow the user to import an image to a PDF and allow them to drag the picture around the PDF/winform and specify where the image is placed.
I'm thinking the best way to go about doing this is pulling the location from the cusor.
Something like:
Rectangle rect = new Rectangle(400, 772, 545, 792);
Instead of pre-defined coordinates, have the output be the selected cursor location of the user.
Any help would be very much appreciated.
Thank you in advance!

Users might have a hard time picking an image location just by pressing the mouse cursor on a form. Instead I recommend allowing them to drag a relatively sized rectangle around a grid. You'll have to translate coordinates appropriately, including fixing the Y value since iTextSharp starts at the bottom left instead of the top left, but that shouldn't be too hard.
Below is a full working C# 2010 WinForms app that allows you to drag a red rectangle around a black square. The comments in the code should pretty much explain everything. It has one big problem that need to be addressed, it stores the X/Y coordinates are screen-based and not form based, so if you drag once, move the entire form and drag again it will get "funky". This can be solved by calculating the x/y relative to the form instead which I'll leave up to you.
Hopefully this gets you down a path that works for you!
using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
//Basic dimensions of our "border" and our "image". Assumes 72 dots per inch which isn't technically correct but gives us something to work with
private int BORDER_WIDTH = (int)11 * 72;
private int BORDER_HEIGHT = (int)8.5 * 72;
private int IMAGE_WIDTH = (int)2 * 72;
private int IMAGE_HEIGHT = (int)3 * 72;
private int IMAGE_OFFSET = 5;
//These will store the x/y when we press our mouse down so that we can calculate the drag later
private int offsetX;
private int offsetY;
//Our main "image" that we'll move around
PictureBox pb;
//The "border" to move the image around in
PictureBox border;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//Resize the form and make it not user-resizable
this.Size = new Size(BORDER_WIDTH + 30, BORDER_HEIGHT + 50);
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedSingle;
//Create our "image"
pb = new PictureBox();
pb.Size = new Size(IMAGE_WIDTH, IMAGE_HEIGHT);
pb.Location = new Point(IMAGE_OFFSET, IMAGE_OFFSET);
pb.BackColor = Color.Red;
//Bind a handler to the mouse down event
pb.MouseDown += new MouseEventHandler(this.pbMouseDown);
this.Controls.Add(pb);
//Create our "border"
border = new PictureBox();
border.Size = new Size(BORDER_WIDTH, BORDER_HEIGHT);
border.Location = new Point(IMAGE_OFFSET, IMAGE_OFFSET);
border.BackColor = Color.Black;
this.Controls.Add(border);
}
private void pbMouseDown(object sender, MouseEventArgs e)
{
//Store the current x/y so that we can use them in calculations later
offsetX = e.X;
offsetY = e.Y;
//When the mouse is down we want to remove the original mouse down handler
pb.MouseDown -= new MouseEventHandler(this.pbMouseDown);
//Add to more handler looking for mouse up and mouse movement
pb.MouseUp += new MouseEventHandler(this.pbMouseUp);
pb.MouseMove += new MouseEventHandler(this.pbMouseMove);
}
private void pbMouseUp(object sender, MouseEventArgs e)
{
//When the mouse button is released, remove old handlers and add back the down event
pb.MouseMove -= new MouseEventHandler(this.pbMouseMove);
pb.MouseUp -= new MouseEventHandler(this.pbMouseUp);
pb.MouseDown += new MouseEventHandler(this.pbMouseDown);
//Pop up a message, this is where something with iTextSharp would be done
MessageBox.Show(String.Format("The top left of the image is at {0}x{1}", pb.Top - IMAGE_OFFSET, pb.Left - IMAGE_OFFSET));
}
private void pbMouseMove(object sender, MouseEventArgs e)
{
//Calculate where to draw the "image" at next
//First, calculate based on the current image's location, the offset that we stored ealier and the current mouse position
int newLeft = e.X + pb.Left - offsetX;
int newTop = e.Y + pb.Top - offsetY;
//Next, make sure that we haven't gone over one of the boundaries of the "border"
if (newLeft < border.Left) newLeft = border.Left;
if (newTop < border.Top) newTop = border.Top;
if (newLeft + pb.Width > border.Right) newLeft = border.Right - pb.Width;
if (newTop + pb.Height > border.Bottom) newTop = border.Bottom - pb.Height;
//Finally, assign the new value
pb.Left = newLeft;
pb.Top = newTop;
}
}
}