WPF动态向Grid添加TextBlock时行位置异常、滚动失效问题

你的代码有3个核心错误导致功能异常：

• 新增第4个及以后的TextBlock前，没有给newGrid添加对应的RowDefinition。WPF中如果元素设置的Grid.Row索引超过Grid现有行的最大索引，元素会默认渲染到最后一行，直接导致多个元素叠加在第三行。
• ScrollViewer层级放置错误：当前ScrollViewer是newGrid的子元素且内部为空，所有TextBlock都直接添加到newGrid下，根本不在ScrollViewer的可视树内，滚动完全无法生效。
• 行高使用*（均分父容器高度），即使新增行，所有行也会被强制压缩在newGrid的固定可视区域内，永远不会超出区域触发滚动条。
• 结构逻辑颠倒：要实现「固定高度可视区+内容超出滚动」，需要把动态增长的Grid放在ScrollViewer的内容区域，而不是把空ScrollViewer嵌在Grid内部。

XAML部分 #

调整结构，将ScrollViewer移到外层包裹动态增长的newGrid，行高改为固定值（或Auto，根据内容自适应），保证新增行可以撑出滚动区域：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Button x:Name="btnAdd" Content="Add new textblock" Grid.Row="1" 
            Grid.Column="0" Width="130" Height="70" 
            Click="btnAdd_Click"/>

    <!-- ScrollViewer放在固定区域，作为滚动视口 -->
    <ScrollViewer Grid.Row="2" Grid.RowSpan="3" Grid.Column="1" Grid.ColumnSpan="3"
                  CanContentScroll="False"  <!-- 设为False是像素级平滑滚动，需要按项滚动可改回True -->
                  VerticalScrollBarVisibility="Auto">
        <!-- 动态增长的Grid放在ScrollViewer内部 -->
        <Grid x:Name="newGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="100" /> <!-- 行高根据你的UI需求调整，也可设为Auto自适应内容高度 -->
                <RowDefinition Height="100" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </ScrollViewer>
</Grid>

C#后端代码 #

添加TextBlock前判断行数量，不足时先新增行定义，再放置控件：

int count = 0;
// 和XAML中初始行高保持一致
private const double ItemRowHeight = 100;

private void btnAdd_Click(object sender, RoutedEventArgs e)
{
    TextBlock tb = new TextBlock();
    DateTime now = DateTime.Now;

    tb.Text = now.ToString();
    tb.HorizontalAlignment = HorizontalAlignment.Left;
    tb.VerticalAlignment = VerticalAlignment.Center;
    tb.Foreground = Brushes.White;
    tb.FontSize = 20;
    tb.Margin = new Thickness(50, 0, 0, 0);
    tb.TextWrapping = TextWrapping.Wrap;
    tb.TextAlignment = TextAlignment.Justify;

    // 要插入的行索引超过现有行总数时，新增行
    if (count >= newGrid.RowDefinitions.Count)
    {
        newGrid.RowDefinitions.Add(new RowDefinition() 
        { 
            Height = new GridLength(ItemRowHeight) 
        });
    }

    newGrid.Children.Add(tb);
    Grid.SetRow(tb, count);
    Grid.SetColumn(tb, 0);
    count++;

    // 可选：新增内容后自动滚动到底部
    if (newGrid.Parent is ScrollViewer sv)
    {
        sv.ScrollToEnd();
    }
}

• 页面初始加载时newGrid3行刚好占满可视区域，无滚动条
• 前3个TextBlock依次填充前三行，布局正常
• 添加第4个及更多TextBlock时自动新增行，内容超出可视区后自动显示垂直滚动条，下拉可查看所有内容
• 不会再出现控件叠加在第三行的问题

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