CODEWITHSUNDEEP
wpflistviewdata-bindingprogress-bar
Verint Verint
Verint Verint

Reputation: 567

WPF Progress bar in ListView remained empty and add new data

I want implement ProgressBar insine my ListView:

<ListView Name="lvTest" ItemsSource="{Binding PersonList}" Margin="308,45,268,473">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="390" Header="File name" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Width="50" Header="Progress">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <ProgressBar Maximum="100" Value="{Binding Progress}"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

My class example:

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

And the code behind:

var items = new ObservableCollection<MyData>();

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

lvTest.ItemsSource = items;

And this is the result: http://s12.postimg.org/3mgcwqbvh/image.png

As you can see my progress bar is empty and all i can see is dot inside.

Upvotes: 0

Views: 1218

Answers (3)

GreenEyedAndy
GreenEyedAndy

Reputation: 1525

The Problem is the size of the Cell. Your ProgressBar is visible - but all you can see is the little dot. Bind the ProgressBar Width to the Width of the Cell.

    <ListView Name="lvTest">
        <ListView.View>
            <GridView>
                <GridViewColumn Width="390" Header="File name" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn x:Name="ProgressCell"  Width="50" Header="Progress">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <ProgressBar Maximum="100" Value="{Binding Progress}" Width="{Binding Path=Width, ElementName=ProgressCell}"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

Upvotes: 1

GreenEyedAndy
GreenEyedAndy

Reputation: 1525

Here with text in the progressbar.

    <ListView Name="lvTest">
        <ListView.Resources>
            <DataTemplate x:Key="MyDataTemplate">
                <Grid Margin="-6">
                    <ProgressBar Maximum="100" Value="{Binding Progress}" Width="{Binding Path=Width, ElementName=ProgressCell}" Height="10" Margin="0"/>
                    <TextBlock Text="{Binding Progress, StringFormat={}{0}%}" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListView.Resources>
        <ListView.View>
            <GridView>
                <GridViewColumn Width="390" Header="File name" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn x:Name="ProgressCell"  Width="50" Header="Progress" CellTemplate="{StaticResource MyDataTemplate}" />
            </GridView>
        </ListView.View>
    </ListView>

Upvotes: 2

Cristian
Cristian

Reputation: 285

Adding a width property to the progress bar should solve your issue, i.e. 

<ProgressBar Maximum="100" Value="{Binding Path=Progress}" Width="100"/>

Upvotes: -1

Related Questions