WPF动态创建Label重叠问题：如何实现水平依次排列？

这问题我太熟悉了！你遇到的Label重叠问题，核心原因是Grid控件默认会把所有子元素放在第0行第0列的单元格里——不管你加多少个Label，它们都会挤在同一个位置，自然就重叠成一块了。下面给你几个实用的解决办法，按需选择：

1. 最简单的方案：改用横向StackPanel #

如果你的布局需求只是水平排列且每个Label宽度均等，直接把WordTemplateLayout从Grid换成横向StackPanel是最省事的：

首先在XAML里修改容器：

<StackPanel x:Name="WordTemplateLayout" Orientation="Horizontal" HorizontalAlignment="Stretch"/>

然后你的代码可以简化（甚至不用手动计算宽度，StackPanel会自动分配）：

private void CreateWordTemplate() 
{
    IList<char> template = CurrentGame.Template;
    double widthPerBox = WordTemplateLayout.ActualWidth / template.Count;

    WordTemplateLayout.Children.Clear(); // 先清空旧元素

    for (int i = 0; i < template.Count; i++) 
    {
        var templateVisual = new Label();
        templateVisual.Name = "c" + i;
        templateVisual.Width = widthPerBox;
        templateVisual.Height = WordTemplateLayout.ActualHeight;
        templateVisual.Background = new SolidColorBrush(Colors.Aqua);
        
        WordTemplateLayout.Children.Add(templateVisual);
    }
}

2. 保留Grid：动态添加列并指定Label所在列 #

如果你必须用Grid（比如后续要加行布局），那就要给Grid动态创建对应数量的列，然后把每个Label放到对应的列里：

修改后的完整代码：

private void CreateWordTemplate() 
{
    IList<char> template = CurrentGame.Template;
    double widthPerBox = WordTemplateLayout.ActualWidth / template.Count;

    // 先清空Grid的旧列和子元素，避免重复添加
    WordTemplateLayout.ColumnDefinitions.Clear();
    WordTemplateLayout.Children.Clear();

    // 为每个Label创建一列
    for (int i = 0; i < template.Count; i++)
    {
        WordTemplateLayout.ColumnDefinitions.Add(new ColumnDefinition 
        { 
            Width = new GridLength(widthPerBox) 
        });
    }

    // 创建并添加Label，同时指定它所在的列
    for (int i = 0; i < template.Count; i++) 
    {
        var templateVisual = new Label();
        templateVisual.Name = "c" + i;
        templateVisual.Width = widthPerBox;
        templateVisual.Height = WordTemplateLayout.ActualHeight;
        templateVisual.Background = new SolidColorBrush(Colors.Aqua);
        
        // 关键：把Label放到第i列
        Grid.SetColumn(templateVisual, i);
        
        WordTemplateLayout.Children.Add(templateVisual);
    }
}

3. 更灵活的均等布局：用UniformGrid #

如果你的需求是让所有Label自动均分容器宽度，UniformGrid是更合适的选择——它会自动帮你处理排列和尺寸分配，不用手动计算宽度：

先在XAML里替换容器：

<UniformGrid x:Name="WordTemplateLayout" Columns="0" Orientation="Horizontal"/>

然后代码里只需设置Columns数量并添加Label：

private void CreateWordTemplate() 
{
    IList<char> template = CurrentGame.Template;

    WordTemplateLayout.Children.Clear();
    WordTemplateLayout.Columns = template.Count; // 设置列数为Label数量

    for (int i = 0; i < template.Count; i++) 
    {
        var templateVisual = new Label();
        templateVisual.Name = "c" + i;
        templateVisual.Background = new SolidColorBrush(Colors.Aqua);
        
        WordTemplateLayout.Children.Add(templateVisual);
    }
}

为什么原来的代码会重叠？ #

因为你没有给Grid定义任何列或行，所有添加的Label默认都会被放在Grid的(0,0)单元格（第0行第0列），所以它们完全重叠在一起，看起来就像一个单一的水蓝色块。

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