You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为ListBox设置固定在顶部且不可点击的表头?

实现ListBox表头固定顶部且不可点击的方案

当然可以搞定这个需求!而且有几种简单易维护的方案,我给你拆解一下:

方案一:拆分UI结构(最推荐)

最简单的思路是不要把表头作为ListBox的项,而是把表头和ListBox放在同一个容器里(比如Grid),让表头固定在ListBox上方。这样表头天然不会随ListBox滚动,也不会被误点击,逻辑最清晰。

示例XAML代码:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 标题行高度自适应内容 -->
        <RowDefinition Height="Auto"/> <!-- 水平线高度自适应 -->
        <RowDefinition Height="*"/>    <!-- ListBox占满剩余空间 -->
    </Grid.RowDefinitions>

    <!-- 标题文本 -->
    <TextBlock Grid.Row="0" 
               Text="你的标题内容" 
               FontSize="16" 
               FontWeight="Bold" 
               Margin="8"/>

    <!-- 分隔水平线 -->
    <Separator Grid.Row="1" 
               Margin="8" 
               Height="1" 
               Background="#CCCCCC"/>

    <!-- 数据列表 -->
    <ListBox Grid.Row="2" 
             ItemsSource="{Binding YourDataCollection}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <!-- 这里放你的列表项内容,比如绑定数据的文本 -->
                <TextBlock Text="{Binding ItemContent}" Margin="8"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

方案二:利用ListBox的Header属性

如果希望表头和ListBox是一个整体(比如共享边框),可以直接用ListBox自带的Header属性来定义表头内容。Header会固定在ListBox顶部,不属于可点击的列表项,完美符合你的需求。

示例XAML代码:

<ListBox ItemsSource="{Binding YourDataCollection}">
    <!-- 自定义Header作为表头 -->
    <ListBox.Header>
        <StackPanel>
            <TextBlock Text="你的标题内容" 
                       FontSize="16" 
                       FontWeight="Bold" 
                       Margin="8"/>
            <Separator Margin="8" 
                       Height="1" 
                       Background="#CCCCCC"/>
        </StackPanel>
    </ListBox.Header>

    <!-- 列表项模板 -->
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemContent}" Margin="8"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

避坑提醒

如果你之前是把标题和水平线作为ListBox的前两项,记得把它们从数据集合中移除,不然会和新的表头重复,还可能导致逻辑混乱。

这两种方案都不需要复杂的后台代码,纯XAML就能实现,维护起来也方便,选哪种看你具体的布局需求就行~

内容的提问来源于stack exchange,提问作者unesic

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.29 07:10:22