Bind two elements' Visibility to one property

Question

I have two Menu Item elements - "Undelete" and "Delete" who have complementary visibility: when one is shown, the other one is hidden.

In the code of the ViewModel I have a dependency property FilesSelectedCanBeUndeleted defined as below:

private bool _filesSelectedCanBeUndeleted;
public bool FilesSelectedCanBeUndeleted
{
    get
    {
        return _filesSelectedCanBeUndeleted;
    }
    set
    {
        _filesSelectedCanBeUndeleted = value;
        OnPropertyChanged("FilesSelectedCanBeUndeleted");
    }
}

the XAML for the Undelete button looks like below:

<MenuItem Header="Undelete" Command="{Binding UndeleteCommand }" 
Visibility="{Binding Path=FilesSelectedCanBeUndeleted, 
Converter={StaticResource BoolToVisConverter}}" >

As you can see the Visibility of the Undelete is bind to the FilesSelectedCanBeUndeleted property ( with the help of a BooleanToVisibilityConveter).

Now my question is, how can I write the XAML to bind the Visibility of the Delete button to the "NOT" value of the FilesSelectedCanBeUndeleted property?

Thanks,

score 5 · Accepted Answer · answered Apr 18 '11 at 23:44

Here is an example of a custom IValueConverter, that allows you to reverse the visibility logic. Basically, one MenuItem will be visible when your view-model property is true, and the other would be collapsed.

So you'd need to define two instances of the converter like so:

<local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<local:BooleanToVisibilityConverter x:Key="ReversedBooleanToVisibilityConverter" IsReversed="true" />

score 3 · Answer 2 · answered Apr 19 '11 at 06:49

You can use apply the datatrigger to you menuitem to avoid another property in your viemodel like this -

        <MenuItem Header="Delete"
                  Command="{Binding DeleteCommand }">
            <MenuItem.Style>
                <Style TargetType="{x:Type MenuItem}">
                    <Setter Property="Visibility" Value="Visible" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding FilesSelectedCanBeUndeleted}" Value="False">
                            <Setter Property="Visibility"
                                    Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </MenuItem.Style>
        </MenuItem>

score 1 · Answer 3 · answered Apr 18 '11 at 23:38

1

Create new property on your ViewModel and just Negate 'FilesSelectedCanBeUndeleted' and then bind to it.

answered Apr 18 '11 at 23:38

ozczecho

8,649
8
36
42

Yes, that's what I am doing now. It works but I hope I can get around without creating a somewhat redundant property. Thanks. – sean717 Apr 18 '11 at 23:41

score 0 · Answer 4 · answered Apr 19 '11 at 07:17

I did something like this a while ago with a simple negation...

    private bool _filesSelectedCanBeUndeleted;
public bool FilesSelectedCanBeUndeleted{    
        get{ 
            return _filesSelectedCanBeUndeleted;    
            }   
        set{        
            _filesSelectedCanBeUndeleted = value;        
            OnPropertyChanged("FilesSelectedCanBeUndeleted");    
            // You have also to notify that the second Prop will change
            OnPropertyChanged("FilesSelectedCanBeDeleted");    
            }}

public bool FilesSelectedCanBeDeleted{
        get{
            return !FilesSelectedCanBeUndeleted;
        }
        }

Xaml could look like this then ....

<MenuItem Header="Delete" 
    Command="{Binding DeleteCommand }" 
    Visibility="{Binding Path=FilesSelectedCanBeDeleted, Converter={StaticResource BoolToVisConverter}}" >

Bind two elements' Visibility to one property

4 Answers4

Linked