Создание нескольких индикаторов выполнения программно внутри сетки

Question

Я хотел бы создать несколько индикаторов в сетке или таблице с помощью кода (VB.Net).Структура структуры выглядит следующим образом:

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

Необходимо будет иметь возможность обновлять значения выбранного индикатора выполнения в режиме реального времени.Должен ли я создать новый класс и внутри этого класса добавить массив индикатора выполнения?

---

Редактировать:

Допустим, я включил ответ, предложенный для использования ItemsControl, чтобы отобразить мою группу индикаторов выполнения внутри страницы show_progress_page (UI).У меня есть еще одна страница загрузки, которая на самом деле использует WebClient DownloadFileAsync для загрузки всех игр.

Как мне поместить функциональные возможности внутри страницы загрузки, чтобы иметь возможность создавать индикатор выполнения внутри show_progress_page?

Я пытался создать этот класс download_page, но после загрузки пользовательский интерфейс не отображает этот новый индикатор выполнения

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

Очень просто с помощью шаблона MVVM ;)

Создать класс для представления каждой передачи:

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;
        }
    }
}

Привязать ItemsControl к ObservableCollection<GameDownloadViewModel>и определите шаблон, который будет использоваться для отображения каждого элемента:

<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>

Когда прогресс изменяется, просто обновите свойства соответствующего GameDownloadViewModel, и представление будет обновлено соответствующим образом.

Answer 2

Не создавайте массив индикаторов выполнения, создайте привязываемый класс, который моделирует данные, которые вам нужно отобразить, затем связывайте коллекцию указанного класса с ItemsControl, который имеет шаблон в виде одной из этих строк сетки:

<ItemsControl ItemsSource="{Binding Data}"
              Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <!-- Synchronize size accross rows,
                         works in conjunction with Grid.IsSharedSizeScope. -->
                    <ColumnDefinition SharedSizeGroup="A" />
                    <ColumnDefinition SharedSizeGroup="B" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding GameName}" />
                <ProgressBar Grid.Column="1" Minimum="0" Maximum="1" Value="{Binding DownloadProgress}" />
                <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding DownloadProgressString}"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Тогда вам просто нужно обновить свойства объекта загрузки, и пользовательский интерфейс отразит изменения.