How to change the background color of the TabPanel in a TabControl?

Question

I know how to set the background color of a TabPanel in xaml like this:

<TabControl.Resources>
    <Style x:Key="noClue" TargetType="{x:Type TabPanel}">
        <Setter Property="Background" Value="Transparent"></Setter>
    </Style>
</TabControl.Resources>

However, I want to change this background color when I click a button on the WPF application, which means changing it at run-time. Is there a way to do that?

Thanks in advance for your time.

Answer 1

Yes, you can bind the TabPanel's Background property to a property in your View/ViewModel and change it when you click the button. The XAML for the binding would look something like so using:

<TabPanel Background="{Binding Path=BackgroundColor}"/>

Where your property name is BackgroundColor. The Background is a Brush so take that into account when you manage your bindings. You can also achieve the binding from the style, but you may need a RelativeSource

In a style, try this

<Setter Property="Background" Value="{Binding BackgroundColor}" />

If your window is bound to a DataContext. Also try removing x:Key from your style. It is not needed.

EDIT: This worked

The Style

<Window.Resources>
    <Style TargetType="{x:Type TabPanel}">
        <Setter Property="Background" Value="{Binding BackgroundColor}"/>
    </Style>
</Window.Resources>

The Window

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private SolidColorBrush backgroundColor = new SolidColorBrush(Colors.Black);

    public SolidColorBrush BackgroundColor
    {
        get { return backgroundColor; }
        set
        {
            if (backgroundColor == value)
                return;

            backgroundColor = value;
            RaisePropertyChanged(nameof(backgroundColor));
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        // Make sure to set the DataContext to this!
        DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // Change the color through the property
        if (BackgroundColor.Color == Colors.Black)
            BackgroundColor = new SolidColorBrush(Colors.Transparent);
        else
            BackgroundColor = new SolidColorBrush(Colors.Black);
    }
}

This binds to the View, where you might want to abstract this to a ViewModel and bind to that. Also, if you do move this color logic to a ViewModel you also may want to change the SolidColorBrush in the BackgroundColor property to just a Color or some other UI-Independent type, but it is up to you. Check out this and other WPF MVVM related articles for more info on MVVM and Binding to ViewModels