How to change a label based on console size?

[RonSijm]

Hey there, I'm pretty new to this UI - so maybe this is a beginner kinda question, but I couldn't find any example in the UICatalog.UICatalogApp

My usecase: I have a header that says something like "My App" in ascii art. And I'm either spacing it out horizontally or in two sections, depending on the size of the console...

This is a helper class for my header:

public static class LayoutSizes
{
    public static int HorizontalLayoutWith => 130;
    public static int HeaderSize => HorizontalLayout ? 8 : 15;
    public static bool HorizontalLayout => Console.WindowWidth > HorizontalLayoutWith;

    public static Dim HeaderSizeDim => Dim.Function(() => HeaderSize);
}

So in my main window I'm creating the HeaderView like this:

    var header = new HeaderView
    {
        Title = "Window - 1",
        X = 0 + LayoutSizes.LayoutMargin,
        Y = 0 + LayoutSizes.LayoutMargin,
        Width = Dim.Percent(100) - LayoutSizes.LayoutMargin,
        Height = LayoutSizes.HeaderSizeDim
    };

    // Other windows

    Add(header, win2, win3);

(Most notably property being the LayoutSizes.HeaderSizeDim)

And my FrameView class itself looks like this:

public class HeaderView : FrameView, IViewFor<HeaderViewModel>
{
    public HeaderView()
    {
        Add(HeaderLabel());
    }

    object IViewFor.ViewModel
    {
        get => ViewModel;
        set => ViewModel = (HeaderViewModel)value;
    }

    public HeaderViewModel ViewModel { get; set; }
    
    private Label HeaderLabel()
    {
        var text = LayoutSizes.HorizontalLayout ? 
            "Biggggggggggggggggggggggggggggg Text" : 
            $"Virtical{Environment.NewLine}Spaced{Environment.NewLine}Label{Environment.NewLine}";

        var label = new Label(text);

        return label;
    }
}

Now the problem is that the HeaderLabel() is only rendered once based on the initial size of the console.

The HeaderView itself does work, and the border is re-rendered either big or small, but the text isn't.

How do I best go about accomplishing this?

Do I have to trigger a redraw from somewhere?
Do I have to subscribe to some redraw event?
My HeaderViewModel is a ReactiveObject - Do I add some observable property there that observables the console size..?

Edit: I'm using Version 2.0.0-pre.251 btw

Thanks

[dodexahedron]

Typically, changes that require re-calculating the layout of a view are signaled to the library by calling SetNeedsLayout() on the affected instances, and sometimes also LayoutSubviews() on the view containing them, if you aren't also explicitly setting dimensions and positioning yourself at the same time, since those operations aren't invoked constantly, like they are in WinForms, for example.

There are a ton of caveats, though, depending on what's being inherited from and what kind of position and dimensions are actually in use. If anything is absolute (inspect in the debugger to check what kind of Dim or Pos exists in all relevant properties), no amount of anything else will make it re-draw it any differently than currently set.

I have a suspicion that absolute Pos/Dim combined with not signaling the need for re-layout may be the root of your issue, at first glance of the code provided.

I'm assuming you're on a v1 Terminal.Gui release, yes?

[dodexahedron]

I'll also provide the additional significant warning that V2's public API surface is not yet stable and you're likely to see some pretty big breaking changes, especially with several of the work items that are currently outstanding.

Some of those changes may also make what you're trying to do easier, as there will be a lot more events for you to hook into.

V2 is currently solidly alpha-stage.

[BDisp]

Use the toplevel SizeChanging event for that.

[dodexahedron]

FYI, @RonSijm that event will also have at least a signature change after #3209 is finished and merged.

[RonSijm]

Ok, I simply got it to work now by creating this class:

public class HeaderLabel : Label
{
    private bool? _currentLayout;

    private const string HorizontalBanner = "";

    private const string VerticalBanner ="VerticalBanner";

    public HeaderLabel()
    {
        DrawBanner();
    }

    public override bool OnDrawFrames()
    {
        DrawBanner();
        return base.OnDrawFrames();
    }

