Click here to Skip to main content
15,892,298 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to open the progress bar window of the main window page. I a using MVVM pattern.

in my background thread i am uploading a file .On that time I would like to show the progress bar

What I have tried:

ProgresBar.xaml

<Grid Grid.Row="1" Grid.Column="1" Background="white">
           <StackPanel>
               <TextBlock Text="uploading...."  />
               <ProgressBar x:Name="ProgressUpload"  IsIndeterminate="True" Height="30"  Width="328"   Margin="0,90,0,0"/>
               <Button x:Name="button" Content="Cancel Upload ✖" Height="31" Width="127" Margin=" 0,25,0,0" Command="{Binding hello}" />
           </StackPanel>
       </Grid>


codebehind of progressBar.xaml

public ProgressBar()
     {
         InitializeComponent();
         ProgressBarViewModel progressBarFilesVM = new ProgressBarViewModel();
         this.DataContext = progressBarFilesVM;


     }


mainWindowviewmodel.cs

on the button click

private void worker_DoWork(object sender, DoWorkEventArgs e)
      {
        // show the progressbar window here
      }
Posted
Updated 22-Jan-21 5:08am
v3
Comments
Richard Deeming 21-Jan-21 5:52am    
The worker_DoWork method makes me think you're using a BackgroundWorker. If so, the DoWork event is fired on a background thread, so it's not the right place to display any UI.
john321a 21-Jan-21 6:00am    
in my background thread i am uploading a file .on that time I would like to show the progress bar

In your ViewModel you need to set up the BackgroundWorker so that it reports progress back to the UI thread from the threadpool thread that runs your DoWork method.


C#
public   class ViewModel : INotifyPropertyChanged
    {
        private BackgroundWorker worker;
        private bool isLoading=false;

  public ViewModel()
        {
            worker = new BackgroundWorker();
            worker.WorkerReportsProgress = true;
            worker.ProgressChanged += (sender, args) =>
            {
                int visibilitySetting = args.ProgressPercentage;
                IsLoading = visibilitySetting == 0 ? false : true;
             };
            worker.DoWork += WorkerDoWork;
        }
        public bool IsLoading
        {
            get
            {
                return isLoading;
            }
            set
            {
                isLoading = value;
                OnPropertyChanged();
            }
        }
        private ICommand loadCommand;
        public ICommand LoadCommand
        {
            get
            {
                return loadCommand ?? (loadCommand = new DelegateCommand(Load));
            }
        }

        public void Load()
        {
           worker.RunWorkerAsync();
        }


        private void WorkerDoWork(object sender, DoWorkEventArgs e)
        {
            worker.ReportProgress(1);//shows progress bar
            Thread.Sleep(1500);     //load data
            worker.ReportProgress(0);//hides progress bar
        }

In the Xaml, place the ProgressBar inside a fixed-sized Grid so that the layout is not corrupted when the visibility changes. Bind the Visibility property to the view model’s IsLoaded property. Use the BooleanToVisibilityConverter to enable it to bind to IsLoaded. Something like this.


C#
<Window x:Class="WpfProgress.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfProgress"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
    </Window.Resources>
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <Grid  Background="white" Height="400" >
 
        <StackPanel>
        <TextBlock  Text="uploading...."  />
        <Grid Height="30">
        <ProgressBar x:Name="ProgressUpload"    IsIndeterminate="True" Height="30"  Width="328" VerticalContentAlignment="Center"  
                        Visibility="{Binding Path=IsLoading, Converter={StaticResource boolToVisibilityConverter}}"/>
        </Grid>
        <Button x:Name="button"   Content="Cancel Upload " Height="31" Width="127" Margin="10,25,0,0" Command="{Binding hello}" />
            <Button  Content="Upload "   Height="31" Width="127" Margin=" 10,25,0,0" Command="{Binding LoadCommand}" />
        </StackPanel>
    </Grid>
</Window>
 
Share this answer
 
v2
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900