Borders are calculated wrong

[IceReaper]

When using border, the border is correctly drawn inside the box. However the next element is pushed away by the border distance, resulting in a gap between widgets when using borders.

The following inner boxes do not use margin or padding:

which is a borderwidth of 1. when setting it to two, the result is:

Also there is a visible magical padding on the right bottom of the lower box. Might be related to that.

[rds1983]

can you share MML code?

[IceReaper]

namespace Prototype.Screens.MainMenu;

using Microsoft.Xna.Framework;
using Myra.Graphics2D.Brushes;
using Myra.Graphics2D.UI;

public sealed class PlayMenuWidget : VerticalStackPanel
{
	public PlayMenuWidget(Game game)
	{
		this.HorizontalAlignment = HorizontalAlignment.Stretch;
		this.VerticalAlignment = VerticalAlignment.Stretch;
		this.Padding = new(9);
		this.Background = new SolidBrush(new Color(0x10, 0x10, 0x10));
		this.Border = new SolidBrush(new Color(0x80, 0x80, 0x80));
		this.BorderThickness = new(1);

		var playersScroll = new ScrollViewer
		{
			Border = new SolidBrush(new Color(0x80, 0x80, 0x80)), BorderThickness = new(1), Margin = new(0, 0, 0, 0), Height = 130
		};

		this.AddChild(playersScroll);

		var players = new VerticalStackPanel();
		playersScroll.Content = players;

		var pressToJoin = new Label();
		players.AddChild(pressToJoin);

		var buttons = new Grid { Border = new SolidBrush(new Color(0x80, 0x80, 0x80)), BorderThickness = new(1) };
		this.AddChild(buttons);

		var back = new TextButton { Text = "Back", Width = 100, Height = 15, HorizontalAlignment = HorizontalAlignment.Left };
		back.Click += (_, _) => this.Desktop.Root = new MainMenuWidget(game);
		buttons.AddChild(back);

		var play = new TextButton { Text = "Play", Width = 100, Height = 15, HorizontalAlignment = HorizontalAlignment.Right };
		play.Click += (_, _) => this.Desktop.Root = new MainMenuWidget(game);
		buttons.AddChild(play);
	}
}

[Sydonian]

I found the same problem:

<Project>
  <Project.ExportOptions />
  <Window Title="" Left="372" Top="209">
    <HorizontalStackPanel>
      <Panel Width="20" Height="20" BorderThickness="1" Border="#ff00ff" />
      <Panel Width="20" Height="20" BorderThickness="1" Border="#ff00ff" />
      <Panel Width="20" Height="20" BorderThickness="2" Border="#ff00ff" />
      <Panel Width="20" Height="20" BorderThickness="4" Border="#ff00ff" />
      <Panel Width="20" Height="20" BorderThickness="8" Border="#ff00ff" />
      <Label Text="test" BorderThickness="8" Border="#ff00ff" />
      <Panel Width="20" Height="20" BorderThickness="8" Border="#ff00ff" />
    </HorizontalStackPanel>
  </Window>
</Project>