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.
'
LVL 1
countrymeisterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
What is the trigger for showing/hiding the image?  Are you able to check the value of IsControlVisible in the view model?
0
jonnidipCommented:
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" 
gif:ImageBehavior.AnimatedSource="Images/progress_bar.gif">
                                            <Image.Style>
                                                <Style>
                                                    <Setter Property="Image.Visibility" Value="Collapsed"/>
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding IsControlVisible}" Value="true">
                                                            <Setter Property="Image.Visibility" Value="Visible"/>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Image.Style>
                                        </Image>

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


Regards.
0
apeterCommented:
Is your animated image source path is correct ?
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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.
0
MikeTooleCommented:
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
http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged.aspx 
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
        {
            get
            {
                return this.customerNameValue;
            }

            set
            {
                if (value != this.customerNameValue)
                {
                    this.customerNameValue = value;
                    NotifyPropertyChanged();
                }
            }
        }

Open in new window


Hope this helps
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
countrymeisterAuthor 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

 App.Current.Dispatcher.BeginInvoke(
                    DispatcherPriority.Render,
                    new Action(() => IsControlVisible = true
                        ));
                App.Current.MainWindow.InvalidateVisual();
0
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.