title: Displaying dynamic picture gallerys in Windows 8 app?
body: <p>I am working on a simple Windows 8 app at the moment as a barebone proof of concept for something more complicated.</p>
  
  <p>At the moment, I have one text box and two buttons. One button allows you to select a folder (which populates the folder path in my text box).</p>
  
  <p>The other button should return the absolute paths of the first 5 images in the currently selected folder, but I am having some problems using the <code>FileOpenPicker</code> in Win8 apps.</p>
  
  <p>What I wish to do, is, when this button is clicked, rather than returning the first 5 paths of the images, I want to display them in a grid format like so, except rather than extending to the right, to extend downwards more like a traditional website.</p>
  
  <p><img src="https://i.stack.imgur.com/uvEYI.jpg" alt="Screenshot"></p>
  
  <p>What I have so far  : </p>
  
  <p>XAML : </p>
  
  <pre><code>&lt;StackPanel Grid.Row="2" Margin="120,0,0,0"&gt;
      &lt;StackPanel Orientation="Horizontal" Margin="0,20,0,20"&gt;
          &lt;TextBox  x:Name="pictureInput" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" Text="Select Image..." VerticalAlignment="Top" Width="300" Height="41" FontSize="24"/&gt;
          &lt;Button Content="Browse" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Height="41" Width="147" Click="Browse_Folder_Click"/&gt;
          &lt;TextBlock x:Name="ImgThumbHere" Grid.Column="2" Width="540"/&gt;
          &lt;Button Content="Find Images" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90"  Width="250" Click="Find_Images"/&gt;
      &lt;/StackPanel&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>Xaml.CS : </p>
  
  <pre><code>//method to select folder : 
       private async void Browse_Folder_Click(object sender, RoutedEventArgs e)
          {
              string folderPath = "";
              FolderPicker folderPicker = new Windows.Storage.Pickers.FolderPicker();
              // Create the picker object and set options
              folderPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
              // Users expect to have a filtered view of their folders depending on the scenario.
              // For example, when choosing a documents folder, restrict the filetypes to documents for your application.
              folderPicker.FileTypeFilter.Add("*");
  
              StorageFolder folder = await folderPicker.PickSingleFolderAsync();
              if (folder != null)
              {
                  if (folder.Path != "" &amp;&amp; folder.Path != null)
                  {
                      folderPath = folder.Path;
                  }
                  else
                  {
                      folderPath = folder.Name;
                  }
              }
              else
              {
                  throw new Exception("Folder path null.");
              }
              folderInput.Text = folderPath;
          }
  
  //attempt at method to select first 5 images of selected folder : 
  
      private async void Find_Images(object sender, RoutedEventArgs e)
          {
              string[] picturePath;
              FileOpenPicker picPicker = new Windows.Storage.Pickers.FileOpenPicker();
              picPicker.ViewMode = PickerViewMode.Thumbnail;
              // Create the picker object and set options
              picPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
              // Users expect to have a filtered view of their folders depending on the scenario.
              // For example, when choosing a documents folder, restrict the filetypes to documents for your application.
              picPicker.FileTypeFilter.Add(".png");
              picPicker.FileTypeFilter.Add(".jpg");
              picPicker.FileTypeFilter.Add(".jpeg");
              picPicker.FileTypeFilter.Add(".gif");
              picPicker.FileTypeFilter.Add(".bmp");
  
              for (int i = 0; i &lt; 5; i++)
              {
                  StorageFile file = picPicker.//What can be called here to return paths ?
                  if (file != null)
                  {
                      picturePath[i] = file.path;
                  }
                  else
                  {
                      throw new Exception("File path null.");
                  }
              }
          }
  </code></pre>
  
  <p>Can anyone please help me work this out ?</p>
  
  <p>Thanks a lot.</p>