在網格內以編程方式創建多個進度條

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）內。我有另一個download_page實際上使用WebClient DownloadFileAsync來下載所有的遊戲。

我應該如何將download_page中的功能放在show_progress_page裏面來創建進度條？

我試圖創建該類download_page但它加載之後的UI不顯示這個新的進度條

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 pattern;）

創建類來表示每個傳送：

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的屬性， d視圖將相應更新。

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> 

然後你只需要更新下載對象和UI的特性將反映這些變化。