在 C# 中，在 TableLayoutPanel 中的 Panel 中将 Panel 居中

Question

所以基本上我有一个游戏板，由 TableLayoutPanel 表示。 TableLayoutPanel 的每个单元格代表板上的一个空间并包含一个面板。每个面板中都有一个标签，用于显示该空间中当前的内容（例如角色或建筑物），其背景色表示该空间的地形类型（例如土地、水等）。当玩家试图移动一个角色时，该角色可以移动的每个可能的空间都将被“突出显示”。然后玩家将双击突出显示的空间之一以将角色移动到那里。

为了突出显示空间，我在现有面板（其中已经有标签的面板）中添加了一个面板。

回顾一下，TableLayoutPanel --> 面板 --> 标签，面板。

我遇到的主要问题是我无法让“突出显示面板”在其父面板中居中；它总是左上角居中。我希望能够看到父面板的部分背景色，以便让玩家更容易决定去哪里。因此，将 Dock 设置为 Fill 不是一个选项。 highlight-Panel 比父 Panel 略小，从而允许父 Panel 的 BackColor 的边缘可见。 是的，Anchor 设置为无。

第二个问题是我无法更改任何标签的文本颜色。我尝试在初始化时或更直接地使用“tableLayoutPanel.GetControlFromPosition(16, 4).Controls[0].ForeColor = Color.White;”在特定位置更改它但似乎没有任何效果。

说实话，我对超级复杂的 hack 修复不感兴趣。但如果有一些简单的东西或我错过的东西，我真的很感激一些意见。谢谢。

这是创建 TableLayoutPanel、其中的面板以及每个面板中的标签的代码：

// Create TableLayoutPanel to hold Panels
tableLayoutPanel = new TableLayoutPanel()
{
    RowCount = 1,
    ColumnCount = 1,
    AutoSize = true,
    AutoSizeMode = AutoSizeMode.GrowAndShrink,
    Location = new Point(12, 12),
    Dock = DockStyle.Fill,
    AutoScroll = true,  
};

// Add tableLayoutPanel to the form
this.Controls.Add(tableLayoutPanel);

// Reset and add rows/columns + styles
tableLayoutPanel.RowStyles.Clear();
tableLayoutPanel.ColumnStyles.Clear();

for (int i = 0; i < rows; i++)
{
    tableLayoutPanel.RowCount++;
    tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, 50F));
}
tableLayoutPanel.RowCount--;

for (int j = 0; j < cols; j++)
{
    tableLayoutPanel.ColumnCount++;
    tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
}
tableLayoutPanel.ColumnCount--;

// Add Panels to TableLayoutPanel
for (int i = 0; i < rows; i++)
{
    for (int j = 0; j < cols; j++)
    {
        // Create new Panel
        Panel space = new Panel()
        {
            BackColor = SystemColors.ActiveCaption,
            BorderStyle = BorderStyle.FixedSingle,
            Margin = new Padding(0),
            Size = new Size(45, 45)
        };

        space.MouseClick += new MouseEventHandler(clickOnSpace);

        // Create new Label
        Label info = new Label()
        {
            Size = new Size(93, 93),
            Text = "Info",
            Dock = DockStyle.Fill,
            TextAlign = ContentAlignment.MiddleCenter,
            Enabled = false,
            Font = new Font("Microsoft Sans Serif", 6),
            ForeColor = Color.White
        };

        // Add Label to Panel
        space.Controls.Add(info);

        // Add Panel to TableLayoutPanel
        tableLayoutPanel.Controls.Add(space, j, i);
    }
}

以及创建高亮面板的代码：

// Highlight potential positions using possibleMoves
private void Highlight(List<Tuple<int, int>> possibleMoves, int remaining)
{
    int r = 0;
    int c = 0;

    foreach (Tuple<int, int> pair in possibleMoves)
    {
        r = pair.Item1;
        c = pair.Item2;

        // If highlight-Panel doesn't already exist
        if (tableLayoutPanel.GetControlFromPosition(c, r).Controls.Count == 1)
        {
            // Create a Panel to highlight the space
            Panel highlight = new Panel()
            {
                Name = "highlight",
                Size = new Size(30, 30),
                BackColor = Color.Yellow,
                Anchor = AnchorStyles.None
            };

            highlight.MouseDoubleClick += new MouseEventHandler(doubleClickOnSpace);

            // Add highlight Panel to space Panel
            tableLayoutPanel.GetControlFromPosition(c, r).Controls.Add(highlight);
           // Bring highlight Panel to front
            tableLayoutPanel.GetControlFromPosition(c, r).Controls[1].BringToFront();
        }
    }
}

Answer 1

...因此，将 Dock 设置为 Fill 不是一种选择。

