wpf 使 ScrollViewer 填充动态区域

Make ScrollViewer fill dynamic area

提问by baileyswalk

In the example below I cannot get the ScrollViewer to fill the space available, The height is unknown due to the dynamic content above but is there no way it can fill the space available instead of over running?

在下面的示例中，我无法让 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>

回答by dkozl

in MainContentGriduse DockPanelinstead of StackPanelwith LastChildFill=True, something like this:

in MainContentGriduseDockPanel而不是StackPanelwith 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>

then last element of DockPanelwill adjust itself to available space

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

回答by Viv

Firstly your layout is kind of a mess. Why do you need to put a StackPanelas the only child of a Grid. For the Rows? Use RowDefinitionsand ColumnDefinitionswhen dealing with Grid

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

From my understanding of your layout, you can pretty much do everything you need with just a Gridand a DockPanel. When dealing with layout containers, Aim to get your layout with the "least" number of containers as "efficiently" possible. Even if it aint any real performance benefit, it helps enormously when going through someone else's code to not have redundant nesting

根据我对您的布局的理解，您几乎可以使用 aGrid和 a完成您需要的一切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>

This should give you everything your looking for. If you need to restrict Heightdimensions with static values, Add them in accordingly when absolutely needed.

这应该给你你正在寻找的一切。如果您需要Height使用静态值限制尺寸，请在绝对需要时相应地添加它们。

As for the "Nav" DockPanel, yes you can using HorizontalAlignmentget your Button's positioned Left and Right and thereby not use the DockPanel, but that would go against the concept of trying to keep "one" item in a Gridcell and hence the DockPanelusage.

至于 "Nav" DockPanel，是的，您可以使用HorizontalAlignmentgetButton的位置 Left 和 Right ，从而不使用DockPanel，但这会违背试图将“一个”项目保留在Grid单元格中的概念，因此DockPanel使用。

回答by user1309474

I solved it by adding another element for the Scrollviewer's Height to bind:

我通过为 Scrollviewer 的 Height 添加另一个要绑定的元素来解决它：

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