让 ScrollViewer 填充动态区域

Question

在下面的示例中，我无法让 ScrollViewer 填充可用空间，由于上面的动态内容，高度未知，但它是否无法填充可用空间而不是过度运行？

   <Grid x:Name="Main" Height="200" MaxHeight="200">
      <StackPanel>
         <Grid x:Name="MainContent" Height="170" MaxHeight="170">
            <StackPanel>
               <TextBlock FontSize="24" Text="Dynamic data "/>
               <TextBlock FontSize="24" Text="height "/>
               <TextBlock FontSize="24" Text="unknown... "/>
               <Grid x:Name="Results" Background="Red">
                  <ScrollViewer>
                     <StackPanel>
                        <TextBlock FontSize="24" Text="Result set... 0"/>
                        <TextBlock FontSize="24" Text="Result set... 1"/>
                        <TextBlock FontSize="24" Text="Result set... 2"/>
                        <TextBlock FontSize="24" Text="Result set... 3"/>
                     </StackPanel>
                  </ScrollViewer>
               </Grid>
            </StackPanel>
         </Grid>
         <Grid x:Name="Nav">
            <Button HorizontalAlignment="Left" Content="Back"/>
            <Button HorizontalAlignment="Right" Content="Forward"/>
         </Grid>
      </StackPanel>
   </Grid>

Answer 1

在MainContent Grid 中使用DockPanel 而不是StackPanel 和LastChildFill=True，类似这样：

<Grid x:Name="MainContent" Height="170" MaxHeight="170">
    <DockPanel LastChildFill="True">
        <TextBlock DockPanel.Dock="Top" FontSize="24" Text="Dynamic data "/>
        <TextBlock DockPanel.Dock="Top" FontSize="24" Text="height "/>
        <TextBlock DockPanel.Dock="Top" FontSize="24" Text="unknown... "/>
        <Grid x:Name="Results" Background="Red">
            <ScrollViewer>
                <StackPanel>
                    <TextBlock FontSize="24" Text="Result set... 0"/>
                    <TextBlock FontSize="24" Text="Result set... 1"/>
                    <TextBlock FontSize="24" Text="Result set... 2"/>
                    <TextBlock FontSize="24" Text="Result set... 3"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>               
    </DockPanel>
</Grid>

那么DockPanel 的最后一个元素会自行调整到可用空间

Answer 2

我通过添加另一个元素来绑定 Scrollviewer 的高度来解决它：

<grid Grid.row="3" x:Name="Mirror">
</grid>
<ScrollViewer Grid.row="3" Height="{Binding ElementName=uxMirror,XPath=ActualHeight}">
</ScrollViewer>

Answer 3

首先，您的布局有点乱。为什么需要将StackPanel 作为Grid 的唯一孩子。对于行？处理Grid时使用RowDefinitions和ColumnDefinitions

根据我对您的布局的理解，您几乎可以使用Grid 和DockPanel 完成所需的一切。在处理布局容器时，旨在尽可能“高效”地使用“最少”数量的容器来获得布局。即使它没有任何真正的性能优势，它在通过别人的代码避免冗余嵌套时也有很大帮助

<Grid x:Name="Main">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <TextBlock Grid.Row="0"
              FontSize="24"
              Text="Dynamic data " />
  <TextBlock Grid.Row="1"
              FontSize="24"
              Text="height " />
  <TextBlock Grid.Row="2"
              FontSize="24"
              Text="unknown... " />
  <ScrollViewer Grid.Row="3"
                Background="Red">
    <StackPanel>
      <TextBlock FontSize="24"
                  Text="Result set... 0" />
      <TextBlock FontSize="24"
                  Text="Result set... 1" />
      <TextBlock FontSize="24"
                  Text="Result set... 2" />
      <TextBlock FontSize="24"
                  Text="Result set... 3" />
    </StackPanel>
  </ScrollViewer>
  <DockPanel x:Name="Nav"
              Grid.Row="4"
              LastChildFill="False">
    <Button Content="Back"
            DockPanel.Dock="Left" />
    <Button Content="Forward"
            DockPanel.Dock="Right" />
  </DockPanel>
</Grid>

这应该可以满足您的所有需求。如果您需要使用静态值限制 Height 维度，请在绝对需要时相应地添加它们。

至于“导航”DockPanel，是的，您可以使用 HorizontalAlignment 将您的 Button 定位在左右，从而不使用 DockPanel，但这会违背尝试将“一个”项目保留在 Grid 单元格中，因此使用 DockPanel。