Request: Automatically resize controls based on it's text length.

This is one thing that pains me about Xojo. When creating a button, label, or anything that has a Caption property, I would like to have Xojo automatically resize that control to “fit” the text plus an extra ten or twenty pixels, like how every other IDE does. For example, add a button in an Xcode project, edit it’s text, and when your done, it automatically resizes said button to beyond the length of the text you have entered.

I have submitted a feedback request. The # is 30540.

We are working on adding Auto-Layout to Xojo which will solve this.

I am working on an app that would have the same kind of interface as SMS apps, and would show text as boxes of two different colors, according to received and sent messages. This feature would be great. Pending that, it is quite difficult to know what part of the text is shown in a Label, and what is invisible, so resizing according to text length is highly random…

For the moment, I have started to work on a multiline Label with random text containing both phrases and EndOfLIne ; dividing the text by an average line length (line wrap is not quite precise), and adding a line for every EndOfLine seems promising, in the current state of things. I also though about drawing the text, but then wrapping becomes difficult…

AWESOME!

[quote=43850:@Michel Bujardet]I am working on an app that would have the same kind of interface as SMS apps, and would show text as boxes of two different colors, according to received and sent messages. This feature would be great. Pending that, it is quite difficult to know what part of the text is shown in a Label, and what is invisible, so resizing according to text length is highly random…

For the moment, I have started to work on a multiline Label with random text containing both phrases and EndOfLIne ; dividing the text by an average line length (line wrap is not quite precise), and adding a line for every EndOfLine seems promising, in the current state of things. I also though about drawing the text, but then wrapping becomes difficult…[/quote]

Even more “ouch” then me. Cannot wait for auto-layout.

Ouch indeed.

From first experiments : if text has no EndOfLine, I can calculate the number of lines based on a average line length. I estimated that with a series of 01234567890 as fake words. It works pretty well.

The problems comes from additional lines created by EndOfLine. With text containing lines each ended by EndOfLIne (hard return), the autosize is quite off.

I should probably work on several type of text and calculate an average number of lines and text length. If text length divided by number of EndOfLine is shorter than average length, then it is hard return and do not calculate based on line length. Then I suppose calculus may still be off for some combinations of line wrap and hard return.

At any rate, as controls do nto give any indication about line wrap or cropping, one has to utterly guess…

When eventually auto-layout is here, it will be great. But I rather nit wait to release my app. So utter guess it will be :wink:

Unless somebody has a better solution ? (hope)

Sure. Set up a Graphics object, set the various Graphics.Text* properties to those of the control, and use Graphics.StringHeight(string, wrapWidth) to figure out how tall the text will be. In the case of chat bubbles, ‘wrapWidth’ would be the width of the bubble minus some border on either side.

Thought about that. Actually, seems easier to do the bubbles as graphics, then, as it requires both a color background, and text over it. Both can then take place in a canvas and become scrollable. The graphic object would have to be resized upon addition of a new bubble.

That seems like the best option. But it is a lot more involved than the simple use of a label and rounded box. I will eventually report on my experiments when I get enough time.

Thanks.

Have a peek at Joe Strouts Drag Pics if you can find it online
I think I have it posted on http://www.great-white-software.com/REALbasic_Code.html

I found it, but it contains methods that are no longer supported. In RB 2012 1.2 (I did not keep older), bringToFontOnClick is reported as not existing.

In Xojo it is Canvas.AddPicture and maskHitValue which are not existing.

Thank you anyway, I will try to understand the code.

Talking about RB and Xojo ; I grew so accustomed to Xojo IDE, I can barely use RB 2012 anymore :wink:

Can’t you do something like create a label ‘myLabel’ and use something similar to the following code:

dim picBuffer as new picture(1, 1, 24)

picBuffer.graphics.textFont = myLabel.textFont
picBuffer.graphics.textSize = myLabel.textSize

myLabel.width  = picBuffer.graphics.stringWidth(myLabel.text)
myLabel.height = picBuffer.graphics.stringHeight(myLabel.text, _ 
picBuffer.graphics.stringWidth(myLabel.text))

[quote=43868:@Michel Bujardet]Thought about that. Actually, seems easier to do the bubbles as graphics, then, as it requires both a color background, and text over it. Both can then take place in a canvas and become scrollable. The graphic object would have to be resized upon addition of a new bubble.

That seems like the best option. But it is a lot more involved than the simple use of a label and rounded box. I will eventually report on my experiments when I get enough time.

Thanks.[/quote]

Believe me - it will be a lot easier to just draw this stuff than try to use the native controls. You’ll quickly run into problems of embedding one control inside another, redraw issues, and slowness if you get too many controls on the window.

I am working on precisely that :slight_smile:

The DragPic from Norman’s site comes with RB 2012 r2 in the example folders called Canvas Draw Drag and works fine on RB (don’t know about Xojo). The one posted on Norman’s site however doesn’t.

What you need is a method such as DrawText. Download the zip from here and try it.

https://github.com/bskrtich/XojoUtilities (DrawText is in the GraphicsUtil.xml)

[quote=43966:@Jym Morton]The DragPic from Norman’s site comes with RB 2012 r2 in the example folders called Canvas Draw Drag and works fine on RB (don’t know about Xojo). The one posted on Norman’s site however doesn’t.

What you need is a method such as DrawText. Download the zip from here and try it.

https://github.com/bskrtich/XojoUtilities (DrawText is in the GraphicsUtil.xml)[/quote]

DragPic from RB2012 works fine with Xojo. Nice car. Thanks.

I have downloaded the zip :slight_smile:

Einhugur has offered a set of smart self-adjusting controls, and I’ve made a RB-only simpler version from it. I use it in Find Any File where buttons and other controls adjust themselves to the various languages it supports.

See here: http://www.tempel.org/RB/Localization#toc13

The biggest thing is resizing one control based on content isn’t THAT hard.
BUT resizing the entire UI based on content IS - that’s where auto layout comes in as its a descriptive means to do this.
You describe the layout as a set of constraints between objects & window edges etc and based on the content that description is followed.
What you don’t do is say "put this at this absolute position, put this next to it at this absolute position, etc
You say “put this control x many pixels from the edge, put this one next to it and keep it x many pixels away”
Now if the first control changes size the other can be moved etc and the window containing it resized to maintain the description you gave.
You’d need to watch Apples Autolayout videos or the one we showed at the last conference on what we are doing to get the idea but it’s really going to make laying things out much simpler

Latest experiments : drawing a string over a RoundRecShape works, but is not terribly convenient, because shape coordinates are to their center, whereas the strings are drawn relative to their upper left corner.

I have successfully worked on using a Roundrect with on top of it a multiline label. The Multiline label becomes pinned to the RoundRect. Both are set to invisible. Wen I want to Drawinto, I make them visible, set the text, DrawInto, then render them invisible again. In practice, the controls never show to the user but are nicely displayed in the graphic.

I have played with a long graphic as canvas backdrop, and bubbles scroll quite nicely.

Next step : having the controls autosize. I wrote a short text cutting routine which then produces a number of lines. This should permit a nice autosize.