Scalable Pictures with unscaled borders

This may be a bit special, but after fiddling around with the design features of Xojo, I missed the possibility of creating own frames as background for buttons and background frames instead of the pure design rectangles. I wanted to give my window a bit of a 3D look by adding shadows and borders (yes I know, this is not flat design), but the problem is that the latter design elements will get scaled as well when the window is resized. Ugly!

I therefore created a small app that takes a frame image and calculates the borders of it by looking for matching lines in the picture. Besides the borders around, it scans upper and lower boundary for the existence of something like a menu row – meaning non-matching rows beyond a similar center background.

Implemented is a class ScalableFrame to import into own projects. It takes either a folderitem or the name of a saved ScalableFrame file which is treated as a memory block (methods open file or openinternalfile) to set up the picture matrix for a Scalable Frame. It is invoked by the method “ScaledFrame” which takes width and height and returns the frame as a complete picture.

This is all very rough and probably not an example of the greatest programming techniques (especially as exceptions are not handled and the structure of the app could be clearer), so feel free to expand it (is it is usable to you anyway) but please keep me informed (and maybe send me your additions). Like usual, the routine is delivered AS IS, so use at your own risk. And feel free to teach me on better programming practice if you feel like it.

Here’s the dropbox link to it, including a few sample images:

The screenshot doesn’t seem to work:

Maybe a crazy idea, but why don’t you put your images (buttons) in a canvas and add code to each canvas to react like a PushButton ?

You mean to have one big scalable object with pushbutton-like reacting images inside? Could be done, but I find it easier to design window elements with each selectable item as a single Xojo design element, like putting pushbuttons in front of a scalable background canvas. The parameter list of a complex interactive scalable frame would be hell.

I find it rather tempting to put scalable frames into scalable frames or add more slices like a center image (unscaled) inside a scalable frame. But I became half cross-eyed trying to keep an overlook on all the picture positions (in fact, I’m still not sure everything is right), so this is maybe something for the future.

I really wished Xojo’s editor would give me the opportunity of inserting a programming line with all potential parameters included. In this case, like inputting graphics.drawpicture would extend the line by all the xs, ys, widths and heights that can be entered. Way too often I found myself inputting a wrong number of parameters, having lost overview while trying to compute the correct positions and sizes.

No. Use as many Canvas as button you want.

I am usure of what you mean in “scalable frame”.

Are you positionning buttons withing a grid whose margins vary depending on the window size ?

If you already have something (with buttons), add a window shot (screen shot) so people can understand / are sure to understand your concern (what you want to do). Or two windows if one is not enough meaningful.