Changing background proprieties of multiple controls using a button

Question

I am working on an app that has a lot of buttons on the main window.

The buttons have been programmed individually to change color when pressed, and save that those colors using the user settings from Visual Studio.

More exactly, when the user presses a button once, its background changes to red, and when he presses it again the background changes to green.

Edited for mm8:

Here is the xaml (sample):

And this is the code I implemented into each button's click event:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;


namespace test2
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button0_Click(object sender, RoutedEventArgs e)
        {
            if (Properties.Settings.Default.Color0 == "Green")
            {
                Properties.Settings.Default.Color0 = "Red";
                Properties.Settings.Default.Save();
            }
            else
            {
                Properties.Settings.Default.Color0 = "Green";
                Properties.Settings.Default.Save();
            }
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            if (Properties.Settings.Default.Color1 == "Green")
            {
                Properties.Settings.Default.Color1 = "Red";
                Properties.Settings.Default.Save();
            }
            else
            {
                Properties.Settings.Default.Color1 = "Green";
                Properties.Settings.Default.Save();
            }
        }

        private void Button2_Click(object sender, RoutedEventArgs e)
        {
            if (Properties.Settings.Default.Color2 == "Green")
            {
                Properties.Settings.Default.Color2 = "Red";
                Properties.Settings.Default.Save();
            }
            else
            {
                Properties.Settings.Default.Color2 = "Green";
                Properties.Settings.Default.Save();
            }
        }
        private void Reset_Click(object sender, RoutedEventArgs e)
        {
            foreach (Button button in theGrid.Children.OfType

Now, I want to some sort of a Reset button, which when pressed changes the background of all the buttons to the default (not red, nor green).

What I tried to do was to use ideas from this thread and use them as a click event on the reset button, but whenever I do

foreach (Control x in Control.Controls)

or any other method using the "Controls" (this.Controls, etc) I get it underlined with red, saying that the Control class does not have the definition.

Am I doing something wrong? Do you guys have any suggestions as to how I can program that button to change all buttons' background to default?

Peter Duniho · Accepted Answer

The short version: you're doing it wrong. I mean, I suspect you already knew that to some extent, because the code didn't work. But looking at your comment that says you'll have 240 buttons, you are really going about this the wrong way.

This answer is meant to walk you through three different options, each moving you closer to what is the best approach for dealing with this scenario.

Starting with your original effort, we can get the code you posted to work mostly as-is. Your main problem is that, having successfully obtained each Button child of your Grid, you cannot just set the Button.Background property. If you do, you will erase the binding that was set up in the XAML.

Instead, you need to reset the values in your source data, and then force the binding target to be updated (because the Settings object does not provide a WPF-compatible property-changed notification mechanism). You can accomplish this by changing your Reset_Click() method to look like this:

private void Reset_Click(object sender, RoutedEventArgs e)
{
    Settings.Default.Color0 = Settings.Default.Color1 = Settings.Default.Color2 = "";
    Settings.Default.Save();

    foreach (Button button in theGrid.Children.OfType

This is not ideal. It would be much better to not have to access the binding state directly, and instead let WPF deal with updates. In addition, if you look at the debug output, for every time a button is set to the "default" state, a exception is being thrown. That's also not a very good situation.

These issues can be addressed. The first, by moving to an MVVM-style implementation, in which the state of the program is stored independently of the visual part of the program, with the visual part responding to changes in that state. The second, by adding some logic to coerce the invalid string value into something that WPF is happy with.

To accomplish this, it's helpful to have a couple of pre-made helper classes made, one for supporting the view model classes themselves directly, and one for representing a command (which is a better way to deal with user input than handling Click events directly). Those look like this:

class NotifyPropertyChangedBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void _UpdateField(ref T field, T newValue,
        Action onChangedCallback = null,
        [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer.Default.Equals(field, newValue))
        {
            return;
        }

        T oldValue = field;

        field = newValue;
        onChangedCallback?.Invoke(oldValue);
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

class DelegateCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func _canExecute;

    public DelegateCommand(Action execute) : this(execute, null) { }

    public DelegateCommand(Action execute, Func canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter)
    {
        return _canExecute?.Invoke() ?? true;
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

These are just examples. The NotifyPropertyChangedBase class is mostly identical to what I use on a day-to-day basis. The DelegateCommand class is a stripped-down version of a more fully-featured implementation I use (mainly, it's missing support for command parameters, since they aren't needed in this particular scenario). There are lots of similar examples on Stack Overflow and the Internet, often built into a library designed to help with WPF development.

With those, we can define some "view model" classes that will represent the state of the program. Note that these classes have practically nothing in them that involves the view per se. The one exception being the use of DependencyProperty.UnsetValue, as a concession to simplicity. It is possible to get rid of even that, along with the "coerce" methods that support that design, as you'll see in the third example, after this one.

First, a view model to represent each individual button's state:

class ButtonViewModel : NotifyPropertyChangedBase
{
    private object _color = DependencyProperty.UnsetValue;
    public object Color
    {
        get { return _color; }
        set { _UpdateField(ref _color, value); }
    }

    public ICommand ToggleCommand { get; }

    public ButtonViewModel()
    {
        ToggleCommand = new DelegateCommand(_Toggle);
    }

    private void _Toggle()
    {
        Color = object.Equals(Color, "Green") ? "Red" : "Green";
    }

    public void Reset()
    {
        Color = DependencyProperty.UnsetValue;
    }
}

Then a view model that holds the overall state of the program:

class MainViewModel : NotifyPropertyChangedBase
{
    private ButtonViewModel _button0 = new ButtonViewModel();
    public ButtonViewModel Button0
    {
        get { return _button0; }
        set { _UpdateField(ref _button0, value); }
    }

    private ButtonViewModel _button1 = new ButtonViewModel();
    public ButtonViewModel Button1
    {
        get { return _button1; }
        set { _UpdateField(ref _button1, value); }
    }

    private ButtonViewModel _button2 = new ButtonViewModel();
    public ButtonViewModel Button2
    {
        get { return _button2; }
        set { _UpdateField(ref _button2, value); }
    }

    public ICommand ResetCommand { get; }

    public MainViewModel()
    {
        ResetCommand = new DelegateCommand(_Reset);

        Button0.Color = _CoerceColorString(Settings.Default.Color0);
        Button1.Color = _CoerceColorString(Settings.Default.Color1);
        Button2.Color = _CoerceColorString(Settings.Default.Color2);

        Button0.PropertyChanged += (s, e) =>
        {
            Settings.Default.Color0 = _CoercePropertyValue(Button0.Color);
            Settings.Default.Save();
        };
        Button1.PropertyChanged += (s, e) =>
        {
            Settings.Default.Color1 = _CoercePropertyValue(Button1.Color);
            Settings.Default.Save();
        };
        Button2.PropertyChanged += (s, e) =>
        {
            Settings.Default.Color2 = _CoercePropertyValue(Button2.Color);
            Settings.Default.Save();
        };
    }

    private object _CoerceColorString(string color)
    {
        return !string.IsNullOrWhiteSpace(color) ? color : DependencyProperty.UnsetValue;
    }

    private string _CoercePropertyValue(object color)
    {
        string value = color as string;

        return value ?? "";
    }

    private void _Reset()
    {
        Button0.Reset();
        Button1.Reset();
        Button2.Reset();
    }
}

The important thing to note is that nowhere in the above does anything try to manipulate the UI objects directly, and yet you have everything there that you'd need to maintain the state of the program as controlled by the user.

With the view models in hand, all that's left is to define the UI:

Some things to note here:

There is no code at all in the MainWindow.xaml.cs file. It's completely unchanged from the default template, with just the parameterless constructor and the call to InitializeComponent(). By moving to an MVVM-style implementation, a lot of the internal plumbing required otherwise just goes away completely.
This code does not hard-code any UI element locations (e.g. by setting Margin values). Instead, it takes advantage of WPF's layout features to place the color buttons in a row in the middle, and to place the reset button in the lower right of the window (that way it's visible no matter what size the window is).
The MainViewModel object is set as the Window.DataContext value. This data context is inherited by any elements within the window, unless overridden by setting it explicitly, or (as you'll see in the third example) because the element is automatically generated in a different context. Binding paths are all relative to this object, of course.

Now, this would probably an okay way to go if you really did only have three buttons. But with 240, you're in for a lot of copy/paste headaches. There are a lot of reasons to follow the DRY ("don't repeat yourself") principle, including convenience and code reliability and maintainability. That all would definitely apply here.

To improve on the MVVM example above, we can do some things:

Save the settings in a collection instead of having an individual setting property for each button.
Maintain a collection of the ButtonViewModel objects instead of having an explicit property for each button.
Use an ItemsControl to present the collection of ButtonViewModel objects instead of declaring a separate Button element for every button.

To accomplish this, the view models will have to change a bit. The MainViewModel replaces the individual properties with a single Buttons property to hold all the button view model objects:

class MainViewModel : NotifyPropertyChangedBase
{
    public ObservableCollection Buttons { get; } = new ObservableCollection();

    public ICommand ResetCommand { get; }

    public MainViewModel()
    {
        ResetCommand = new DelegateCommand(_Reset);

        for (int i = 0; i < Settings.Default.Colors.Count; i++)
        {
            ButtonViewModel buttonModel = new ButtonViewModel(i) { Color = Settings.Default.Colors[i] };

            Buttons.Add(buttonModel);
            buttonModel.PropertyChanged += (s, e) =>
            {
                ButtonViewModel model = (ButtonViewModel)s;

                Settings.Default.Colors[model.ButtonIndex] = model.Color;
                Settings.Default.Save();
            };
        }
    }

    private void _Reset()
    {
        foreach (ButtonViewModel model in Buttons)
        {
            model.Reset();
        }
    }
}

You'll notice the handling of the Color property is a little different too. That's because in this example, the Color property is an actual string type instead of object, and I'm using an IValueConverter implementation to handle mapping the string value to what's needed by the XAML elements (more on that in a bit).

The new ButtonViewModel is a little different too. It has a new property, to indicate which button it is (this allows the main view model to know which element of the settings collection the button view model goes with), and the Color property handling is a little simpler, because now we're dealing only with string values, instead of the DependencyProperty.UnsetValue value as well:

class ButtonViewModel : NotifyPropertyChangedBase
{
    public int ButtonIndex { get; }

    private string _color;
    public string Color
    {
        get { return _color; }
        set { _UpdateField(ref _color, value); }
    }

    public ICommand ToggleCommand { get; }

    public ButtonViewModel(int buttonIndex)
    {
        ButtonIndex = buttonIndex;
        ToggleCommand = new DelegateCommand(_Toggle);
    }

    private void _Toggle()
    {
        Color = Color == "Green" ? "Red" : "Green";
    }

    public void Reset()
    {
        Color = null;
    }
}

With our new view models, they can now be hooked up in the XAML:

As before, the main view model is declared as the Window.DataContext value. But, instead of explicitly declaring each button element explicitly, I'm using an ItemsControl element to present the buttons. It has these crucial aspects:

The ItemsSource property is bound to the Buttons collection.
The default panel used for this element would be a vertically-oriented StackPanel, so I've overridden that with a horizontally-oriented one, to achieve the same layout used in the previous examples.
I've declared an instance of my IValueConverter implementation as a resource so that it can be used in the template.
I've declared a DataTemplate as a resource, with the DataType set to the type of the ButtonViewModel. When presenting the individual ButtonViewModel objects, WPF will look in the in-scope resources for a template assigned to that type, and since I've declared one here, it will use that to present the view model object. For each ButtonViewModel object, WPF will create an instance of the content in the DataTemplate element, and will set the DataContext for the root object of that content to the view model object. And finally,
In the template, the binding uses the converter I declared earlier. This allows me to insert a little bit of C# code into the property binding, to allow me to ensure the string value is handled appropriately, i.e. when it's empty the appropriate DependencyProperty.UnsetValue is used, avoiding any runtime exceptions from the binding engine.

Here's that converter:

class ColorStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string text = (string)value;

        return !string.IsNullOrWhiteSpace(text) ? text : DependencyProperty.UnsetValue;
    }

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

In this case, the ConvertBack() method is not implemented, because we'll only ever be using the binding in the OneWay mode. We just need to check the string value, and if it's null or empty (or whitespace), we return the DependencyProperty.UnsetValue instead.

Some other notes on this implementation:

The Settings.Colors property is set to type System.Collections.Specialized.StringCollection, and initialized (in the Designer) with three empty string values. The length of this collection determines how many buttons are created. You can, of course, use whatever mechanism you want to track this side of the data if you prefer something else.
With 240 buttons, simply arranging them in a horizontal row may or may not work for you (depending on how large the buttons really will be). You can use other panel objects for the ItemsPanel property; likely candidates include UniformGrid or ListView (with the GridView view), both of which can arrange the elements in an automatically spaced grid.

Changing background proprieties of multiple controls using a button

Answers (2)

Related Questions