UWP中ListView不受高度限制内容溢出遮挡控件问题求助

问题场景 #

开发UWP词典应用时，采用Grid布局分为两行：第一行放置高度设为*的ListView承载词条，第二行是高度40的搜索TextBox。当前遇到的问题是：ListView不受Grid行高、Height或MaxHeight限制，内容会溢出到TextBox下方，溢出部分仅不可点击但仍可见，需要实现隐藏溢出项的效果。

原代码如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    
    <ListView Grid.Row="0" x:Name="SlovnikListView" ItemsSource="{x:Bind DictionaryEN}" IsItemClickEnabled="True" SelectionMode="None" ItemClick="SlovnikListView_ItemClick" VerticalAlignment="Top">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Slovo">
                <StackPanel Width="auto" Padding="5,10">
                    <TextBlock FontSize="13" Text="{x:Bind EnglishWord}"/>
                    <TextBlock FontSize="17" Text="{x:Bind CzechTranslation}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <TextBox Grid.Row="1" VerticalAlignment="Stretch" PlaceholderText="Search" Opacity="1" Height="Auto" TextAlignment="Start" VerticalContentAlignment="Center" />

</Grid>

截图说明：

• 当前代码运行截图：词条被搜索框遮挡
• 第一行设为300px高度的截图：词条溢出部分可见但不可点击

解决方案 #

核心问题在于VerticalAlignment="Top"让ListView不会自适应填充Grid行空间，且默认不裁剪溢出内容。只需两处修改：

1. 移除ListView的VerticalAlignment="Top"属性，让它默认拉伸填满Grid第一行的全部空间
2. 给ListView添加ClipToBounds="True"属性，强制裁剪超出自身边界的内容

修改后的代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    
    <ListView Grid.Row="0" x:Name="SlovnikListView" ItemsSource="{x:Bind DictionaryEN}" IsItemClickEnabled="True" SelectionMode="None" ItemClick="SlovnikListView_ItemClick" ClipToBounds="True">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Slovo">
                <StackPanel Width="auto" Padding="5,10">
                    <TextBlock FontSize="13" Text="{x:Bind EnglishWord}"/>
                    <TextBlock FontSize="17" Text="{x:Bind CzechTranslation}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <TextBox Grid.Row="1" VerticalAlignment="Stretch" PlaceholderText="Search" Opacity="1" Height="Auto" TextAlignment="Start" VerticalContentAlignment="Center" />

</Grid>

补充说明 #

• 移除VerticalAlignment="Top"后，ListView会自动匹配Grid行的高度，不会超出边界
• ClipToBounds="True"确保溢出的词条内容被完全裁剪，不再显示在TextBox上方

内容的提问来源于stack exchange，提问作者MetropolisCZ