动态设置ScrollViewer的高度

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

Dynamically Setting ScrollViewer Height

问题

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

<Grid Margin="30,30,30,30">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions&gt>
                
    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <TextBlock Name="projectNumber" Text="项目编号" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="taskName" Text="任务" Width="750" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="dueDate" Text="截止日期" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="assignedBy"  Text="指派者" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
    </StackPanel>
    <Line Name="dividerLine" Stroke="DimGray" X1="0" Y1="0" X2="1130" Y2="0" Grid.Row="1"/>
    <ScrollViewer Name="scrollViewer" Grid.Row="2">
        <StackPanel>
            <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <ListView Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        </StackPanel>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal" Margin="0,10,0,10" Grid.Row="3">
        <TextBox/>
        <TextBox/>
        <TextBox/>
    </StackPanel>
</Grid>

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

<RowDefinition Height="50"/>
<RowDefinition Height="3"/>
<RowDefinition Height="*"/>
<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):

<Grid Margin="30,30,30,30">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
                
    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <TextBlock Name="projectNumber" Text="Project Number" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="taskName" Text="Task" Width="750" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="dueDate" Text="Due Date" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="assignedBy"  Text="Assigned By" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
    </StackPanel>
    <Line Name="dividerLine" Stroke="DimGray" X1="0" Y1="0" X2="1130" Y2="0" Grid.Row="1"/>
    <ScrollViewer Name="scrollViewer" Grid.Row="2">
        <StackPanel>
            <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <ListView Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        </StackPanel>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal" Margin="0,10,0,10" Grid.Row="3">
        <TextBox/>
        <TextBox/>
        <TextBox/>
    </StackPanel>
</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:

<RowDefinition Height="50"/>
<RowDefinition Height="3"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>

答案1

得分: 1

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

<ScrollViewer Name="scrollViewer" Grid.Row="2">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListView Name="tasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <ListView Grid.Row="1" Name="completeTasksPanel" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    </Grid>
</ScrollViewer>

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

由于后者(StackPanel)具有无限测量特性,因此ScrollViewersStackPanels不太适合一起使用。

英文:

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:

&lt;ScrollViewer Name=&quot;scrollViewer&quot; Grid.Row=&quot;2&quot;&gt;
    &lt;Grid&gt;
        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height=&quot;Auto&quot; /&gt;
            &lt;RowDefinition Height=&quot;*&quot; /&gt;
        &lt;/Grid.RowDefinitions&gt;
        &lt;ListView Name=&quot;tasksPanel&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Left&quot;/&gt;
        &lt;ListView Grid.Row=&quot;1&quot; Name=&quot;completeTasksPanel&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Left&quot;/&gt;
    &lt;/Grid&gt;
&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
匿名

发表评论

匿名网友

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

确定