rds1983 / Myra

UI Library for MonoGame, FNA and Stride
MIT License
726 stars 94 forks source link

Borders are calculated wrong #376

Closed IceReaper closed 1 year ago

IceReaper commented 1 year ago

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: image which is a borderwidth of 1. when setting it to two, the result is: image

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

rds1983 commented 1 year ago

can you share MML code?

IceReaper commented 1 year ago
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 commented 1 year ago

I found the same problem: image

<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>