Member Avatar for pete08

Does anyone have an idea how to drag the image in order to see the whole of it? (up-down-left-right)
The application is for WM 5

  • 3 Contributors
  • 5 Replies
  • 331 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by hieuuk

Dani AI

Generated

Brief summary and a practical approach for ’s WM5 panning requirement (no scrollbars): instead of moving a PictureBox control or relying on scrollbars, render only the visible source-rectangle of the full image inside a custom control and update that source-rectangle while tracking stylus/drags. This avoids the cost of moving child windows (which often causes flicker and performance issues on WinCE devices) and keeps memory use predictable.

Example (Compact Framework, C#): a minimal custom control that draws a source rectangle and updates it on MouseDown/MouseMove/MouseUp.

public class PannableImage : Control
{
    Bitmap image;
    Point offset;
    bool dragging;
    Point last;

    public void SetImage(Bitmap bmp) { image = bmp; offset = Point.Empty; Invalidate(); }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        if (image == null) return;
        int w = Width, h = Height;
        int sx = Math.Max(0, Math.Min(offset.X, Math.Max(0, image.Width - w)));
        int sy = Math.Max(0, Math.Min(offset.Y, Math.Max(0, image.Height - h)));
        Rectangle src = new Rectangle(sx, sy, Math.Min(w, image.Width), Math.Min(h, image.Height));
        e.Graphics.DrawImage(image, new Rectangle(0, 0, src.Width, src.Height), src, GraphicsUnit.Pixel);
    }

    protected override void OnMouseDown(MouseEventArgs e) { dragging = true; last = e.Location; }
    protected override void OnMouseMove(MouseEventArgs e)
    {
        if (!dragging || image == null) return;
        int dx = e.X - last.X, dy = e.Y - last.Y;
        offset.X = Math.Max(0, Math.Min(offset.X - dx, Math.Max(0, image.Width - Width)));
        offset.Y = Math.Max(0, Math.Min(offset.Y - dy, Math.Max(0, image.Height - Height)));
        last = e.Location; Invalidate();
    }
    protected override void OnMouseUp(MouseEventArgs e) { dragging = false; }
}

Troubleshooting and tips:

  • Clamp offsets so the view never shows empty space; if the image is smaller than the viewport, center or fill background as needed.
  • For large images, avoid loading the full-resolution bitmap into RAM on low-memory devices. Prefer pre-scaled images, tiled loading, or decoding a downsampled copy before creating the Bitmap.
  • If flicker appears, draw into an offscreen bitmap and blit once in OnPaint (manual double-buffering).
  • ’s idea of rendering only the visible area maps directly to the src-rectangle above; ’s PictureBox-move idea works for prototypes but custom painting is usually smoother and more efficient on WM5.

Recommended Answers

All 5 Replies

Member Avatar for LizR

Extract a smaller sized portion of it, and display it, and change the area shown depending on where in the scroll you are supposed to be.

Member Avatar for hieuuk

Don't know much about windows mobile, could we put the picture in a picturebox and using mouse or keyboard to move the position of the picturebox.

Member Avatar for pete08

I don't want to view the image by use of scroll bars. I want to load the image as it is, i.e. bigger than form, and move around the image by dragging it.
I've searched the web, but no luck.

Does anyone have an idea?

Member Avatar for hieuuk

Yeah, that's what I'm talking about. You load the picture in the picturebox. Then make the picturebox move using your mouse.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.