title: Make middle column take all the remaining space
body: <p>I've made a usercontrol where my rootcontainer is a grid. </p>
  
  <p>The grid has 3 columns, and I want to make the first and last column a fixed size of 30.
  The middle column should take all the remaining space.</p>
  
  <p>But my code is not working.. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;UserControl
  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"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
  mc:Ignorable="d"
  x:Class="UserControlSolution.UserControlButton"
  x:Name="UserControl"
  Height="50" Background="{DynamicResource DarkGrey}"&gt;
  
  &lt;i:Interaction.Triggers&gt;
      &lt;i:EventTrigger EventName="MouseEnter"&gt;
          &lt;ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Expand"/&gt;
      &lt;/i:EventTrigger&gt;
      &lt;i:EventTrigger EventName="MouseLeave"&gt;
          &lt;ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Collapse"/&gt;
      &lt;/i:EventTrigger&gt;
      &lt;i:EventTrigger EventName="MouseLeftButtonDown" SourceObject="{Binding ElementName=UserStatusLabel}"&gt;
          &lt;ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="CenterUserName"/&gt;
      &lt;/i:EventTrigger&gt;
  &lt;/i:Interaction.Triggers&gt;
  
  &lt;Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" HorizontalAlignment="Left"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="30"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
          &lt;ColumnDefinition Width="30"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;VisualStateManager.CustomVisualStateManager&gt;
          &lt;ei:ExtendedVisualStateManager/&gt;
      &lt;/VisualStateManager.CustomVisualStateManager&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup x:Name="VisualStateGroup"&gt;
              &lt;VisualStateGroup.Transitions&gt;
                  &lt;VisualTransition GeneratedDuration="0:0:0.3" To="Expand"/&gt;
                  &lt;VisualTransition GeneratedDuration="0:0:0.1" To="Collapse"/&gt;
              &lt;/VisualStateGroup.Transitions&gt;
              &lt;VisualState x:Name="Expand"&gt;
                  &lt;Storyboard&gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="90"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="UserCallAlarmPanel"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static VerticalAlignment.Top}"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
              &lt;VisualState x:Name="Collapse"/&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
  
      &lt;StackPanel x:Name="UserCallAlarmPanel" Grid.Column="0" Background="{DynamicResource DarkGrey}" Margin="0,0,2,0" HorizontalAlignment="Left" VerticalAlignment="Center"&gt;
          &lt;Viewbox Height="25"&gt; 
              &lt;ContentControl Content="{DynamicResource calls_icon}" /&gt;
          &lt;/Viewbox&gt;
          &lt;Viewbox Height="25"&gt; 
              &lt;ContentControl Content="{DynamicResource alarm_icon}"/&gt;
          &lt;/Viewbox&gt;
      &lt;/StackPanel&gt;
  
      &lt;StackPanel x:Name="UserContainer" Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Background="{DynamicResource Red}" &gt;
          &lt;TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Text="Onthaal Telefoon" VerticalAlignment="Top" FontFamily="Segoe UI Semibold" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,2"/&gt;
          &lt;TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFE5E5E5"&gt;&lt;Run Language="nl-nl" Text="Demeestere advocaten"/&gt;&lt;/TextBlock&gt;
      &lt;/StackPanel&gt;
  
      &lt;Viewbox x:Name="StatusIconContainer" VerticalAlignment="Center" Grid.Column="2" OpacityMask="Black"&gt; 
          &lt;ContentControl x:Name="StatusIcon" Content="{DynamicResource appbar_check_orange}" VerticalAlignment="Top" /&gt;
      &lt;/Viewbox&gt;
  &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>I've set the width of the middle column to '*' but that doesn't work apparently.</p>
  
  <p>This is what it looks like when I set the middle column background to blue:</p>
  
  <p><img src="https://i.stack.imgur.com/C2kO8.png" alt="enter image description here"></p>