title: Creating multiple progress bar programmatically inside a grid
body: <p>I would like to create multiple progress bars inside a grid or table through code (VB.Net). The layout of the structure is as follow:</p>
  
  <pre class="lang-none prettyprint-override"><code>Game 1      [ Progress Bar 1 ]
              Downloading 2MB of 4MB
  
  Game 2      [ Progress Bar 2 ]
              Downloading 4MB of 5MB
  
  Game 3      [ Progress Bar 3 ]
              Download completed
  </code></pre>
  
  <p>Will need to be able to update the values of selected progress bar in real time.
  Should I create a new class and inside this class add an array of progress bar? </p>
  
  <hr>
  
  <p>Edit:</p>
  
  <p>Say I incorporate the answer suggested to use ItemsControl to display my group of progress bars inside a show_progress_page (UI). I have another download_page that is actually using WebClient DownloadFileAsync to download all the games.</p>
  
  <p>How should I put the functionalities inside download_page to be able to create progress bar inside show_progress_page? </p>
  
  <p>I've tried creating this class download_page but after it loads the UI does not show this new progress bar </p>
  
  <pre><code>Public Class download_page 
  Public CollectionDownloads As New ObservableCollection(Of [DownloadAppViewModel])()
  
  Public Sub New()
      InitializeComponent()
      Dim individualDownload As New DownloadAppViewModel()
      individualDownload.GameName = "hello"
      individualDownload.TotalSize = 20
      individualDownload.DownloadedSize = 5
      CollectionDownloads.Add(individualDownload)
  End Sub
  
  End Class
  </code></pre>