XAML:限制嵌套在 ScrollViewer 中的控件大小(滚动嵌套在 ScrollViewer 中) [英] XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)

问题描述

我正在尝试将用户控件嵌套在 ScrollViewer 中，使其高度与 ScrollViewer 的高度相同，该高度可能因屏幕尺寸(即不固定)而异.

I am trying to nest a user control within a ScrollViewer making its height the same as height of the ScrollViewer, which may vary based on screen size (i.e. not fixed).

ScrollViewer 负责水平滚动并禁用垂直滚动.嵌套的用户控件有一个包含两行的网格 - 标题"(另一个用户控件)和一个 ListView.此 ListView 应可垂直滚动.这里的目标是标题"保持原位，并且 ListView 的大量内容可以垂直滚动.否则，如果包含的 ScrollViewer 负责垂直滚动，则标题"将在 ScrollViewer 垂直滚动时超出可见区域.

The ScrollViewer is responsible for horizontal scrolling and has vertical scrolling disabled. The nested user control has a grid with two rows - "header" (another user control) and a ListView. This ListView should be vertically scrollable. The objective here is that the "header" stays in place and large content of the ListView is scrollable vertically. Otherwise, if the containing ScrollViewer is responsible for vertical scrolling, the "header" will go out of visible area on vertical scrolling of the ScrollViewer.

我的问题是:如何使嵌套用户控件的高度与 ScrollViewer 的高度相同(不固定)?如果未指定/限制嵌套用户控件的高度(等于下面代码段中的 540)，则 ListView 会占用它所需的所有空间，因此它不能垂直滚动.换句话说，我认为我需要从 中删除硬编码的高度540"，并以某种方式使其高度与其父级(ScrollViewer)相同.可能有更好的解决方案，但限制用户控件的高度似乎是实现目标的一种方式.

My question is: how can I make nested user control's height the same as the height of the ScrollViewer (which is not fixed)? If nested user control's height is not specified/constrained (equal to 540 in the snippet below), the ListView takes all the space it needs and thus it is not scrollable vertically. In other words, I think I need to remove hard-coded height "540" from the and somehow make its height the same as its parent (ScrollViewer). There might be a better solution, but constraining height of the user control seems to be one way to achieve the objective.

这是带有 ScrollViewer 的页面的相关 XAML:

Here is the relevant XAML of the page with ScrollViewer:

<Grid x:Name="MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row ="1">
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
            <userCtrl:MyUserControl Height="540"/>
        </ScrollViewer>

    </Grid>

这是用户控件的 XAML 片段

Here is XAML snippet of the user control

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

    <local:HeaderRow x:Name="headerRow"></local:HeaderRow>
    <ListView x:Name="gridBodyListView" Grid.Row="1 "/>
</Grid>

推荐答案

正如@serg_o 在评论中所指出的，解决这个问题的方法是将 ScrollViewer 的孩子的高度绑定到 <ScrollViewer 的 code>ActualHeight 通过命名 ScrollViewer 然后使用 ElementName 绑定.

As noted by @serg_o in comments, the solution to this is to bind the height of the child of the ScrollViewer to the ActualHeight of the ScrollViewer by naming the ScrollViewer and then using a binding by ElementName.

<Grid Grid.Row ="1"> 
    <ScrollViewer x:Name="scrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden"> 
        <userCtrl:MyUserControl Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"/> 
    </ScrollViewer> 
</Grid>

这篇关于XAML:限制嵌套在 ScrollViewer 中的控件大小(滚动嵌套在 ScrollViewer 中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！