Unable to hide show wpf control in view model using MVVM pattern

I have a WPF image control, that I want to show hide.
I have the following code in the view xaml

   <Image Name="imgProgress" Margin="12,0,8,4" Grid.Row="1"  Grid.Column="6" gif:ImageBehavior.AnimatedSource="Images/progress_bar.gif" Visibility="{Binding Path=IsControlVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

I have added the converter as resource
          <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

In the ViewModel   I have the following
public bool IsControlVisible { get; set; }

Based on a button click in the view, I have the following in my view mode
IsControlVisible = true

But my control never displays.
Who is Participating?
MikeTooleConnect With a Mentor Commented:
The WPF infrastructure doesn't know that your view model property has changed, you need to give it a poke to let it know by implementing INotifyPropertyChanged
in your VM and raising an event when your property changes.

Their are many ways to implement the interface - usually it's done once in a base class inherited by all view models.

The following code shows a direct implementation  - it's taken from
As you will see, after an update to a property an event is triggered to inform WPF that the property has changed.

    // This is a simple customer class that  
    // implements the IPropertyChange interface. 
    public class DemoCustomer : INotifyPropertyChanged
        // These fields hold the values for the public properties. 
        private Guid idValue = Guid.NewGuid();
        private string customerNameValue = String.Empty;
        private string phoneNumberValue = String.Empty;

        public event PropertyChangedEventHandler PropertyChanged;

        // This method is called by the Set accessor of each property. 
        // The CallerMemberName attribute that is applied to the optional propertyName 
        // parameter causes the property name of the caller to be substituted as an argument. 
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        public string CustomerName
                return this.customerNameValue;

                if (value != this.customerNameValue)
                    this.customerNameValue = value;

Open in new window

Hope this helps
Bob LearnedCommented:
What is the trigger for showing/hiding the image?  Are you able to check the value of IsControlVisible in the view model?
jonnidipConnect With a Mentor Commented:
Could you please put a breakpoint in your converter, to see if it does his job correctly?

It is my preference not to use converters, except if I cannot do what I want in another way (in xaml only).
In your case, I would have rather used a style.
This way:
<Image Name="imgProgress" Margin="12,0,8,4" Grid.Row="1"  Grid.Column="6" 
                                                    <Setter Property="Image.Visibility" Value="Collapsed"/>
                                                        <DataTrigger Binding="{Binding IsControlVisible}" Value="true">
                                                            <Setter Property="Image.Visibility" Value="Visible"/>

Open in new window

It is for sure more verbose than your solution, but you may put your style in a ResourceDictionary (maybe a shared one) and the result would be similar:
<Image Name="imgProgress" Margin="12,0,8,4" Grid.Row="1"  Grid.Column="6" 
        gif:ImageBehavior.AnimatedSource="Images/progress_bar.gif" Style="{StaticResource Style_ShowImage_When_IsControlVisible}"/>

Open in new window

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Is your animated image source path is correct ?
countrymeisterAuthor Commented:
Thanks again for all the suggestions. So far I have been able to verify that the IsControlVisible is set correctly.

I am using MVVM and I have a a long running process where I am getting data.
I think what I am doing wrong is trying to set the IsControl visible = true and in the same thread run the log process.

And so presumably that does not work.

I tried to run the long running process in a background thread but that di not help either.
countrymeisterConnect With a Mentor Author Commented:
Hi ! MikeToole

I did add the Notify property Changed, but the issue is that the UI does not render the image until the long process has completed. I commented otut the isControlVisble = false to veriy that the image renders only after the log process has comepleted.

In the method call I have the following

 IsControlVisible = true;

{code for long running process }

//IsControlVisible = false

Also I tried the following code just before the long process code, but that did not help
Only after the long process completes I see the image

                    new Action(() => IsControlVisible = true
countrymeisterAuthor Commented:
Thanks to all. I figured the issue.

I was trying to dispaly the image in the same thread as the long running process.

What I had to do was instead of invoking the dispatcher in tbe main thread, I created a new background thread and let the long running process run in that thread.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.