How to update the progress bar in DataGrid in WPF?

Duliya 1 Reputation point
2022-10-19T17:45:42.537+00:00

I am new to .Net and I want to know how I can update the progress bar when I click on the Download Button in a particular row on the DataGrid. Since there's limited sources that address this I don't understand how to achieve this.

 <DataGrid AutoGenerateColumns="False" x:Name="servers" HorizontalAlignment="Center" Height="148" Margin="0,78,0,0" VerticalAlignment="Top" Width="772" PreviewMouseDoubleClick="clientPreview" >  
        <DataGrid.Columns>  
            <DataGridTextColumn Header="ID" IsReadOnly="True" Binding="{Binding Id}" Width="50"></DataGridTextColumn>  
            <DataGridTemplateColumn Header="Progress"   
                                    Width="100">  
                <DataGridTemplateColumn.CellTemplate>  
                    <DataTemplate>  
                        <ProgressBar   
                            Value="{Binding Progress}"  
                            Minimum="0" Maximum="100" />  
                    </DataTemplate>  
                </DataGridTemplateColumn.CellTemplate>  
            </DataGridTemplateColumn>  
            <DataGridTemplateColumn Header="Action" Width="100">  
                <DataGridTemplateColumn.CellTemplate>  
                    <DataTemplate >  
                        <Button  Background="#FF00FF35" Click="beginDownload">Download</Button>  
                    </DataTemplate>  
                </DataGridTemplateColumn.CellTemplate>  
            </DataGridTemplateColumn>  
        </DataGrid.Columns>  
    </DataGrid>  

The Generated DataGrid Looks like this :

252068-image.png

The BeginDownload Method Looks like this :

private void beginDownload(object sender, RoutedEventArgs e)  
    {  
        Clients selected = servers.SelectedItem as Clients;  
        if (selected != null)  
        {  
            if (selected.Id == 0)  
            {  
                MessageBox.Show("Selected Feild is Empty", Title = "Empty Feild Selected");  
            }  
            else  
            {  
                //Update Progess Bar and Other Methods  

            }  
        }  
        else  
        {  
            MessageBox.Show("Selected Field is Empty", Title = "Empty Field Selected");  
        }  
    }  

I only want to know how I can update the progess bar in a particular row. For example if I put a for loop and update the progress from 0 to 100. How to bind the integer value to the progress bar?

Found a Similar problem with no answers -https://stackoverflow.com/questions/33443527/wpf-datagrid-change-element-in-the-same-row-on-click

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,695 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
778 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Rajanikant Hawaldar 91 Reputation points
    2022-10-30T11:25:41.373+00:00

    In the WPF using MVVM approach with command pattern. Accordingly to it. you need to have View and ViewModel then you will be able to use command for the Download button in your grid and pass parameter to it.
    public class ClientsViewModel : INotifyPropertyChanged
    {
    public DelegateCommand DownloadCommand {get; private set;}

       // ctor  
       public ClientsVM()   
       {  
            DownloadCommand  = new DelegateCommand(DownloadExecute));  
       }  
      
       // async method allow to not block UI thread   
       public async void DownloadExecute(object param)  
       {  
           var client = param as Clients;  
           if (client==null) return;  
      
           // TODO: call real code for download   
           for (int i=0; i<100; i++)  
           {  
              await Task.Delay(100); // slow changes of progress  
              client.Progress = i;   // if setter of Progress raised NotifyPropertyChanged.. it will update ProgressBar in your DataGrid  
           }        
       }  
    }  
    

    To use your DownloadCommand just bind it to the property of Button

    <DataGrid AutoGenerateColumns="False" x:Name="servers" HorizontalAlignment="Center" Height="148" Margin="0,78,0,0" VerticalAlignment="Top" Width="772" PreviewMouseDoubleClick="clientPreview">  
            <DataGrid.Columns>  
                <DataGridTextColumn Header="ID" IsReadOnly="True" Binding="{Binding Id}" Width="50"></DataGridTextColumn>  
                <DataGridTemplateColumn Header="Progress"   
                                        Width="100">  
                    <DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate>  
                            <ProgressBar   
                                Value="{Binding Progress}"  
                                Minimum="0" Maximum="100" />  
                        </DataTemplate>  
                    </DataGridTemplateColumn.CellTemplate>  
                </DataGridTemplateColumn>  
                <DataGridTemplateColumn Header="Action" Width="100">  
                    <DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate >  
                            <Button  Background="#FF00FF35" Command="{Binding DownloadCommand, Mode=OneWay}" CommandParameter="{Binding}">Download</Button>  
                        </DataTemplate>  
                    </DataGridTemplateColumn.CellTemplate>  
                </DataGridTemplateColumn>  
            </DataGrid.Columns>  
        </DataGrid>  
    
    1 person found this answer helpful.
    0 comments No comments

  2. Hui Liu-MSFT 46,961 Reputation points Microsoft Vendor
    2022-10-20T09:53:57.707+00:00

    Hi, @Duliya . Welcome Microsoft Q&A.
    For updating the ProgressBar, you could refer to the code below
    MainWindow.xaml:

    <Window.DataContext>  
            <local:ViewModel/>  
        </Window.DataContext>  
        <DataGrid AutoGenerateColumns="False" x:Name="servers"   ItemsSource="{Binding View}" CanUserAddRows="False"  
                      HorizontalAlignment="Center" Height="148" VerticalAlignment="Top" Width="772"  >  
            <DataGrid.Columns>  
                <DataGridTextColumn Header="ID" IsReadOnly="True" Binding="{Binding Id}" Width="50"/>  
                <DataGridTemplateColumn Header="Progress"   Width="100">  
                    <DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate>  
                            <ProgressBar x:Name="progressbar" Maximum="100" Width="140" Height="20" Value="{Binding Progress}"/>  
                        </DataTemplate>  
                    </DataGridTemplateColumn.CellTemplate>  
                </DataGridTemplateColumn>  
                <DataGridTemplateColumn Header="Action" Width="100">  
                    <DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate >  
                            <Button  Background="#FF00FF35" Command="{Binding}">Download</Button>  
                        </DataTemplate>  
                    </DataGridTemplateColumn.CellTemplate>  
                </DataGridTemplateColumn>  
            </DataGrid.Columns>  
        </DataGrid>  
    

    MainWindow.xaml.cs:

    252299-progressbar-update.txt
    The result:
    252378-55.gif

    ----------------------------------------------------------------------------

    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.