Visual Forms and DPI

One of the many things that got fixed in the upcoming Fish Taco release is enhanced support for the Visual Form File format. This enables the developer to put together a UI in much less time than if you had to write all the C++ code by hand. The Form Designer of the VCF Builder is built with this in mind, though that project is still sadly behind. However, one of the features is the ability to specify values using units, with the ability to support custom units if the need arises. Currently the units supported are pixels (the default), inches, centimeters, and points (where a point is 1/72 of an inch). The conversion from unit value to pixel value takes into consideration the current screen DPI, thus allowing you to specify a layout once, and know that it will work correctly no matter the DPI settings. Future units supported will be DLU's (Windows Dialog Units), and percent.

What follows are some screenshots demonstrating the new feature.

First lets look at what happens when DPI resolution changes with dialogs created using the Resource Editor and Dialog Templates (the dialog is the Find in File dialog from Visual C++ 6). Note that in this case the items are scaled correctly. Units in the dialog editor are specified in DLUs, which takes into account not only the screen DPI, but also the font of the dialog. Note that the top form is displayed under 120 DPI and the bottom in 96 DPI.

Next, lets look at what happens with a form designed using the VFF format, when specifying values by pixels:

The top form looks OK, and was designed in 96 DPI. When displayed in 120 DPI, things get distorted, or clipped (as show in red). This is common not only to the VCF, but to development tools like Delphi, and I have seen issues with this in .Net WinForms as well.

Now lets see what happens when we specify points as our units:

Now things look much better, and scale correctly!

The above forms were designed from the following VFF file:

object TreesWindow  : VCF::Window
	top = 200
	left = 200
	height = 153.75pt //205px
	width = 307.5pt //410px
	caption = 'Find In Files'
	frameStyle = fstFixed

	object lbl1 : VCF::Label
		top = 7.5pt //10px
		left = 15pt //20px
		width = 75pt //100px
		height = LabelHeight
		caption = 'Fi&nd what:'
	end

	object edt1 : VCF::TextControl
		top = 7.5pt //10px
		left = 82.5pt //110px
		width = 90pt //120px
		height = TextHeight
	end

	object lbl2 : VCF::Label
		top = 26.25pt //35px
		left = 15pt //20px
		width = 75pt //100px
		height = LabelHeight
		caption = 'In files/file &types:'
	end

	object edt2 : VCF::TextControl
		top = 26.25pt  //35px
		left = 82.5pt //110px
		width = 90pt //120px
		height = TextHeight
	end

	object lbl3 : VCF::Label
		top = 45pt //60px
		left = 15pt //20px
		width = 75pt //100px
		height = LabelHeight
		caption = 'In f&older:'
	end

	object edt3 : VCF::TextControl
		top = 45pt //60px
		left = 82.5pt //110px
		width = 90pt //120px
		height = TextHeight
	end

	object btn1 : VCF::CommandButton
		top = 45pt //60px
		left = 176.25pt //235px
		width = 15pt //20px
		height = TextHeight
		caption='...'
	end



	object btn2 : VCF::CommandButton
		top = 7.5pt //10px
		left = 210pt //280px
		width = 75pt //100px
		height = ButtonHeight
		caption='&Find'
	end

	object btn3 : VCF::CommandButton
		top = 30pt //40px
		left = 210pt //280px
		width = 75pt //100px
		height = ButtonHeight
		caption='Cancel'
	end

	object btn4 : VCF::CommandButton
		top = 52.5pt //70px
		left = 210pt //280px
		width = 75pt //100px
		height = ButtonHeight
		caption='&Advanced >>'
	end


	object cb1 : VCF::CheckBoxControl
		top = 82.5pt //110px
		left = 15pt //20px
		width = 112.5pt //150px
		height = CheckboxHeight
		caption = 'Match &whole word only'
	end


	object cb2 : VCF::CheckBoxControl
		top = 97.5pt //130px
		left = 15pt //20px
		width = 112.5pt //150px
		height = CheckboxHeight
		caption = 'Match &case'
	end

	object cb3 : VCF::CheckBoxControl
		top = 112.5pt //150px
		left = 15pt //20px
		width = 112.5pt //150px
		height = CheckboxHeight
		caption = 'Regular &expression'
	end

	object cb4 : VCF::CheckBoxControl
		top = 82.5pt //110px
		left = 135pt //180px
		width = 112.5pt //150px
		height = CheckboxHeight
		caption = 'Look in &subfolders'
	end

	object cb2 : VCF::CheckBoxControl
		top = 97.5pt //130px
		left = 135pt //180px
		width = 112.5pt //150px
		height = CheckboxHeight
		caption = 'O&utput to pane 2'
		checked = true
	end
end