WPF如何实现固定顶部Border？封装控件模拟HTML滚动头部效果

当然可以实现！WPF完全支持这种类似HTML固定头部的效果，核心思路就是把固定头部和可滚动内容拆分开布局，不让头部进入滚动容器的范围内。

具体实现方案 #

最常用也最直观的方式是用外层Grid做容器，分成两个独立区域：

• 第一行放你要固定的头部（用Border包裹TextBlock等控件）
• 第二行放ScrollViewer，里面承载需要滚动的TextBox或其他长内容

直接上可复用的XAML代码示例：

<Grid>
    <!-- 定义Grid的两行：第一行自适应头部高度，第二行占满剩余空间 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 固定在顶部的头部区域 -->
    <Border Grid.Row="0" Background="#F5F5F5" BorderBrush="#E0E0E0" BorderThickness="0 0 0 1">
        <StackPanel Orientation="Horizontal" Padding="12" Height="48">
            <TextBlock Text="固定标题1" FontSize="16" FontWeight="SemiBold" Margin="0 0 30 0"/>
            <TextBlock Text="固定标题2" FontSize="16"/>
            <!-- 这里可以添加任何你需要的头部控件，比如按钮、图标等 -->
        </StackPanel>
    </Border>

    <!-- 可滚动的内容区域 -->
    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
        <StackPanel Padding="12">
            <!-- 示例：可滚动的多行TextBox -->
            <TextBox TextWrapping="Wrap" AcceptsReturn="True" MinHeight="800" FontSize="14"/>
            <!-- 可以添加更多长内容控件，都会在这个区域内滚动 -->
        </StackPanel>
    </ScrollViewer>
</Grid>

关键注意事项 #

• 别把头部控件放在ScrollViewer内部！否则会跟着内容一起滚动，这是最容易踩的坑
• 外层Grid的第一行高度设为Auto，能保证头部刚好容纳所有控件，不浪费空间；第二行用*占满剩余屏幕高度
• 如果头部需要和内容区域做列对齐，可以给外层Grid添加ColumnDefinitions，让头部和内容区域使用相同的列布局，保证视觉一致性

这样设置后，不管你怎么滚动下方的内容区域，顶部的Border包裹的控件都会牢牢固定在屏幕顶部，完全符合你的需求～

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