Question

I am creating a WPF application in VS2010. I am using multiple grid controls layered on top of one another to perform similar functions to a tab control. The grid controls have an opaque (white) background.

The trouble occurs because no matter which grid I have ‘in front’ in the design window, I can still see all the outlines of all the other controls on the other grids which are ‘behind’ the top panel. It is extremely visually confusing.

This only happens at design time. At run time, things display just fine.

How do I turn off the outlines of all those other controls?

The screen shot below shows my top grid which only contains 4 text boxes and 4 radio buttons, but shows the outlines from all the other controls on the other grids.

Answer 1

Set a RenderTransform on any grid whose controls you don’t want to see outlines for, for example:

<Grid RenderTransform="1 0 0 1 10000 10000">

You could use an attached property to make this convenient, allowing you set the grid to automatically transform whenever it is hidden simply by writing:

<Grid my:OutOfThisWorld.WhenHidden="True">

Here is the code:

public class OutOfThisWorld : DependencyObject
{
  // GoAway
  public static bool GetGoAway(DependencyObject obj) { return (bool)obj.GetValue(GoAwayProperty); }
  public static void SetGoAway(DependencyObject obj, bool value) { obj.SetValue(GoAwayProperty, value); }
  public static readonly DependencyProperty GoAwayProperty = DependencyProperty.RegisterAttached("GoAway", typeof(bool), typeof(OutOfThisWorld), new UIPropertyMetadata
  {
    PropertyChangedCallback = (obj, e) =>
    {
      obj.SetValue(UIElement.RenderTransformProperty,
        (bool)e.NewValue ? new TranslateTransform(100000,10000) : null);
    }
  });

  // WhenHidden
  public static bool GetWhenHidden(DependencyObject obj) { return (bool)obj.GetValue(WhenHiddenProperty); }
  public static void SetWhenHidden(DependencyObject obj, bool value) { obj.SetValue(WhenHiddenProperty, value); }
  public static readonly DependencyProperty WhenHiddenProperty = DependencyProperty.RegisterAttached("WhenHidden", typeof(bool), typeof(OutOfThisWorld), new PropertyMetadata
  {
    PropertyChangedCallback = (obj, e) =>
    {
      if((bool)e.NewValue)
        BindingOperations.SetBinding(obj, GoAwayProperty,
          new Binding("Visibility")
          {
            RelativeSource=RelativeSource.Self,
            Converter = new IsHiddenConverter()
          });
    }
  });

  class IsHiddenConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      return (Visibility)value == Visibility.Hidden;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); }
  }
}

How it works: Setting OutOfThisWorld.WhenHidden creates a binding to the OutOfThisWorld.GoAway property such that whenever the target’s Visibility is “Hidden” the GoAway property is true. When GoAway actually goes true, the RenderTransform is added.

Having said all that, have you considered using Visibility=Collapsed instead of Visibility=Hidden? It might be simpler.

I also have to strongly endorse Will’s observation that this is a terrible design. How “stuck with it” are you really? If it is a political thing, I’m sorry for you. But from a technical standpoint refactoring this into a real tab control with a template should be very easy.