Hide WPF elements in Visual Studio designer

Question

I have a WPF form which basically looks like this:

  
    
      [content shown during normal operation]
             


        

Answer 1

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.

Answer 2

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;
    }
}

Answer 3

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 4

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.

Answer 5

I am on the other side... hate VS 2012 for hiding hidden WPF controls in designer. I need to see them so i have modified gregsdennis code to:

public 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.Visibility=Visibility.Visible;

    }
}

wpfClasses2:DesignModeTool.IsHidden="False" will show the control in designer mode.

Answer 6

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