How to remove control outlines in Visual Studio 2010, WPF?

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 extre开发者_运维知识库mely 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.

---

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.

---

I don't know how to turn the lines off, or even if you can, but I can say that whenever I've done this sort of stuff, whether Win32 dialog, Winforms or WPF, I always regret piling stuff up like that.

You would almost certainly be better off splitting that into separate user-controls, so that the various 'pages' were handled separately.

To my mind, the problem with the boxes are a symptom of your real problem, not the problem itself.

---

How about checking out the answer here? You might be able to do something along those lines...

or while you're designing you could set up all your column/row definitions in the code behind instead maybe? This should get rid of all your lines... Then put the xaml back in once you've got your design mainly sorted.

---

Why not put each 'tab' in a user control then you can edit them separately?