在网格内以编程方式创建多个进度条

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的特性将反映这些变化。