Question

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:

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

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?

---

Edit:

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.

How should I put the functionalities inside download_page to be able to create progress bar inside show_progress_page?

I’ve tried creating this class download_page but after it loads the UI does not show this new progress bar

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

Answer 1

Very easy using the MVVM pattern 😉

Create a class to represent each transfer:

public class GameDownloadViewModel : ViewModelBase
{
    private string _gameName;
    public string GameName
    {
        get { return _gameName; }
        set
        {
            _gameName = value;
            OnPropertyChanged("GameName");
        }
    }

    public string StatusText
    {
        get
        {
            if (_downloadedSize < _totalSize)
                return string.Format("Downloading {0} MB of {1} MB", _downloadedSize, _totalSize);
            return "Download completed";
        }
    }

    private long _totalSize;
    public long TotalSize
    {
        get { return _totalSize; }
        set
        {
            _totalSize = value;
            OnPropertyChanged("TotalSize");
            OnPropertyChanged("Progress");
            OnPropertyChanged("StatusText");
        }
    }

    private long _downloadedSize;
    public long DownloadedSize
    {
        get { return _downloadedSize; }
        set
        {
            _downloadedSize = value;
            OnPropertyChanged("DownloadedSize");
            OnPropertyChanged("Progress");
            OnPropertyChanged("StatusText");
        }
    }

    public double Progress
    {
        get
        {
            if (_totalSize != 0)
                return 100.0 * _downloadedSize / _totalSize;
            return 0.0;
        }
    }
}

Bind an ItemsControl to an ObservableCollection<GameDownloadViewModel>, and define the template to be used to display each item:

<ItemsControl ItemsSource="{Binding GameDownloads}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0"
                           Text="{Binding GameName}" >
                <ProgressBar Grid.Row="0" Grid.Column="1"
                             Minimum="0" Maximum="100" Value="{Binding Progress}" />
                <TextBlock Grid.Row="1" Grid.Column="1"
                           Text="{Binding StatusText}" >
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

When the progress changes, just update the properties of the relevant GameDownloadViewModel, and the view will be updated accordingly.