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

Other than not using the designer (really, consider this) you could separate the contents of the Grid into a separate UserControl. That way, you could just update that UserControl in isolation from the visibility logic.

HTH, Kent

Answer 2

Since there is no built-in way to do this, I decided to implement a solution myself, which was surprisingly easy to do using attached properties:

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 UIElement, ByVal value As Boolean)
        element.SetValue(IsHiddenProperty, value)
    End Sub

    Public Shared Function GetIsHidden(ByVal element As UIElement) 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)
                .Width = 0
                .Height = 0
            End With
        End If
    End Sub
End Class

After declaring a namespace, the feature can be used like this:

<Grid ... local:DesignModeTool.IsHidden="True">
[stuff I don't want to be shown in the designer]
</Grid>

Answer 3

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 4

I ran into a similar problem recently.

I am using a Rectangle to obscure the main window during a modal dialog's execution. I have the Visibility data bound, but the Rectangle made the designer unusable. I mad the Z index a one time data bind, and a fallback value was lower than the window I wanted to obscure. When the application starts up, the Rectangle's Z index is bound to a higher value than the window.