动态设置ScrollViewer的高度

huangapple
go评论108阅读模式
英文:

Dynamically Setting ScrollViewer Height

问题

我目前正在开发一个WinUI 3应用程序，并尝试在一个ScrollViewer上方和下方都有一个StackPanel，这两个StackPanel应该始终可见（不受屏幕大小或ScrollViewer中的元素影响）：

  1. <Grid Margin="30,30,30,30">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="Auto"/>
  5.         <RowDefinition Height="*"/>
  6.         <RowDefinition Height="Auto"/>
  7.     </Grid.RowDefinitions&gt>
  8.                 
  9.     <StackPanel Orientation="Horizontal" Grid.Row="0">
  10.         <TextBlock Name="projectNumber" Text="项目编号" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  11.         <TextBlock Name="taskName" Text="任务" Width="750" Margin="10,10,10,10" TextAlignment="Center"/>
  12.         <TextBlock Name="dueDate" Text="截止日期" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  13.         <TextBlock Name="assignedBy"  Text="指派者" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  14.     </StackPanel>
  15.     <Line Name="dividerLine" Stroke="DimGray" X1="0" Y1="0" X2="1130" Y2="0" Grid.Row="1"/>
  16.     <ScrollViewer Name="scrollViewer" Grid.Row="2">
  17.         <StackPanel>
  18.             <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  19.             <ListView Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  20.         </StackPanel>
  21.     </ScrollViewer>
  22.     <StackPanel Orientation="Horizontal" Margin="0,10,0,10" Grid.Row="3">
  23.         <TextBox/>
  24.         <TextBox/>
  25.         <TextBox/>
  26.     </StackPanel>
  27. </Grid>

然而，ScrollViewer元素的高度似乎不会根据屏幕大小而设置，而是会占用与其中元素相等的空间。我还尝试了将Grid.RowDefinitions的高度设置为固定值而不是"Auto"，但没有任何变化：

  1. <RowDefinition Height="50"/>
  2. <RowDefinition Height="3"/>
  3. <RowDefinition Height="*"/>
  4. <RowDefinition Height="50"/>
英文:

I'm currently working on a WinUI 3 app, and I'm trying to have a StackPanel above and below a ScrollViewer which will always be visible (not depending on the size of the screen or the elements in the ScrollViewer):

  1. <Grid Margin="30,30,30,30">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="Auto"/>
  5.         <RowDefinition Height="*"/>
  6.         <RowDefinition Height="Auto"/>
  7.     </Grid.RowDefinitions>
  8.                 
  9.     <StackPanel Orientation="Horizontal" Grid.Row="0">
  10.         <TextBlock Name="projectNumber" Text="Project Number" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  11.         <TextBlock Name="taskName" Text="Task" Width="750" Margin="10,10,10,10" TextAlignment="Center"/>
  12.         <TextBlock Name="dueDate" Text="Due Date" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  13.         <TextBlock Name="assignedBy"  Text="Assigned By" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
  14.     </StackPanel>
  15.     <Line Name="dividerLine" Stroke="DimGray" X1="0" Y1="0" X2="1130" Y2="0" Grid.Row="1"/>
  16.     <ScrollViewer Name="scrollViewer" Grid.Row="2">
  17.         <StackPanel>
  18.             <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  19.             <ListView Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  20.         </StackPanel>
  21.     </ScrollViewer>
  22.     <StackPanel Orientation="Horizontal" Margin="0,10,0,10" Grid.Row="3">
  23.         <TextBox/>
  24.         <TextBox/>
  25.         <TextBox/>
  26.     </StackPanel>
  27. </Grid>

However, the ScrollViewer element won't have its height set according to the screen, instead, it will take up as much space as the elements inside. I also tried setting the Grid.RowDefinitions with a set height instead of Auto, but it made no difference:

  1. <RowDefinition Height="50"/>
  2. <RowDefinition Height="3"/>
  3. <RowDefinition Height="*"/>
  4. <RowDefinition Height="50"/>

答案1

得分: 1

你应该将ScrollViewer中的StackPanel替换为另一个不会使用无限垂直空间来测量其子元素的Panel，例如一个Grid：

  1. <ScrollViewer Name="scrollViewer" Grid.Row="2">
  2.     <Grid>
  3.         <Grid.RowDefinitions>
  4.             <RowDefinition Height="Auto" />
  5.             <RowDefinition Height="*" />
  6.         </Grid.RowDefinitions>
  7.         <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  8.         <ListView Grid.Row="1" Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  9.     </Grid>
  10. </ScrollViewer>

另一种选择是为StackPanel指定固定的高度。

由于后者（StackPanel）具有无限测量特性，因此ScrollViewers和StackPanels不太适合一起使用。

英文:

You should replace the StackPanel in the ScrollViewer with another Panel that doesn't measure its child elements with infinite vertical space, such as for example a Grid:

  1. &lt;ScrollViewer Name=&quot;scrollViewer&quot; Grid.Row=&quot;2&quot;&gt;
  2.     &lt;Grid&gt;
  3.         &lt;Grid.RowDefinitions&gt;
  4.             &lt;RowDefinition Height=&quot;Auto&quot; /&gt;
  5.             &lt;RowDefinition Height=&quot;*&quot; /&gt;
  6.         &lt;/Grid.RowDefinitions&gt;
  7.         &lt;ListView Name=&quot;tasksPanel&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Left&quot;/&gt;
  8.         &lt;ListView Grid.Row=&quot;1&quot; Name=&quot;completeTasksPanel&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Left&quot;/&gt;
  9.     &lt;/Grid&gt;
  10. &lt;/ScrollViewer&gt;

The other option is to specify a fixed height for the StackPanel.

ScrollViewers and StackPanels don't work very well together because of the (infinite measurement) characteristics of the latter.

huangapple
  • 本文由 发表于 2023年7月12日 21:46:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76671283.html
  • c#
  • grid-layout
  • uwp-scrollviewer
  • winui-3
  • xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定