WPF Grid 中 TextBlock 和 TextBox 叠加问题解决方法

WPF Grid 中 TextBlock 和 TextBox 叠加问题解决方法

在使用 WPF Grid 布局时，如果 TextBlock 和 TextBox 的列数设置不当，可能会导致它们叠加在一起。以下代码示例演示了如何解决这个问题：

原始代码：

// 创建Grid
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(70) });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() {});
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());

// 创建TextBlock
TextBlock textBlock = new TextBlock() { Text = '指标维护', HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center ,
    FontSize = 25,
    Foreground = Brushes.Blue
};
Grid.SetRow(textBlock, 0);
Grid.SetColumn(textBlock, 0);
Grid.SetColumnSpan(textBlock, 12);
grid.Children.Add(textBlock);


string[] strName = { '   IL', 'ISO', 'DIR' };
for (int i = 1; i <= 3; i++)
{
    for (int j = 0; j < 4; j++)
    {
        var textTitle = new TextBlock()
        {
            Margin = new Thickness(20, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            Text = strName[i - 1] + (j + 1).ToString() + '：',
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center
        } ;
        Grid.SetRow(textTitle, i);
        Grid.SetColumn(textTitle, j);
grid.Children.Add(textTitle);

        var text = new TextBox()
        {
            Margin = new Thickness(0, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            VerticalAlignment = VerticalAlignment.Center, 
            Width = 80 
        };
        Grid.SetRow(text, i);
        Grid.SetColumn(text, (j + 1));
grid.Children.Add(text);

        var textuit = new TextBlock()
        {
            Margin = new Thickness(0, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            Text = 'nm',
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center
        }; 
        Grid.SetRow(textuit, i);
        Grid.SetColumn(textuit, (j + 2));
grid.Children.Add(textuit); 
    }  
}

解决方法：

可以将 TextBlock 和 TextBox 的列数分别设置为 (j * 3) 和 (j * 3 + 1)，这样它们就不会叠在一起了。

修改后的代码：

// 创建Grid
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(70) });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() {});
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());

// 创建TextBlock
TextBlock textBlock = new TextBlock()
{
    Text = '指标维护',
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
    FontSize = 25,
    Foreground = Brushes.Blue
};
Grid.SetRow(textBlock, 0);
Grid.SetColumn(textBlock, 0);
Grid.SetColumnSpan(textBlock, 12);
grid.Children.Add(textBlock);

string[] strName = { '   IL', 'ISO', 'DIR' };
for (int i = 1; i <= 3; i++)
{
    for (int j = 0; j < 4; j++)
    {
        var textTitle = new TextBlock()
        {
            Margin = new Thickness(20, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            Text = strName[i - 1] + (j + 1).ToString() + '：',
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center
        };
        Grid.SetRow(textTitle, i);
        Grid.SetColumn(textTitle, j * 3);
grid.Children.Add(textTitle);

        var text = new TextBox()
        {
            Margin = new Thickness(0, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            VerticalAlignment = VerticalAlignment.Center,
            Width = 80
        };
        Grid.SetRow(text, i);
        Grid.SetColumn(text, j * 3 + 1);
grid.Children.Add(text);

        var textuit = new TextBlock()
        {
            Margin = new Thickness(0, 5, 0, 5),
            FontSize = 17,
            Foreground = Brushes.Blue,
            Text = 'nm',
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center
        };
        Grid.SetRow(textuit, i);
        Grid.SetColumn(textuit, j * 3 + 2);
grid.Children.Add(textuit);
    }
}

通过以上修改，TextBlock 和 TextBox 将会正确地排列在 Grid 中。