WPF Image Gallery

Question

I'm going to be driving a touch-screen application (not a web app) that needs to present groups of images to users. The desire is to present a 3x3 grid of images with a page forward/backward capability. They can select a few and I'll present just those images.

I don't see that ListView does quite what I want (although WPF is big enough that I might well have missed something obvious!). I could set up a Grid and stuff images in the grid positions. But I was hoping for something nicer, more automated, less brute-force. Any thoughts or pointers?

Answer 1

I know that this is a pretty old question, but I'm answering because this page is in the first page on Google and this link could be useful for someone.

WPF Photo Viewer Demo

Screenshot:

Answer 2

You might want to use an ItemsControl/ListBox and then set a UniformGrid panel for a 3x3 display as its ItemsPanel to achieve a proper WPF bindable solution.

 <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <UniformGrid Rows="3" Columns="3"/>
       </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  <Image Source="Images\img1.jpg" Width="100"/>
  <Image Source="Images\img2.jpg" Width="50"/>
  <Image Source="Images\img3.jpg" Width="200"/>
  <Image Source="Images\img4.jpg" Width="75"/>
  <Image Source="Images\img5.jpg" Width="125"/>
  <Image Source="Images\img6.jpg" Width="100"/>
  <Image Source="Images\img7.jpg" Width="50"/>
  <Image Source="Images\img8.jpg" Width="50"/>
  <Image Source="Images\img9.jpg" Width="50"/>
 </ListBox>

You need to set your collection of Images as ItemsSource binding if you are looking for a dynamic solution here. But the question is too broad to give an exact answer.

Answer 3

You can use simple ListBox control and customize its ItemsPanel template and add WrapPanel in it. WrapPanel puts items in a Horizontal Tiling layout, where you can set its max width to incorporate 3 items in one row and it will create more rows for 3 items till last one fills.