Bind Visibility to ReactiveCommand CanExecute

Question

I have several Tiles (TileLayoutControl Class) in my xaml (only shown 2 in this example) whose Visibility are binded to Boolean Properties and converted through BooleanToVisibilityConverter.
This works just fine. My question is

Can I bind the visibility to the Command instead so that I can remove the need of those several Boolean Properties?

Something like binding the Visibility to Command.CanExecute

If Yes, How can I achieve that? Any help will be really appreciated! Thanks.

<dxlc:Tile Command="{Binding Tile1Command}"
           Visibility="{Binding Path=IsTile1Visible , Converter={StaticResource BooleanToVisibilityConverter}}"/>
<dxlc:Tile Command="{Binding Tile2Command}"
           Visibility="{Binding Path=IsTile2Visible , Converter={StaticResource BooleanToVisibilityConverter}}"/>

ViewModel

private bool _isTile1Visible;
public bool IsTile1Visible
{
    get { return _isTile1Visible; }
    set { this.RaiseAndSetIfChanged(ref _isTile1Visible, value); }
}

public ReactiveCommand Tile1Command { get; private set; }

Tile1Command = new ReactiveCommand();
Tile1Command.Subscribe(p => PerformTile1Operation());

Answer 1

Yes, just use RxUI bindings:

<dxlc:Tile x:Name="Tile1" />

Then in your View constructor (make sure to implement IViewFor<Tile1ViewModel> to get this extension):

this.BindCommand(ViewModel, x => x.Tile1Command);

this.WhenAnyObservable(x => x.ViewModel.Tile1Command.CanExecuteObservable)
    .BindTo(this, x => x.Tile1.Visibility);

You could also solve this in the ViewModel level, though that's not what I would do - in the ViewModel ctor:

Tile1Command = new ReactiveCommand(/* ... */);
Tile1Command
    .Select(x => x ? Visibility.Visible : Visibility.Collapsed)
    .ToProperty(this, x => x.Tile1Visibility, out tile1Visibility);

Answer 2

ReactiveCommand is an ICommand implementation that is simultaneously a RelayCommand implementation...

Assume that the ReactiveCommand has been declared like this...

public ReactiveCommand FileCommand { get; private set; }

...and has been instantiated in a View Model like this...

SomeText = "";
FileCommand = new ReactiveCommand(this.WhenAny(vm => vm.SomeText, s => !string.IsNullOrWhiteSpace(s.Value)));
FileCommand.Subscribe(param => MessageBox.Show("Processing"));

... which means if the property SomeText is empty, then the command cannot be executed, otherwise the command can be executed. And if the command is executed, a message box will get displayed.

If your objective is to simply eliminate the boolean IsTile1Visible, you can make a Xaml declaration like this...

<Button Content="File" 
        Command="{Binding FileCommand}"
        Visibility="{Binding FileCommand, Converter={genericMvvm1:CommandToVisibilityConverter}}" />

where the visibility is bound to the same command and uses a value converter...

and the value converter looks like this...

public class CommandToVisibilityConverter : MarkupExtension, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            ICommand iCommand = value as ICommand;
            if (iCommand != null)
            {
                if (iCommand.CanExecute(parameter))
                {
                    return Visibility.Visible;
                }
                return Visibility.Collapsed;
            }
        }
        catch
        {
        }
        return value;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

The value converter simply dereferences the command into a basic ICommand and converts it into a visibility. Note that since this converter inherits from Markup Extension, there's no need to declare it as a static resource in the Xaml's object graph.

NOTE: the same functionality can be achieved by using 'code-behind' available in ReactiveUI, but the Xaml/ValueConverter appeals to developers who do not want their View Models to deal explicitly with the 'Visibility' property.

Answer 3

You could potentially do that, but it would require subclassing the command so that it also implements INotifyPropertyChanged, and the underlying condition would need to raise PropertyChange for the CanExecute property whenever it changes.

It won't work without that, as ICommand doesn't implement INotifyPropertyChanged - it uses CanExecuteChanged instead.

Note that you could simplify the property, however, by just handling it yourself in the constructor:

// In constructor:
Tile1Command = new ReactiveCommand();
Tile1Command.Subscribe(p => PerformTile1Operation());

IReactiveObject self = this as IReactiveObject;

Tile1Command.CanExecuteChanged += (o,e) => self.RaisePropertyChanged(new PropertyChangedEventArgs("IsTile1Visible"));

Then your property becomes:

// Use command directly here...
public bool IsTile1Visible
{
    get { return Tile1Command.CanExecute; }
}