Question

My WPF TabControl contains multiple TabItems. I want to visually alert users that data exists on a tab. Currently users have to click each tab to be sure nothing important was overlooked. Each tab represents a step (with instructions) of a multi-step workflow. Each workflow contains a random combination of steps (some steps may be skipped). I’d like tabs to change color or otherwise make it clear that one or more of it’s child controls contain instructions.

What binding syntax could I add to either the parent TabControl or the child controls (typically TextBoxes) to achieve this goal? I’d like to minimize repetitive code and use a generic Style or DataTrigger that could be added to the resources section of the Window or App. A challenge is that the control with data may live in a second TabControl within the parent tab so there is not always a direct parent/child relationship.

I sense that my user interface could be redesigned and improved. I’d welcome suggestions along with your answer to my question.

Thanks in advance.

Answer 1

I alert users a tab has NO data by modifying the TabItem Header (that’s the text on top). If no data exists I set the Foreground color to Gray so it appears disabled but is still clickable allowing data to be added. In addition I append the word “Blank” to the text. Ultimately tabs with no data have a grayed out header which reads “Tab 1 Blank”, “Tab 2 Blank” etc.

Details:

I use two binding statements (for the Header and Foreground):

<TabItem x:Name="StepOneTabItem" 
 Header="{Binding StepOneDataExistsText}" 
 Foreground="{Binding Path=StepOneDataExistsText, 
     Converter={StaticResource tabForegroundGrayWhenBlankConverter}}">

Both Bindings make use of the property StepOneDataExistsText which I created on my DataContext. That property is simply a string set conditionally. When bound to the Header it displays either “Tab 1” or “Tab 1 Blank”. The same property bound to Foreground uses a Converter to return either a Gray or Black SolidColorBrush (Gray when “Blank” is at the end of StepOneDataExistsText).

[ValueConversion(typeof(string), typeof(System.Windows.Media.SolidColorBrush))]
public class TabForegroundGrayWhenBlankConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
       string passedInTextValue = (string)value;

       if (passedInTextValue.ToUpper().Contains("BLANK"))
       {
           return new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Gray);
       }
       else
       {
           return new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black);
       }
   }

   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
       return null; 
   }

}

Initially I attempted to change the Background color of the TabItem but ran into difficulties as described here.