WPF: Progress bar in ListView

Question

I'm trying to display information from my ObservableCollection<MyData> in a ListView. MyData has:

string Name
string Location
int Progress

Using DataBinding, I'm able to display the Name and Location for all the items in my ObservableCollection<MyData> in their own column. But how can I add a Progress column with a ProgressBar inside? Progress is a percentage.

Solution 1

<ListView ItemsSource="{Binding PersonList}">  
    <ListView.View> 
        <GridView>  
            <GridViewColumn Width="140" Header="GameName" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Width="140" Header="Progress">
                <GridViewColumn.CellTemplate>  
                    <DataTemplate>
                        <ProgressBar Maximum="100" Value="{Binding Progress}"/>
                    </DataTemplate>
                 </GridViewColumn.CellTemplate>  
            </GridViewColumn>
        </GridView>  
    </ListView.View>  
</ListView>

Solution 2

Your ListView in XAML:

<ListView x:Name="DataView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Label Content="{Binding Path=Name}" />
                    <ProgressBar Height="20" Width="100" Value="{Binding Path=Progress}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>

Code-behind:

internal class MyData
{
    public string Name { get; set; }
    public int Progress { get; set; }
}

...

var items = new ObservableCollection<MyData>();

items.Add(new MyData() { Name = "Some", Progress = 25 });
items.Add(new MyData() { Name = "Another", Progress = 91 });

DataView.ItemsSource = items;

Solution 3

Just bind Progress property in MyData to the ProgressBar.Value and set the expected MAX value as the ProgressBar.Maximum for example 50 below

<ProgressBar Maximum="50" Value="{Binding Progress}" ..

Comments

[Warpin]

Where would I find that in my xaml? <Grid Name="myGrid"> <ListView ItemsSource="{Binding PersonList}"> <ListView.View> <GridView> <GridViewColumn Width="140" Header="GameName" DisplayMemberBinding="{Binding Name}"/> </GridView> </ListView.View> </ListView> </Grid>