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 f

Answer 1

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.

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

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: