New Splitter implementation

[h]Alternative Xojo Splitter solution[/h]

A “Splitter” represents a way of dynamically resizing two adjacent controls in a window so that one becomes larger or smaller relative to the other. The two controls don’t need to be of the same type, but they frequently are. A common example can be seen in Windows Explorer, when you want to change the ratio of the disk and directory folders in the left-hand pane (a.k.a. sub-window) relative to the files list in the right-hand pane. In this example, the two adjacent pane widths move East-West, but you can also find common examples which move adjacent panes North-South (e.g. in MS Word).

Paul Lefebvre of Xojo addresses this topic in the last ten minutes of his online video “Developing a Text Editor, part 2” (starts at around 49’:10" into the video). Thanks, Paul!

Prior to seeing Paul’s solution, I did manage to design an extremely simple yet effective alternative. The alternative shown in my “Slider Test” screenshots linked to below doesn’t comply with Microsoft’s de facto standard of being a Splitter physically located between the panes to be split, but there’s no reason why it couldn’t be placed there.

My solution is based on a vertical Slider control being used to adjust the relative panes’ Tops and Heights (or a horizontal Slider to adjust the Lefts and Widths). This solution may not be ideal for the purists, but it has the great advantages of a). of not suffering from the flicker which has been a common complaint on the forum when using more common paradigms and b). the mouse may be used on the Slider control itself, or the Up and Down keys on the keyboard may be used where precision is required, once the control has been selected by either the mouse or by tabbing through the controls. Also, IMHO, it looks, well, pretty :slight_smile:

The default slider position (Screen Shot #1 below) has its Value set to 50, with its MaximumValue set to 100 - this ensures smoother travel of the panes than if lower numbers were to be used. For even greater precision using the keys, these values can be increased further (e.g. 500 and 1,000 respectively). At the half-way setting (default), you will see that both the upper and lower panes occupy an equal amount of the right-hand-side window real-estate.

Screen Shot #2 shows the positioning of the Slider in order for the bottom pane to occupy all of the real-estate; positioning the Slider at the other end of its range would result in the top pane occupying it all instead.

Screen Shot #3 shows the positioning of the Slider at a randomly chosen position.

I’d be happy to share the relevant (and very short) source code if requested.

My thanks go to Tim Streater and Paul Sondervan for their helpful comments.

link text

The image gives a 403 and please upload the source code.

Hi Beatrix!

I have set up the three screen shots to be “Public” in Flickr, so you shouldn’t have any difficulty in accessing them as long as you are a signed-in member. A 403 error indicates an access problem, but I am able to access them myself using another ID on another computer. Does anyone else have this problem (I see that there have already been three views within a few minutes of posting)? If so, then the problem may well be at my end and I’ll investigate further.

In the meantime, if you feel able to share with me your e-Mail address, I’ll send you the screen shots and will post the relevant source code snippets here as well as sending them directly to you by or before the weekend. The best e-Mail address for you to send me yours to is:

Thanks for your interest!


403 error too, even after loging-in to my Flickr account.

Note: with imSplitter under macOS, resizing panes is very smooth. Under windows 7/10 running in a VirtualBox VM on this Mac, it’s jerky but not juddery and there’s no flickering (I have no real Windows machine to test on). But the jerky behaviour may just be that VirtualBox has a rep for being a bit slow.

Oh - I also get 403 BTW. I have no flickr account and won’t be getting one :slight_smile:

upload your screenshots to any public image service (imgur, cjoint, …)
and change the links in your first post.

403 error here too.

As the others have said, I also do NOT have a Flickr account, and don’t plan to get one.
There are plenty of other image services that don’t require the viewer to have an account.
Although I have had a Dropbox account for years (which works very well for this), I recently got an account with CloudApp. It is free, and makes sharing images, videos, screenshots, video screen captures very easy.

Please do so. Hopefully this will be a Xojo Project that demos your code/class.

Lots of people experiencing difficulties with accessing the Flickr files, so I’ve posted them on our own Website. Sorry for the hassle you’ve had and thanks for all the helpful comments.

To access the pictures, go to the following site and then press “SB Screen Shots” at the top of the left-hand column. If you are asked for a p/w, it is the same as in quote marks above - omit the quotes.

Hopefully, this will work but if not, let me know!

click here

Code to follow . . .

Got the screenshots. Too small to see. (Unless its advancing age)
Sounds exciting though.

[quote=493044:@Jeff Tullin]Got the screenshots. Too small to see. (Unless its advancing age)
Sounds exciting though.[/quote]
Essentially they show that to resize one doesn’t move the divider between two zones, but rather a separate slider which moves the divider. Not an approach I would prefer.

Hi Jeff!
I’m using a touch screen, so I can see the detail quite well. You could try downloading the shots from the site and then zoom them on your own computer using your own picture viewer. Alternatively, send an e-mail to and I’ll send you the originals and the code.

Hi Tim S.!
Yes, you’re right; however, I did discuss that in my original post.
All you’d need to do is to move the slider’s location to sit between the zones and make it horizontal by setting its Width to be greater than its Height.
As I said in the post, it’s not for purists but it has several advantages, not least of which is no judder or flicker as a canvas isn’t being used.

Hi Beatrix et al!

The following code should be viewed in conjunction with my screen shots previously posted. You can find (and optionally download) them here:

Click on “SB Screen Shots” at the top left-hand-side of the page and, if asked for a p/w, it is the same thing (omitting the quotes). Note that these are .png files; if you need a different format (for example, if you can’t resize them without blurring the images), please e-Mail request to:

Also please note that this short code does not claim to be particularly elegant and its use of Public variables is not necessarily best practice; it is merely a test to demonstrate that the concept and paradigm work - which they do without jerkiness or flicker!

Global Variables:
Public Property gInitialABWidth as Integer
Public Property gInitialABHeight as Integer
Public Property gInitialCBHeight as Integer
Public Property gInitialCBWidth as Integer
Public Property gInitialNBHeight as Integer
Public Property gInitialNBWidth as Integer
Public Property gInitialSBHeight as Integer
Public Property gInitialSBWidth as Integer

Public Property gRelativePSValue as Single

MainWindow Code:
// Set application's window size to occupy two-thirds of maximum available:
self.Width = Screen.ScreenAt(0).AvailableWidth / 3 * 2
self.Height = Screen.ScreenAt(0).AvailableHeight / 3 * 2

// Centre it:
Self.Left = (Screen.ScreenAt(0).AvailableWidth - Self.Width) / 2
Self.Top = (Screen.ScreenAt(0).AvailableHeight - Self.Height) / 2

// Position Navigator and Control boxes, taking three-quarters
// and one-quarter respectively of left-hand-side of screen:
NavigatorBox.Width = 171 'Arbitary left-right break
NavigatorBox.Height = self.Height / 4 * 3

ControlBox.Width = NavigatorBox.Width
ControlBox.Top = NavigatorBox.Height
ControlBox.Height = self.Height - NavigatorBox.Height - 5 '(Allow a 5-unit border cushion at bottom)

// Position Analyses and Sand boxes, each
// taking half of right-hand-side of screen:
AnalysesBox.Width = self.Width - NavigatorBox.Width - 8 ' (Allow an 8-unit border cushion at right)
AnalysesBox.Height = self.Height / 2

SandBox.Width = AnalysesBox.Width
SandBox.Top = AnalysesBox.Height
SandBox.Height = AnalysesBox.Height - 4 '(Allow a 4 unit cushion at bottom)

// Preserve the dimensions for use by other routines . . .
gInitialNBWidth = NavigatorBox.Width
gInitialNBHeight = NavigatorBox.Height

gInitialCBWidth = ControlBox.Width
gInitialCBHeight = ControlBox.Height

gInitialABWidth = AnalysesBox.Width
gInitialABHeight = AnalysesBox.Height

gInitialSBWidth = SandBox.Width
gInitialSBHeight = SandBox.Height

// If window is being resized, ensure Navigator and Control Boxes don't recede:
If NavigatorBox.Width < gInitialNBWidth then NavigatorBox.Width = gInitialNBWidth
If ControlBox.Width < gInitialCBWidth then ControlBox.Width = gInitialCBWidth

Slider Control (Name: PaneSplitter, Allow Live Scrolling: On)
// Convert Pane Splitter slider value to a floating point value between 0 and 1:
gRelativePSValue = PaneSplitter.Value / PaneSplitter.MaximumValue

// Adjust right-hand window space accordingly:
AnalysesBox.Height = gInitialABHeight * gRelativePSValue * 2
SandBox.Top = AnalysesBox.Height
SandBox.Height = self.Height - SandBox.Top - 5 '(Allow a 5-unit border cushion at bottom)

There are a few Xojo splitters available, open and closed source, see this thread;