Binding a bool to button visibility

Question

I have followed both examples in this question however I am unable to bind a boolean in my view model to a button in my view. I am using a different button that toggles whether or not the other button should be visible or not, can anyone see what is wrong?

Currently I am trying to bind the boolean to the visibility of the button, this is not working even though I have tested that the boolean is toggling between True/False. The other method I used was to use a data trigger to change the visibility. I have commented out this method as it was not working.

View

<Button Canvas.Left="300" Canvas.Top="235" Click="ShowEquipmentItems" Cursor="Hand" Visibility="{Binding ShowButtons, Converter={StaticResource BooleanToVisibilityConverter}}">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel>
                                <Image Source="../Images/Green spot icon.png" Height="35" Width="35" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <!--<Style.Triggers>
                            <DataTrigger Binding="{Binding ShowButtons}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>-->

                </Style>
            </Button.Style>
        </Button>
        <Button Canvas.Right="10" Canvas.Top="388" Command="{Binding ToggleButtonCommand}" Cursor="Hand" Height="50" Width="50" />

View Model

public class CabinViewViewModel : BindableBase, ICabinViewViewModel
{
    public bool ShowButtons { get; set; }
    public DelegateCommand ToggleButtonCommand { get; private set; }

    public CabinViewViewModel()
    {
        ToggleButtonCommand = new DelegateCommand(ToggleButtons, CanToggleButtons);
        ShowButtons = true;
    }



    public void ToggleButtons()
    {

        ShowButtons = !ShowButtons;
        System.Console.WriteLine("Toggle Buttons" + ShowButtons.ToString());
    }

    public bool CanToggleButtons()
    {
        return true;
    }

}

score 2 · Answer 1 · answered Apr 25 '19 at 16:38

2

Obviously @mm8's answer works just as fine but imho a cleaner way is to use the BooleanToVisibilityConverter like this:

<Button Visibility="{Binding ShowButtons, Converter={StaticResource BooleanToVisibilityConverter}}">

Saves you a lot of code, too and is easier to read.

answered Apr 25 '19 at 16:38

lionthefox

369
1
2
16

1

This should be the accepted answer. The OP should just remove his `` and everything's fine (given the `ShowButtons` property being implemented correctly using `INotifyPropertyChanged`) – Haukinger Apr 25 '19 at 17:14
1

I think using Converter is a much cleaner approach. – Avinash Reddy Apr 26 '19 at 08:50

score 0 · Accepted Answer · answered Apr 25 '19 at 13:20

Don't set the local Visibility property:

<Button Canvas.Left="300" Canvas.Top="235" Click="ShowEquipmentItems" Cursor="Hand">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel>
                        <Image Source="../Images/Green spot icon.png" Height="35" Width="35" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ShowButtons}" Value="True">
                    <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Local values take precedence over style setters as explained in the docs: https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/dependency-property-value-precedence

You should also raise the PropertyChanged event for the ShowButtons property in your view model:

public class CabinViewViewModel : BindableBase, ICabinViewViewModel
{
    private bool _showButtons;
    public bool ShowButtons
    {
        get { return _showButtons; }
        set { SetProperty(ref _showButtons, value); }
    }
    ...
}

Not really, the style does the same as the converter, just a lot more verbose. The part about the property implementation is important, though. — Haukinger, Apr 25 '19 at 17:17

Binding a bool to button visibility

2 Answers2