Question

i got a listbox with items and i use datatemplate to display the items

i want to make a download button, once the user select an item and click the button a progress bar will be added to the selected item datatemplate and will display the download progress, is it possible ?

any pointers will help

 <ListBox Name="List" Grid.Row="2" 
                 ScrollViewer.HorizontalScrollBarVisibility="Visible" 
                 ScrollViewer.VerticalScrollBarVisibility="Disabled"  
                 ItemTemplate="{StaticResource ListTemplate}" 
                 ItemsSource="{Binding Path=Items}" 
                 SelectedItem="{Binding Path=SelectedItem}"
                 ItemContainerStyle="{StaticResource RoundedItem}" 
                 BorderBrush="{x:Null}" BorderThickness="0" 
                 Background="{x:Null}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Margin="10" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

thanks

Answer 1

Yes, it is possible. You can create and <ItemTemplate> that contains both the “normal” representation of the item as well as the progress bar. Initially you set the Visibility of the progress bar to Collapsed. When the download starts you change the Visibility to Visible (you may also want to collapse other parts of the item).

You can databind the Visibility property to a property of the view-model of the item. You could use a boolean property like IsDownloading and then bind through a converter that converts true to Visible and false to Collapsed.

To show the progress bar you simply set IsDownloading to true and fire the PropertyChanged event. When download is complete you set IsDownloading to false and fire the PropertyChanged event again.

Here is a rough sketch on how you can do it. You need a view-model class for your item in the ListView that you can databind to:

class Item : INotifyPropertyChanged {

  public String Name { ... }

  public Double Progress { ... }

  public Boolean IsDownloading { ... }

  ...

}

You also need an IValueConverter that can convert Boolean to Visibility:

class VisibilityConverter : IValueConverter {

  public Boolean Invert { get; set; }

  Object Convert(Object value, Type targetType, Object parameter, CultureInfo culture) {
    var visible = Convert.ToBoolean(value) ^ Invert;
    return visible ? Visibility.Visible : Visibility.Collapsed;
  }

  Object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture) {
    throw NotImplementedException();
  }

}

Your view should be based on something like this:

<ListBox
  <ListBox.Resources>
    <local:VisibilityConverter x:Key="VisibilityConverter"/>
    <local:VisibilityConverter x:Key="InverseVisibilityConverter" Invert="True"/>
  </ListBox.Resources>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <TextBlock
          Text="{Binding Name}"
          Visibility="{Binding IsDownloading, Converter={StaticResource InverseVisibilityConverter}}"/>
        <ProgressBar
          Value="{Binding Progress}"
          Visibility="{Binding IsDownloading, Converter={StaticResource VisbilityConverter}}"/>
      </Grid>
    <DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>