Question

I have a progress bar shown as I am loading images with the webclient object asynchronously. Once the images have been downloaded I set the loadingComplete bool property to True in my viewmodel to indicate that the loading process has been completed. Currently I am using this value for an attached property to set focus on a control.

What I want is to collapse the progress bar control and then show the images.

What I want to know is what is the best way to do this and what are the pros and cons of the following methods?

Should I

1) create a LoadingOpacity bool property on viewmodel which I can then set to set opacity of the progress bar to 0.0 (this would be set when loadingComplete is set)?

2) Or Should I create a Converter (IValueConverter) and use the loadingComplete property to convert this to a Visibility.Collapsed value. This way I do not need any extra properties in my view model?

3) Or should I create a collapsed property on the view model and bind that to the visibility property of the progress bar?

4) or is/are there other ways to do this?

Thanks
JD

Answer 1

1. I wouldn’t go with the opacity solution because of mouse hit testing. Your transparent element would still be hit-test-visible, however you might want to fade the progress bar when the download is complete, but maybe a storyboard triggered by an event is a better option for that.
2. I personally like value converters, they are simple, terse, descriptive and to the point. This is also widely accepted as the correct choice.
3. MVVM Best practices dictate that the view model not be aware of the view. By introducing a Visibility type property to your view model, you couple it to the view in some way (albeit minute).
4. Probably 🙂