title: User Control Not Resizing
body: <p>I have a rather weird problem with a control that doesn't want to resize. Bellow is the XAML + Code behind of the control written in SL4. </p>
  
  <p>So to explain things rather shortly, the control has 4 regions - Header, Subheader, BodyContent, and Footer. Each region is represented by a "Border" element which acts as a container for it's nested children. </p>
  
  <p>This control is merely to unify the look and feel of my application and doesn't really do anything as far as logic. </p>
  
  <p>My issue is that if I want to use that control i have to explicitly set it's width. When setting it's width with Element-to-element binding (to a parent container) the control doesn't even render. </p>
  
  <p>I also tried to create a " public new double Width/Height" properties, where I'd set the width of the control itself and the width of the "ControlBorder" element. Using this properties also makes the control not render at runtime :(.  I also tried wiring the Size Changed event, but it kept giving me cyclic errors!</p>
  
  <p>Any ideas on how to make this control more "resizable"? The intended application is using it in a grid that employs a Grid Splitter. It's absolutely imperative that the control knows how to resize itself!</p>
  
  <p>Any help would be greatly appreciated!
  Thanks</p>
  
  <p>Martin</p>
  
  <pre><code>&lt;UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="SL4.Learning.LayoutPanel"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400"&gt;
  
      &lt;UserControl.Resources&gt;
          &lt;SolidColorBrush x:Key="DarkBrush" Color="#7B4C4C4B"/&gt;
      &lt;/UserControl.Resources&gt;
  
      &lt;Grid x:Name="LayoutRoot" Background="White"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Border x:Name="ControlBorder" Grid.Row="0" Grid.Column="0"  BorderBrush="{StaticResource DarkBrush}" BorderThickness="2" CornerRadius="4" Margin="2"&gt;
              &lt;Grid&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition x:Name="LayoutHeaderRow" Height="30"/&gt;
                      &lt;RowDefinition x:Name="LayoutSubHeaderRow" Height="30"/&gt;
                      &lt;RowDefinition x:Name="LayoutContentRow" Height="*"/&gt;
                      &lt;RowDefinition x:Name="LayoutFooterRow" Height="30"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition /&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Rectangle x:Name="PnlHeaderBackground" Grid.Row="0" Grid.Column="0" Fill="{StaticResource DarkBrush}"/&gt;
                  &lt;toolkit:DockPanel Grid.Row="0" Grid.Column="0" LastChildFill="False"&gt;
                      &lt;TextBlock x:Name="LblHeaderTitle" Text="Header Text" FontSize="12" Foreground="White" toolkit:DockPanel.Dock="Left" VerticalAlignment="Center" Margin="4,0,0,0"/&gt;
                      &lt;Border x:Name="HeaderBorder" toolkit:DockPanel.Dock="Right" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0"&gt;
  
                      &lt;/Border&gt;
                  &lt;/toolkit:DockPanel&gt;
                  &lt;Border x:Name="SubHeaderBorder" Grid.Row="1" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0"&gt;
  
                  &lt;/Border&gt;
                  &lt;Border x:Name="ContentBorder" Grid.Row="2" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0"&gt;
  
                  &lt;/Border&gt;
                  &lt;Border x:Name="FooterBorder" Grid.Row="3" Grid.Column="0" BorderThickness="0" BorderBrush="Transparent" Margin="0" CornerRadius="0"&gt;
  
                  &lt;/Border&gt;
              &lt;/Grid&gt;
          &lt;/Border&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>And the code behind:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Net;
  using System.Windows;
  using System.Windows.Controls;
  using System.Windows.Documents;
  using System.Windows.Input;
  using System.Windows.Media;
  using System.Windows.Media.Animation;
  using System.Windows.Shapes;
  using System.Windows.Data;
  
  namespace SL4.Learning
  {
      public partial class LayoutPanel : UserControl
      {
          public static readonly DependencyProperty BorderRadiusProperty = DependencyProperty.Register("BorderRadius", typeof(CornerRadius), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderTextProperty = DependencyProperty.Register("HeaderText", typeof(string), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderBackgroundProperty = DependencyProperty.Register("HeaderBackground", typeof(Brush), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderForegroundProperty = DependencyProperty.Register("HeaderForeground", typeof(Brush), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderFontSizeProperty = DependencyProperty.Register("HeaderFontSize", typeof(double), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderFontFamilyProperty = DependencyProperty.Register("HeaderFontFamily", typeof(FontFamily), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderFontWeightProperty = DependencyProperty.Register("HeaderFontWeight", typeof(FontWeight), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderFontStyleProperty = DependencyProperty.Register("HeaderFontStyle", typeof(FontStyle), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderFontStretchProperty = DependencyProperty.Register("HeaderFontStretch", typeof(FontStretch), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty HeaderContentProperty = DependencyProperty.Register("HeaderContent", typeof(UIElement), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty SubHeaderContentProperty = DependencyProperty.Register("SubHeaderContent", typeof(UIElement), typeof(KeystoneContentControl), null);
          public static readonly DependencyProperty BodyContentProperty = DependencyProperty.Register("BodyContent", typeof(UIElement), typeof(KeystoneContentControl), null); 
          public static readonly DependencyProperty FooterContentProperty = DependencyProperty.Register("FooterContent", typeof(UIElement), typeof(KeystoneContentControl), null); 
  
          public KeystoneContentControl()
          {
              InitializeComponent();
  
          }
  
          public new double Width
          {
              get { return this.Width; }
              set
              {
                  this.Width = value;
                  this.ControlBorder.Width = value;
              }
          }
  
          public new double Height
          {
              get { return this.Height; }
              set
              {
                   this.Height = value;                   
                   this.ControlBorder.Height = value;
              }
          }
  
          public new Brush BorderBrush
          {
              get { return this.ControlBorder.BorderBrush; }
              set { this.ControlBorder.BorderBrush = value; }
          }
  
          public new Thickness BorderThickness
          {
              get { return this.ControlBorder.BorderThickness; }
              set { this.ControlBorder.BorderThickness = value; }
          }
  
          public CornerRadius BorderRadius
          {
              get{ return (CornerRadius)this.GetValue(KeystoneContentControl.BorderRadiusProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.BorderRadiusProperty, value);
                  this.ControlBorder.CornerRadius = value;
              }
          }
  
          public Brush HeaderBackground
          {
              get{ return (Brush)this.GetValue(KeystoneContentControl.HeaderBackgroundProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderBackgroundProperty, value);
                  this.PnlHeaderBackground.Fill = value; 
              }
          }
  
          public Brush HeaderForeground
          {
              get{ return (Brush)this.GetValue(KeystoneContentControl.HeaderForegroundProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderForegroundProperty, value);
                  this.LblHeaderTitle.Foreground = value;
              }
          }
  
          public double HeaderFontSize
          {
              get { return (double)this.GetValue(KeystoneContentControl.HeaderFontSizeProperty); }
              set
              {
                  this.LblHeaderTitle.FontSize = value;
              }
          }
  
          public FontFamily HeaderFontFamily
          {
              get { return (FontFamily)this.GetValue(KeystoneContentControl.HeaderFontFamilyProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderFontFamilyProperty, value);
                  this.LblHeaderTitle.FontFamily = value;
              }
          }
  
          public FontWeight HeaderFontWeight
          {
              get{ return (FontWeight)this.GetValue(KeystoneContentControl.HeaderFontWeightProperty); }
              set
              {
                  this.SetValue(HeaderFontWeightProperty, value);
                  this.LblHeaderTitle.FontWeight = value;
              }
          }
  
          public FontStyle HeaderFontStyle
          {
              get { return (FontStyle)this.GetValue(KeystoneContentControl.HeaderFontStyleProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderFontStyleProperty, value);
                  this.LblHeaderTitle.FontStyle = value;
              }
          }
  
          public FontStretch HeaderFontStretch
          {
              get { return (FontStretch)this.GetValue(KeystoneContentControl.HeaderFontStretchProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderFontStretchProperty, value);
                  this.LblHeaderTitle.FontStretch = value; 
              }
          }
  
          public string HeaderText
          {
              get { return (string)this.GetValue(KeystoneContentControl.HeaderTextProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderTextProperty, value);
                  this.LblHeaderTitle.Text = value;
              }
          }
  
          public UIElement HeaderContent
          {
              get{ return (UIElement)this.GetValue(KeystoneContentControl.HeaderContentProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.HeaderContentProperty, value);
                  this.HeaderBorder.Child = value;
              }
          }
  
          public UIElement SubHeaderContent
          {
              get{ return (UIElement)this.GetValue(KeystoneContentControl.SubHeaderContentProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.SubHeaderContentProperty, value);
                  this.SubHeaderBorder.Child = value;
              }
          }
  
          public UIElement BodyContent
          {
              get { return (UIElement)this.GetValue(KeystoneContentControl.BodyContentProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.BodyContentProperty, value);
                  this.ContentBorder.Child = value;
              }
          }
  
          public UIElement FooterContent
          {
              get{ return (UIElement)this.GetValue(KeystoneContentControl.FooterContentProperty); }
              set
              {
                  this.SetValue(KeystoneContentControl.FooterContentProperty, value);
                  this.FooterBorder.Child = value;
              }
          }
      }
  }
  </code></pre>
  
  <p>EDIT: Bellow is the usage of this user control on a page</p>
  
  <pre><code>&lt;UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SL4.Learning.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      d:DesignHeight="600"
      d:DesignWidth="800"
      xmlns:my="clr-namespace:SL4.Learning"&gt;
  
      &lt;Grid x:Name="LayoutRoot" Background="White"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition x:Name="LeftCol" /&gt;
              &lt;ColumnDefinition x:Name="RightCol" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition x:Name="RowHeight" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;my:LayoutPanel Grid.Row="0" Grid.Column="0" Width="{Binding ElementName=LeftCol, Path=ActualWidth}" HorizontalAlignment="Left" x:Name="PnlLayout" VerticalAlignment="Top"&gt;
              &lt;my:LayoutPanel.SubHeaderContent&gt;
                  &lt;TextBlock x:Name="SubHeaderLabel" Text="SubHeader" FontWeight="Bold" VerticalAlignment="Center"/&gt;
              &lt;/my:LayoutPanel.SubHeaderContent&gt;
              &lt;my:LayoutPanel.BodyContent&gt;
                  &lt;TextBlock x:Name="LblContentText" Text="BodyContent"  VerticalAlignment="Center"/&gt;
              &lt;/my:LayoutPanel.BodyContent&gt;
              &lt;my:LayoutPanel.FooterContent&gt;
                  &lt;TextBlock x:Name="LblFooterText" Text="Footer"  VerticalAlignment="Center"/&gt;
              &lt;/my:LayoutPanel.FooterContent&gt;
          &lt;/my:LayoutPanel&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>