How to Bind Visibility of Several Controls on a Page

Question

At the click of a button, I would like to be able to toggle the visibility of several items on a page simultaneously. What would be the best possible solution for this? For instance, I have about 15 TextBlocks that need to be either Visible or Collapsed based on when a button is pressed.

EDIT

In my view in each of my TextBlocks I am placing

Visibility="{Binding TextBlockVisible, Converter={StaticResource BoolVisibilityConverter}}"

And my BoolVisibilityConverter class

public class BoolVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

so on a button click how can I get the Visibility of the TextBlocks to change? The following is not working

private void ChangeVisibility_Click(object sender, RoutedEventArgs e)
{
    TextBlockVisible = !TextBlockVisible;  //does not change Visibility of TextBlocks       
}

private bool textBlockVisible = true;

    public bool TextBlockVisible 
    {
        get
        {
            return textBlockVisible;
        }

        set
        {
            textBlockVisible = value;
            NotifyPropertyChanged("TextBlockVisible");
        }
    }

    private void NotifyPropertyChanged(string info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(info));
        }
    }

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

and in App.xaml

 <converters:BoolVisibilityConverter x:Key="BoolVisibilityConverter"/>

Answer 1

When you configure a binding you have to specify the data source and the data property.

In your example code, you specify the source property 'TextBlockVisible'

Visibility='{ Binding TextBlockVisible ,
              Converter={StaticResource BoolVisibilityConverter}}'

 <!-- No source set for binding -->

but you don't indicate the source itself. When there is no source specified the binding framework looks at the DataContext property for the source. Your TextBlocks don't have the DataContext set, so the binding framework examines the DataContext property on each parent element (until it reaches phone:PhoneApplicationPage )

As @Oleg points out, you haven't set the DataContext, which is why the binding is not working.

Since the TextBlockVisible property is a member of your page class you need to set in the page constructor.

 public MainPage() {
    InitializeComponent();
    DataContext = this;  
  }

FWIW, properties like TextBlockVisible are usually kept in a separate ViewModel class. Then your setup code would be:

var vm = new ExampleViewModel();
DataContext = vm;

Answer 2

It seems, that you don't set DataContext of your page. TextBlockVisible is the property of the page class, so in the constructor of the page after the InitializeComponent you should have this

  public CurrentPage()
  {
    InitializeComponent();
    DataContext = this;  
  }

If there is no Source of Binding, it takes from DataContext.

Not the best, but also possible way to do what you want (to do it without INPC and binding from DataContext): you have to set the name of some element, that will change its visilility. In your click event you set

private void ChangeVisibility_Click(object sender, RoutedEventArgs e)
{
    SomeElementName.Visibility = SomeElementName.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;       
}

And on the other elements you make binding this way:

Visibility="{Binding Visibility, ElementName=SomeElementName}"