Member Avatar for DrLod

Hi!

I have two questions for you,

1. Browse pictures!

How do i view and browse pictures on the same way as in picasa or bridge. In my DB i have only path to the pictures.

2. Zooming.
If i then want to zoom in this pictures again in the same way as i browsing mode in picasa or adobe bridge.

Thanks
/Lod

  • 3 Contributors
  • 3 Replies
  • 228 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by nelis

Dani AI

Generated

Brief plan that answers both questions: implement a fast thumbnail-backed browser for overview + an on-demand full-resolution viewer for zoom. With only file paths in the DB, add a small thumbnail index (path, mtime, thumbPath, orientation, size). As noted, thumbnails are the key to smooth browsing; generate them in a background worker, cache them on disk, and only load images that are actually visible (virtualization) to avoid exhausting memory.

Thumbnail/cache strategy (practical rules):

  • Precompute thumbnails asynchronously and store them under a .thumbs folder using a stable hash of the file path + size. Record the thumb path in the DB and regenerate if source mtime changes.
  • Keep 2–3 sizes (small overview, medium preview, full) so the viewer can swap progressively without decoding the full file for every zoom step.
  • Use embedded EXIF thumbnails when present for the quickest initial display, but honor EXIF orientation tags when drawing.
  • Virtualize the grid (WPF VirtualizingWrapPanel or WinForms VirtualMode/owner-draw) so only visible thumbnails are decoded and cached. Show a lightweight placeholder while decoding.

Safe load and simple thumbnail creation (WinForms/GDI+ example):

Image LoadNoLock(string path)
{
    using (var fs = File.OpenRead(path))
    {
        var img = Image.FromStream(fs);
        return new Bitmap(img); // clone to detach from stream
    }
}

Image CreateThumbnail(Image src, int maxDim)
{
    var ratio = Math.Min((float)maxDim/src.Width, (float)maxDim/src.Height);
    int w = (int)(src.Width*ratio), h = (int)(src.Height*ratio);
    var thumb = new Bitmap(w,h);
    using (var g = Graphics.FromImage(thumb))
    {
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.DrawImage(src, 0,0,w,h);
    }
    return thumb;
}

Zoom/pan UX tips:

  • Open a medium-res image immediately, start a background task to load full-res and replace when ready.
  • For smooth interaction use transforms (WPF ScaleTransform or drawing with high-quality interpolation) and switch to lower-quality scaling during fast scrubbing for performance.
  • Always dispose bitmaps, cancel pending decode tasks when items scroll off-screen, and cap cache size with an LRU policy. This approach gives the Picasa/Bridge feel while remaining responsive for large libraries (as requested).

Recommended Answers

All 3 Replies

Member Avatar for LizR

Have a search on this forum, both these kinds of questions have already been answered.

Member Avatar for DrLod

What kind of keywords should i search for, have made a few searches and found nothing useful.

Member Avatar for nelis

Search for zooming graphics or magnify.
As for the view and browsing pictures, it's not difficult to load thumbnails and what not to view them. Having an interface to view and browse the pictures would end up being limited by your imagination and time. The more cool looking you want it, the more time you're going to pour into it. If you just want to have the pictures in a list that you scroll from top to bottom, just use a single column datagridview and stick them in there. Of course it depends on the size of your image library and once again how much time you want to put into your interface.

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.