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

You can use simple ListBox control and customize its ItemsPanel template and add "WrapPanel" in it. WrapPanel puts item in 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.

Answer 2

You might want to use an ItemsControl/Listbox and then set a UnifromGrid Panel for a 3x3 display as its ItemsPanel to achive 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.