    public void DrawBanner()
    {
        var horizonLayout = LayoutSizes.HorizontalLayout;

        if (_currentLayout == horizonLayout)
        {
            return;
        }

        _currentLayout = horizonLayout;
        Text = horizonLayout ? HorizontalBanner : VerticalBanner;
    }
}

Would this be a good approach, or would it be better to try something event driven, and trigger an update from the outside?

[RonSijm]

And thanks for the heads up about the V2 stuff. I downloaded the v2_develop branch as a reference cause it's easier to figure out how libraries, work, and the UICatalogApp seems pretty stable and functioning.

Would it be a better idea to use V1 for now instead? I assume once V2 hits beta or release candidates there'll also be some major changes to upgrade from V1 to V2. I suppose similar to upgrading from V2_alpha to V2_Release?

This is not really a "production" app anyways, more of a personal project, so I don't mind testing the alpha of V2 a bit

[dodexahedron]

Well, it's really up to you based on your goals and timelines.

V1 is only getting fixes now, and all current effort is focused on V2.

While the API surface isn't stable, I would subjectively say that basing your work off of the latest available v2_develop code is likely to be easier to deal with, even as things change, especially since there are some pretty fundamental changes bith already made and being made at lower levels that will easily render v1 code harder to migrate, especially if you've derived types.

I think your change to inheriting from Label was a wise move, too. FrameView is one place there are lots of breaking changes from v1 and more to come.

If you're actively following the project, it should typically be pretty clear what needs to change in your code and when, if you keep an eye on PR merge activity.

[dodexahedron]

Oh. As for events... You certainly could do that. I'm going to try to keep the behavior of existing events as similar as it makes sense to do so, on a case by case basis, aside from signature and name changes, but there's always a possibility that subtle differences could affect your code depending on a zillion factors.

I am pretty partial to applications using event-driven implementations to the fullest possible extent for a bunch of reasons, including philosophical, practical, and preferential reasons.

But do note that the current code may have thread safety issues around some things, so be careful on how far you take things that may happen on multiple threads or in async contexts, at least for now, since that's a bit more relevant qhen doing things via events instead of explicit method calls and such. Those issues will be shored up as we get closer to completion, as well. In particular, I'd suggest not using async event handlers at this time.

[RonSijm]

Ok, I'll keep an eye out on the changes. If I'm noticing weird stuff / bugs going on in this alpha I'll let you know I suppose - though I'm not entirely sure what would be bugs, and what's just me doing it wrong.

I'm not really using threads, I'm using a lot of Tasks though. I'm using a functional library that uses MassTransit to fire events, and an in-memory consumer catches them and dispatches them to the relevant components.

All that stuff shouldn't be happening in in a different thread though, just normal Tasks. I was planning to have them update UI components by changing the states of observable viewmodels

[tznind]

private Label HeaderLabel()
    {
        var text = LayoutSizes.HorizontalLayout ? 
            "Biggggggggggggggggggggggggggggg Text" : 
            $"Virtical{Environment.NewLine}Spaced{Environment.NewLine}Label{Environment.NewLine}";

        var label = new Label(text);

        return label;
    }

This method looks like it returns a new Label based on the current size. It might be better to simply update the Text on an existing Label instead or just add the draw code directly to your HeaderView. For example:

using Terminal.Gui;

namespace Test
{
    public class Program
    {
        static void Main()
        {
            Application.Init();
            var w = new Window() { Title = "My Window" };
            w.Add(new HeaderView
            {
                Width = Dim.Fill(),
                Height = Dim.Fill(),
            });
            Application.Run(w);
            Application.Shutdown();
            
            return;
        }

        public class HeaderView : FrameView
        {
            public override void OnDrawContent(Rect contentArea)
            {
                base.OnDrawContent(contentArea);
                
                string toAdd;
                if(contentArea.Width > 20)
                {
                    toAdd = "Biggggggggggggggggggggggggggggg Text";
                }
                else
                {
                    toAdd = $"Virtical\nSpaced\nLabel";
                }

                int y = 0;
                foreach (var l in toAdd.Split('\n'))
                {
                    Move(0, y);
                    Driver.AddStr(l);
                    y++;
                }
            }
        }
    }
}