Hide WPF elements in Visual Studio designer

Question

I have a WPF form which basically looks like this:

<Window ...>
  <Grid>
    <DockPanel>
      [content shown during normal operation]
    </DockPanel>

    <Grid Background="#CCCC" Visibility="Hidden">
      [overlay grid which is only shown during special circumstances]
    </Grid>
  </Grid>
</Window>

The overlay grid hides everything else (i.e. the "normal content") and is only shown under special circumstances (i.e. if the network connection goes down). This works perfectly fine when running the program.

Now, in design mode, the problem is that Visual Studio ignores the Visibility="Hidden". Usually, this makes perfect sense (after all, I want to be able to edit the hidden UI elements), but in my case it's annoying, because it prevents me from editing the stuff in the DockPanel in the designer.

So, what I'd like to do is something like that:

<Grid Background="#CCCC" Visibility="Hidden" VS.ShowInDesigner="False">
  [overlay grid which is only shown during special circumstances]
</Grid>

But, alas, there is no such property, or at least none that I know of. Any ideas?

Answer 1

Starting from VS2012 you can just use the Blend namespace IsHidden attribute:

• add if not already present xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
• put d:IsHidden="true" on element you want to hide at design time only

Answer 2

Nice solution, I was having a similar problem and I agree that there are cases where it's needed. Here is a minor update that allows you to edit the value to turn IsHidden on and off while designing. I also applied a ScaleTransform instead of setting Width and Height to reduce screen artifacts a bit if control grips etc are displayed and to avoid conflicts if the control being hidden already has Width and Height properties set (assuming that the control doesn't already have a LayoutTransform set on it).

Public Class DesignModeTool

  Public Shared ReadOnly IsHiddenProperty As DependencyProperty = DependencyProperty.RegisterAttached( _
    "IsHidden", GetType(Boolean), GetType(DesignModeTool), _
    New FrameworkPropertyMetadata(False, New PropertyChangedCallback(AddressOf OnIsHiddenChanged)))

  Public Shared Sub SetIsHidden(ByVal element As FrameworkElement, ByVal value As Boolean)
    element.SetValue(IsHiddenProperty, value)
  End Sub

  Public Shared Function GetIsHidden(ByVal element As FrameworkElement) As Boolean
    Return DirectCast(element.GetValue(IsHiddenProperty), Boolean)
  End Function

  Private Shared Sub OnIsHiddenChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
    If System.ComponentModel.DesignerProperties.GetIsInDesignMode(d) AndAlso True.Equals(e.NewValue) Then
      With DirectCast(d, FrameworkElement)
        .LayoutTransform = New ScaleTransform(0.001, 0.001)
      End With
    ElseIf System.ComponentModel.DesignerProperties.GetIsInDesignMode(d) AndAlso False.Equals(e.NewValue) Then
      With DirectCast(d, FrameworkElement)
        .LayoutTransform = Nothing
      End With
    End If
  End Sub
End Class 

Answer 3

Nice work! I translated to C# and change the property it's changing to RenderTransform.

static class DesignModeTool
{
    public static readonly DependencyProperty IsHiddenProperty =
        DependencyProperty.RegisterAttached("IsHidden",
            typeof(bool),
            typeof(DesignModeTool),
            new FrameworkPropertyMetadata(false,
                new PropertyChangedCallback(OnIsHiddenChanged)));

    public static void SetIsHidden(FrameworkElement element, bool value)
    {
        element.SetValue(IsHiddenProperty, value);
    }

    public static bool GetIsHidden(FrameworkElement element)
    {
        return (bool)element.GetValue(IsHiddenProperty);
    }

    private static void OnIsHiddenChanged(DependencyObject d,
                                          DependencyPropertyChangedEventArgs e)
    {
        if (!DesignerProperties.GetIsInDesignMode(d)) return;
        var element = (FrameworkElement)d;
        element.RenderTransform = (bool)e.NewValue
           ? new ScaleTransform(0, 0)
           : null;
    }
}