事实上，我相信将Dock 设置为Fill 确实是一个不错的选择！

看看这张图片。这是一个TableLayoutPanel，有 2 列和 2 行。每个单元格包含一个Pannel，其中包含一个Panel，其中包含一个Label。尽管您期望所有控件的Dock 属性已设置为Fill！

我告诉你第一个单元格的设置，你可以在其中看到Red、Black 和White 颜色。

单元格包含：

• 红色区域，Panel 有：

  ○ BackColor 属性设置为Red
  ○ Margin 属性设置为全部 0
  ○ Padding 属性设置为全部 5
  ○ Dock 属性设置为Fill

• 黑色区域，Panel 有：

  ○ BackColor 属性设置为Black
  ○ Margin 属性设置为全部 0
  ○ Padding 属性设置为全部 5
  ○ Dock 属性设置为Fill

• 白标，Label 具有：

  ○ BackColor 属性设置为White
  ○ Margin 属性设置为全部 0
  ○ Padding 属性设置为全部 0
  ○ Dock 属性设置为Fill

其他单元格的结构完全一样，只是Label的BackColor和它的父级（和黑色的一样），改为Transparent，所以你看到最内层@987654366的BackColor @（像红色的）。

注意

答案完全基于将Dock 属性设置为Fill 并为停靠控件设置合适的Padding 值。但是还有另一个优雅的解决方案可以自动将控件保持在容器的中心，它基于使用具有 1 行和 1 列而不是面板的TableLayoutPanel，然后将子级的Anchor 属性设置为None。这样，孩子将在TableLayoutPanel 中水平和垂直居中。你会发现这篇关于它的帖子很有用：

• How to center a Label inside a Panel without setting Dock to Fill

Answer 2

所以我实际上找到了一个不太复杂的方法。我没有在面板中使用面板，而是选择保留我的原始面板，并创建一个自定义标签，该标签具有可以更改厚度和颜色的外边框。这样我就不必跟踪太多控件，CustomLabel 会显示所有需要的东西。

CustomLabel 的代码：

public class CustomLabel : Label
{
// Constructors

    // Default Constructor
    public CustomLabel() : base() { }

    public CustomLabel(bool drawBorder, int borderThickness, Color borderColor, Color textColor) : base()
    {
        if (drawBorder)
        {
            BorderThickness = borderThickness;
            BorderColor = borderColor;
        }

        Size = new Size(36, 36);
        Text = "Info";
        Anchor = (AnchorStyles.Left | AnchorStyles.Right);
        AutoSize = false;
        TextAlign = ContentAlignment.MiddleCenter;
        Enabled = false;
        Font = new Font("Microsoft Sans Serif", 6);
        ForeColor = TextColor;
        BorderStyle = BorderStyle.FixedSingle;
        Dock = DockStyle.Fill;

    }

    // Creates a border of specified thickness and color
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        if (BorderStyle == BorderStyle.FixedSingle)
        {
            int halfThickness = BorderThickness / 2;
            using (Pen p = new Pen(BorderColor, BorderThickness))
            {
                e.Graphics.DrawRectangle(p, new Rectangle(halfThickness,
                     halfThickness,
                     ClientSize.Width - BorderThickness, ClientSize.Height - BorderThickness));
            }
        }
    }

    public int BorderThickness { get; set; }
    public Color BorderColor { get; set; }
}

将 CustomLabel 添加到面板的代码：

// Add Panels to TableLayoutPanel
for (int i = 0; i < rows; i++)
{
    for (int j = 0; j < cols; j++)
    {
        // Create new Panel
        Panel space = new Panel()
        {
            Size = new Size(45, 45),
            Dock = DockStyle.Fill,
            Margin = new Padding(0),
            ForeColor = Color.Red
        };

        space.MouseClick += new MouseEventHandler(MouseDownOnSpace);

        CustomLabel info = new CustomLabel(false, 0, Color.Empty, Color.Red);  // Create new CustomLabel
        space.Controls.Add(info);   // Add CustomLabel to Panel
        tlp.Controls.Add(space, j, i);      // Add Panel to TableLayoutPanel
    }
}

自定义标签调整代码：

((CustomLabel)tlp.GetControlFromPosition(col, row).Controls[0]).BorderThickness = 6;

((CustomLabel)tlp.GetControlFromPosition(col, row).Controls[0]).BorderColor = Color.Yellow;

tlp.GetControlFromPosition(col, row).Controls[0].Text = tlp.GetControlFromPosition(col, row).Controls[0].Text;  // Transfer space information

tlp.GetControlFromPosition(col, row).Refresh();     // Refresh Panel to show changes

这是最终结果： （如您所见，前景色仍然没有改变。）