How to add a underlying progressbar across two or more ListViewItem in wpf?

问题

Suppose I have a 2 by 2 listview. I want to

|  AAA | BBB  |
|  CCC | DDD  |
^ ProgressBar ^

have a progressbar spans over the whole second row, which means the left side of CCC is 0 and the right side of DDD is 100.

In addition, make the bar lies between the text (CCC, DDD) and the listviewitem's background.

Can I define it as a style? Or can I do it in code?

Edit: In QT I custom draw the background of the listview to make it look like a progress bar behind the text. If I can do the similar thing, it will be fine to me.

回答1:

This is possible but you may need to change your item ViewModel class structure.

You need to specify a custom ItemTemplate for the ListView where you would define the controls for displaying CCC and DDD values and the extra value which is displayed via the ProgressBar.

NB: Automatic properties used for interface definition brevity - they would normally be fully INotifyPropertyChanged enabled.

public class ItemVM : ViewModel
{
    public string CCC {get;set;}
    public string DDD {get;set;}
    public int ProgressBarValue {get;set;}
}

and the the XAML:

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
         <DataTemplate>
            <Grid>
              <Grid.ColumnDefinitions>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
              </Grid.ColumnDefinitions>
              <Label Grid.Column="0" Grid.ZIndex="1" Content="{Binding CCC}"/>
              <Label Grid.Column="1" Grid.ZIndex="1" Content="{Binding DDD}"/>
              <ProgressBar Grid.ColumnSpan="2" Grid.ZIndex="0" Value="{Binding ProgressBarValue}"/>
            </Grid>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

NB:Items is of type ObservableCollection<ItemVM> and is assumed to be in scope of the containing Control/UserControl DataContext. ZIndex is used to control which controls are on top of the other.

来源：https://stackoverflow.com/questions/30233852/how-to-add-a-underlying-progressbar-across-two-or-more-listviewitem-in-wpf

标签

wpf

xaml