Question: ScollViewer ContentSize / Width / Height confusion

Sorry for poor title, I really don’t know how to word this. I’m trying to design a ‘Scroll Dialog’, that I can use when I have a list of items to show the user. An example of this is when I have user select a folder, my program scans folder for usable files, and then displays a dialog showing what was used. In some cases this can be a long list so using normal messagebox.query() just results in huge wall of text and you can’t see the buttons. Essentially I want this functionality, but I want it to be able to scroll if it’s bigger.

I am having a very difficult time with ScrollView, looking at the documentation and at UICatalog code/examples I’m not really sure about:

• Don’t show scroll bars if not necessary (AutoHideScrollBars = true). I am often seeing no scroll bars show up, mainly because I don’t really understand how ScrollViewer knows if it has more to scroll
• What is the different between ContentSize, Width, Height of a scroll viewer? What should the delta between W/H and ContentSize be to ensure scrollbars can be shown, if any?

This is probably really poor design (I have no idea what I’m doing here), but using a dialog class like this:

public class ScrollDialog : Dialog
{
    public ScrollDialog(string title, string topMessage, string bottommessage, View scrollableContent, params Button[] buttons) : base(title, buttons)
    {
        Height = 20; //dialog height
        Width = 50; //dialog width

        Add(new Label(topMessage)
        {
            X = 0,
            Y = 0,
            Width = Dim.Fill(),
            Height = 2
        });

        var scrollView = new ScrollView()
        {
           Y = 2,
            ContentSize = new Size(28, 10), //No idea what these actually seem to do
            ShowVerticalScrollIndicator = true,
            ShowHorizontalScrollIndicator = true,
            //AutoHideScrollBars = true,
            Width = 50,
            Height = 12, //how much actually seems to be shown in below picture
        };
        scrollView.Add(scrollableContent);


        Add(scrollView);

        Add(new Label(bottommessage)
        {
            X = 0,
            Y = Pos.Bottom(this) - 5, //This never seems to be reliable, maybe cause object isn't fully initialized yet
            Width = Dim.Fill(),
            Height = 1
        });
    }
}

and using the following call to setup the dialog

            View scrollableContent = new View()
            {
                Width = 40,
                Height = 45,
            };
            for (int i = 0; i < 45; i++)
            {
                scrollableContent.Add(new Label("I AM LINE " + i)
                {
                    X = 0,
                    Y = i,
                    Width = Dim.Fill()
                });
            }

            ScrollDialog sd = new ScrollDialog("Scroll dialog", "This is top message", "This is bottom message", scrollableContent,  new Button("OK")
            {
                Clicked = Application.RequestStop
            });
            Application.Run(sd);

yields a dialog like this:

The dialog scrolls if i hold the down or up arrow, depending on where there current scroll position is. You can also scroll to the right a pretty long ways, even though there’s nothing to see there.

I know the scrollbars work, as I have seen it in the UICatalog, where I copied this code from and began playing with. At one point I had working scrollbars, but I wanted to remove horizontal, where I then found AutoHideScrollBars, but now I don’t have any and I’ve been fooling around with scrollviewer, becoming frustrated after about an hour of working on it.

As far as I understand,

Width: Width of the ScrollViewer control Height: Height of the ScrollViewer control ContentSize: … the viewport size of the subcontrol…? Why would this not match the Width/Height (and maybe -1 for scrollbars)? I can’t think of scenario where, for example on windows UI design, I would have a scrollviewer that has scrollbars that are not directly attached to the edges of the control, which are then directly next to the content itself.

The documentation says: The subviews that are added to this ScrollView are offset by the ContentOffset property. The view itself is a window into the space represented by the ContentSize. I’m not sure how ContentSize relates to the positioning of the scrollbars. Do I need to make this smaller than the Height/Width of ScrollViewer View itself?

[Mgamerz]

Sorry, didn’t have time to test this yesterday. Pulled msater this morning and everything works, I now have a scroll dialog 😃

It even shrinks the width if it’s smaller than the max dialog width, accounting for a buffer (in this pic, 5), and uses the max size of the contentsize width, title, top and bottom messages 😃

[Mgamerz]

The viewport is working great, exactly how I expect it to now in regards to not letting me scroll out of bounds content onto the viewport. Once the scrollbars gets fixed up it’ll be fully fixed/improved 😃