Binding Failure with MahAppsMetro ProgressIndicator

Question

I have to following ProgressIndicator

<MahAppsControls:ProgressIndicator Width="100"
                                   Height="10"
                                   VerticalAlignment="Center"
                                   ProgressColour="White" 
                                   Visibility="{Binding ProgressVisibility}"/>

and in the ViewModel ascociated with this View I implement

private Visibility progressVisibility = Visibility.Collapsed;
public Visibility ProgressVisibility
{
    get { return progressVisibility; }
    set
    {
        if (value == progressVisibility)
            return;
        progressVisibility = value;
        this.OnPropertyChanged("ProgressVisibility");
    }
}

The problem is this binding is failing and I don't know why. Using Snoop I have the following

System.Windows.Data Error: 40 : BindingExpression path error: 'ProgressVisibility' property not found on 'object' ''ProgressIndicator' (Name='progressIndicator')'. BindingExpression:Path=ProgressVisibility; DataItem='ProgressIndicator' (Name='progressIndicator');

target element is 'ProgressIndicator' (Name='progressIndicator'); target property is 'Visibility' (type 'Visibility') System.Windows.Data Error: 40 : BindingExpression path error: 'ProgressVisibility' property not found on 'object' ''ProgressIndicator' (Name='progressIndicator')'. BindingExpression:Path=ProgressVisibility; DataItem='ProgressIndicator' (Name='progressIndicator');

target element is 'ProgressIndicator' (Name='progressIndicator'); target property is 'Visibility' (type 'Visibility') System.Windows.Data Error: 40 : BindingExpression path error: 'ProgressVisibility' property not found on 'object' ''ProgressIndicator' (Name='progressIndicator')'. BindingExpression:Path=ProgressVisibility; DataItem='ProgressIndicator' (Name='progressIndicator');

target element is 'ProgressIndicator' (Name='progressIndicator'); target property is 'Visibility' (type 'Visibility')

I appreciate that there is a binding error, but I am setting the main window's DataContext in the App.xaml.cs via

MainWindow window = new MainWindow();
MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();

// When the ViewModel asks to be closed, close the window.
EventHandler handler = null;
handler = delegate
{
    mainWindowViewModel.RequestClose -= handler;
    window.Close();
};
mainWindowViewModel.RequestClose += handler;

// Allow all controls in the window to bind to the ViewModel by setting the 
// DataContext, which propagates down the element tree.
window.DataContext = mainWindowViewModel;
window.Show();

So, Why is the binding failing?

Thanks for your time.

Answer 1

The problem is a bug in the MahApps.ProgressIndicator control.

If you look at the source code, you'll notice that it overwrites the DataContext to itself:

public ProgressIndicator()
{
        InitializeComponent();
        this.DataContext = this;

As such, you'll need to work around this (stupid) limitation by binding to an element name directly, effectively avoiding using the normal data binding.

For example, if you name your Window (in the xaml), ie:

<Window ...
    Name="Self">
    <!--...

You could do:

<MahAppsControls:ProgressIndicator Width="100"
                               Height="10"
                               VerticalAlignment="Center"
                               ProgressColour="White" 
                               Visibility="{Binding ElementName=Self, Path=DataContext.ProgressVisibility}"/>