<p>When creating a UserControl in WPF, I find it convenient to give it some arbitrary Height and Width values so that I can view my changes in the Visual Studio designer. When I run the control, however, I want the Height and Width to be undefined, so that the control will expand to fill whatever container I place it in. How can I acheive this same functionality without having to remove the Height and Width values before building my control? (Or without using DockPanel in the parent container.)</p>

<p>The following code demonstrates the problem:</p>

<pre><code>&lt;Window x:Class="ExampleApplication3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:loc="clr-namespace:ExampleApplication3"
    Title="Example" Height="600" Width="600"&gt;
    &lt;Grid Background="LightGray"&gt;
        &lt;loc:UserControl1 /&gt;
    &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre>

<p>The following definition of <code>UserControl1</code> displays reasonably at design time but displays as a fixed size at run time:</p>

<pre><code>&lt;UserControl x:Class="ExampleApplication3.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300"&gt;
    &lt;Grid Background="LightCyan" /&gt;
&lt;/UserControl&gt;
</code></pre>

<p>The following definition of <code>UserControl1</code> displays as a dot at design time but expands to fill the parent <code>Window1</code> at run time:</p>

<pre><code>&lt;UserControl x:Class="ExampleApplication3.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;Grid Background="LightCyan" /&gt;
&lt;/UserControl&gt;
</code></pre>

