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.

Carson Carson · Accepted Answer · 2017-01-08T23:23:51

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

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

1 Answers