Сделать средний столбец все оставшееся пространство

Question

Я создал usercontrol, где мой rootcontainer - это сетка.

Сетка имеет 3 столбца, и я хочу сделать первый и последний столбцы фиксированным размером 30. Средний столбец должен занимать все оставшееся пространство.

Но мой код не работает ..

Вот мой код:

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

<i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseEnter"> 
     <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Expand"/> 
    </i:EventTrigger> 
    <i:EventTrigger EventName="MouseLeave"> 
     <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Collapse"/> 
    </i:EventTrigger> 
    <i:EventTrigger EventName="MouseLeftButtonDown" SourceObject="{Binding ElementName=UserStatusLabel}"> 
     <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="CenterUserName"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" HorizontalAlignment="Left"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="30"/> 
    </Grid.ColumnDefinitions> 
    <VisualStateManager.CustomVisualStateManager> 
     <ei:ExtendedVisualStateManager/> 
    </VisualStateManager.CustomVisualStateManager> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:0.3" To="Expand"/> 
       <VisualTransition GeneratedDuration="0:0:0.1" To="Collapse"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Expand"> 
       <Storyboard> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl"> 
         <EasingDoubleKeyFrame KeyTime="0" Value="90"/> 
        </DoubleAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="UserCallAlarmPanel"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static VerticalAlignment.Top}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Collapse"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <StackPanel x:Name="UserCallAlarmPanel" Grid.Column="0" Background="{DynamicResource DarkGrey}" Margin="0,0,2,0" HorizontalAlignment="Left" VerticalAlignment="Center"> 
     <Viewbox Height="25"> 
      <ContentControl Content="{DynamicResource calls_icon}" /> 
     </Viewbox> 
     <Viewbox Height="25"> 
      <ContentControl Content="{DynamicResource alarm_icon}"/> 
     </Viewbox> 
    </StackPanel> 

    <StackPanel x:Name="UserContainer" Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Background="{DynamicResource Red}" > 
     <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"/> 
     <TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFE5E5E5"><Run Language="nl-nl" Text="Demeestere advocaten"/></TextBlock> 
    </StackPanel> 

    <Viewbox x:Name="StatusIconContainer" VerticalAlignment="Center" Grid.Column="2" OpacityMask="Black"> 
     <ContentControl x:Name="StatusIcon" Content="{DynamicResource appbar_check_orange}" VerticalAlignment="Top" /> 
    </Viewbox> 
</Grid> 
</UserControl> 

Я установил ширину среднего столбца «*», но это не работает, по-видимому.

Это то, что он выглядит, когда я установил средний фон столбца синий:

Answer 1

Либо вы должны дать некоторую ширину, которая должна быть больше, чем 60 (30 + 30), или вы должны установить HorizontalAlignment="Stretch" для того, чтобы взять сетку полное пространство. После того, как сетка растягивается, чтобы заполнить ее родительский столбец, средний столбец займет остальную часть пространства, оставшегося после 30 и 30 первого и последнего столбцов

Answer 2

Просто не определяет ширину для среднего ColumnDefinition, и он будет заполнить все доступное пространство.

<Grid.ColumnDefinitions> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition /> 
     <ColumnDefinition Width="30"/> 
    </Grid.ColumnDefinitions>