[{'answer_id': 75527, 'author': 'Brian Leahy', 'author_id': 580, 'author_profile': 'https://Stackoverflow.com/users/580', 'pm_score': 6, 'selected': False, 'text': '<p>For Blend, a little known trick is to add these attributes to your usercontrol or window:</p>\n\n<pre><code> xmlns:d="http://schemas.microsoft.com/expression/blend/2008" \n      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" \nmc:Ignorable="d"\n       d:DesignHeight="500" d:DesignWidth="600"\n</code></pre>\n\n<p>This will set the design height and width to 500 and 600 respectively.  However this will only work for the blend designer.  Not the Visual Studio Designer.  </p>\n\n<p>As far as the Visual Studio Designer your technique is all that works.  Which is why I don\'t use the Visual Studio Designer. ;)</p>\n'}, {'answer_id': 75606, 'author': 'Alex Duggleby', 'author_id': 5790, 'author_profile': 'https://Stackoverflow.com/users/5790', 'pm_score': 6, 'selected': True, 'text': '<p>In Visual Studio add the Width and Height attribute to your UserControl XAML, but in the code-behind insert this</p>\n\n<pre><code>public UserControl1()\n{\n    InitializeComponent();\n    if (LicenseManager.UsageMode != LicenseUsageMode.Designtime)\n    {\n        this.Width = double.NaN; ;\n        this.Height = double.NaN; ;\n    }\n}\n</code></pre>\n\n<p>This checks to see if the control is running in Design-mode. If not (i.e. runtime) it will set the Width and Height to NaN (Not a number) which is the value you set it to if you remove the Width and Height attributes in XAML.</p>\n\n<p>So at design-time you will have the preset width and height (including if you put the user control in a form) and at runtime it will dock depending on its parent container.</p>\n\n<p>Hope that helps.</p>\n'}, {'answer_id': 79134, 'author': 'AndyL', 'author_id': 9944, 'author_profile': 'https://Stackoverflow.com/users/9944', 'pm_score': 3, 'selected': False, 'text': '<p>I do this all the time.  Simply set the width and height values to "auto" where you instantiate your control, and this will override the design-time values for that UserControl.</p>\n\n<p>ie: <code>&lt;loc:UserControl1 Width="auto" Height="auto" /&gt;</code></p>\n\n<p>Another option is to set a combination of MinWidth and MinHeight to a size that allows design-time work, while Width and Height remain "auto".  Obviously, this only works if you don\'t need the UserControl to size smaller than the min values at runtime.</p>\n'}, {'answer_id': 311897, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>I do it similar, but my solution assures that if you add your control to an container in design mode, it will appear reasonably.</p>\n\n<pre><code>protected override void OnVisualParentChanged(DependencyObject oldParent)\n{\n    if (this.Parent != null)\n    {\n       this.Width = double.NaN;\n       this.Height = double.NaN;\n    }\n}\n</code></pre>\n\n<p>what do you think?</p>\n'}, {'answer_id': 421841, 'author': 'Paul', 'author_id': 44636, 'author_profile': 'https://Stackoverflow.com/users/44636', 'pm_score': 0, 'selected': False, 'text': '<p>Thanks to the original answerer for this solution! For those that are interested, here it is in VB:</p>\n\n<pre><code>If LicenseManager.UsageMode &lt;&gt; LicenseUsageMode.Designtime Then\n    Me.Width = Double.NaN\n    Me.Height = Double.NaN\nEnd If\n</code></pre>\n'}, {'answer_id': 1208106, 'author': 'jpierson', 'author_id': 83658, 'author_profile': 'https://Stackoverflow.com/users/83658', 'pm_score': 0, 'selected': False, 'text': '<p>Some have suggested using the LicenseManager.UsageMode property which I\'ve never seen before but I have used the following code.</p>\n\n<pre><code>if(!DesignerProperties.GetIsInDesignMode(this))\n{\n    this.Width = double.NaN;\n    this.Height = double.NaN;\n}\n</code></pre>\n\n<p>esskar,</p>\n\n<p>I just want to add that you should generally always call the method of the base when overriding an "On" method.</p>\n\n<pre><code>protected override void OnVisualParentChanged(DependencyObject oldParent)\n{\n    base.OnVisualParentChanged(oldParent);\n\n    ...\n}\n</code></pre>\n\n<p>Great workaround by the way, I\'m using it myself now too.</p>\n'}, {'answer_id': 5526765, 'author': 'CLaRGe', 'author_id': 20507, 'author_profile': 'https://Stackoverflow.com/users/20507', 'pm_score': 3, 'selected': False, 'text': '<p>Here are a list of <a href="http://msdn.microsoft.com/en-us/library/ff602277%28v=vs.95%29.aspx" rel="nofollow noreferrer">Design-Time Attributes in the Silverlight Designer</a>. They are the same for the WPF designer.</p>\n\n<p>It lists all of the <code>d:</code> values available in the Designer such as <code>d:DesignHeight</code>, <code>d:DesignWidth</code>, <code>d:IsDesignTimeCreatable</code>, <code>d:CreateList</code> and several others.</p>\n'}, {'answer_id': 5909295, 'author': 'Ondrej', 'author_id': 741414, 'author_profile': 'https://Stackoverflow.com/users/741414', 'pm_score': 2, 'selected': False, 'text': '<p>I was looking for similar solution like the one used in Blend and with your mentions I created simple behavior class with two attached properties Width &amp; Height that are applied only in DesinTime</p>\n\n<pre>\npublic static class DesignBehavior \n{\n    private static readonly Type OwnerType = typeof (DesignBehavior);\n\n    #region Width\n\n    public static readonly DependencyProperty WidthProperty =\n        DependencyProperty.RegisterAttached(\n            "Width",\n            typeof (double),\n            OwnerType,\n            new FrameworkPropertyMetadata(double.NaN, new PropertyChangedCallback(WidthChangedCallback)));\n\n    public static double GetWidth(DependencyObject depObj)\n    {\n        return (double)depObj.GetValue(WidthProperty);\n    }\n\n    public static void SetWidth(DependencyObject depObj, double value)\n    {\n        depObj.SetValue(WidthProperty, value);\n    }\n\n    private static void WidthChangedCallback(DependencyObject depObj, DependencyPropertyChangedEventArgs e)\n    {\n        if (DesignerProperties.GetIsInDesignMode(depObj)) {\n            depObj.SetValue(FrameworkElement.WidthProperty, e.NewValue);\n        }\n    }\n\n    #endregion\n\n    #region Height\n\n    public static readonly DependencyProperty HeightProperty =\n        DependencyProperty.RegisterAttached(\n            "Height",\n            typeof (double),\n            OwnerType,\n            new FrameworkPropertyMetadata(double.NaN, new PropertyChangedCallback(HeightChangedCallback)));\n\n    public static double GetHeight(DependencyObject depObj)\n    {\n        return (double)depObj.GetValue(HeightProperty);\n    }\n\n    public static void SetHeight(DependencyObject depObj, double value)\n    {\n        depObj.SetValue(HeightProperty, value);\n    }\n\n\n    private static void HeightChangedCallback(DependencyObject depObj, DependencyPropertyChangedEventArgs e)\n    {\n        if (DesignerProperties.GetIsInDesignMode(depObj)) {\n            depObj.SetValue(FrameworkElement.HeightProperty, e.NewValue);\n        }\n    }\n\n    #endregion\n\n}\n</pre>\n\n<p>Then in your UserControl you just set these properties in Xaml</p>\n\n<pre>\n&lt;UserControl x:Class="ExtendedDataGrid.Views.PersonOverviewView"\n    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"\n    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"\n    xmlns:tool="http://schemas.microsoft.com/wpf/2008/toolkit"\n    xmlns:b="clr-namespace:ExtendedDataGrid.Behaviors"\n    b:DesignBehavior.Width="600" b:DesignBehavior.Height="200"&gt;\n    &lt;Grid&gt;\n         ...\n    &lt;/Grid&gt;\n&lt;/UserControl&gt;\n</pre>\n'}, {'answer_id': 12169914, 'author': 'Roger Dufresne', 'author_id': 1631841, 'author_profile': 'https://Stackoverflow.com/users/1631841', 'pm_score': 1, 'selected': False, 'text': "<p>Use MinWidth and MinHeight on the control. That way, you'll see it in the designer, and at runtime it will size the way you want.</p>\n"}]
['https://Stackoverflow.com/questions/75495', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/317/']