坚持内部 ContentControl 中的网格底部

Question

我有一个主视图，里面有一个辅助子视图ChildViewModel：

<Window {...}>
  <Window.Resources> {...} </Window.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"> {...} </Grid>

    <StackPanel Grid.Row="1"> {...} </StackPanel>

    <ContentControl Grid.Row="2"
                    Content="{Binding ChildViewModel}"/>

  </Grid>
</Window>

ChildViewModel 包含另一个元素网格，底部有一个由两个按钮组成的堆栈面板。我希望这两个按钮粘在整个窗口的底部。

我已经尝试过this 方法，但是由于整个内容控件位于底部（顶部有一个大的白色间隙），或者按钮位于内容控件的底部，因此它并不完全有效，但内容控件本身不在底部。

下图应该直观地解释我的意思。按钮是我想要在底部的两个小矩形。

编辑：Content Control 的代码：

  <UserControl {..}>
  <UserControl.DataContext>
    <viewModels:ChildViewModel />
  </UserControl.DataContext>

  <Grid FocusVisualStyle="{x:Null}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.Resources>
      {..}
    </Grid.Resources>

    <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}"> 
    {..}
    </ScrollViewer>

    <customViews:SwirlyThingy Grid.Row="1" {..}/>

    <TextBlock Grid.Row="2" {..}/>

    <TextBlock Grid.Row="3" {..}/>

    <TextBlock Grid.Row="4" {..}}"/>

    <!--The buttons I'd like at the bottom-->
    <StackPanel Grid.Row=5"
                VerticalAlignment="Bottom"
                Orientation="Horizontal"
                misc:MarginSetter.Margin="6">
      <Button Command="{Binding PrepareForMigrationCommand}"
              IsEnabled="{Binding CanMigrate,
                                   UpdateSourceTrigger=PropertyChanged}">
        <Button.Style>
          <Style BasedOn="{StaticResource MajorControlButton}" TargetType="Button">
            <Setter Property="Content" Value="Migrate" />
            <Style.Triggers>
              <DataTrigger Binding="{Binding PrepareForMigrationCommand.Execution.IsNotCompleted}"
                           Value="True">
                <Setter Property="Content" Value="Migrating..." />
              </DataTrigger>
            </Style.Triggers>
          </Style>
        </Button.Style>
      </Button>
      <Button Command="{Binding PrepareForMultiMigrationCommand}"
              Visibility="{Binding IsMultiMigration,
                                    UpdateSourceTrigger=PropertyChanged,
                                    Converter={StaticResource BooleanToVisibilityConverter}}">
        <Button.Style>
          <Style BasedOn="{StaticResource MajorControlButton}" TargetType="Button">
            <Setter Property="Content" Value="Run All" />
          </Style>
        </Button.Style>
      </Button>

    </StackPanel>
  </Grid>
</UserControl>

Answer 1

您想为最后一项占用所有可用空间。为了做到这一点，您需要为您的顶级网格的最后一行按星标大小。

<Grid.RowDefinitions>
  <RowDefinition Height="Auto" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="*" />    <!-- Star size this one -->
</Grid.RowDefinitions>

在您的控件中，您可以简单地拥有两行，一行用于包含在堆栈面板中的所有内容（而不是多行）。你的按钮有一排。您的按钮面板将与底部对齐。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <Rectangle Height="20" Fill="Red"/>
    </Grid>

    <StackPanel Grid.Row="1">
        <Rectangle Height="20" Fill="Orange"/>
        <Rectangle Height="20" Fill="Yellow"/>
        <Rectangle Height="20" Fill="Green"/>
    </StackPanel>

    <Grid Grid.Row="2"> <!-- simulating your custom control -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0">
            <!-- A bunch of content here
        </StackPanel>

        <StackPanel Grid.Row="1"
                    Orientation="Horizontal"
                    VerticalAlignment="Bottom">
            <Button Content="Click Me!"/>
            <Button Content="No, Me!"/>
        </StackPanel>
    </Grid>
</Grid>