Notable aspects of this style are:
- Data in a single row arranged both vertically and horizontally
- Varying cell heights within a single row
- Single row selection (rather than cell selection)
- Independent cell styles
- No column headers or cell captions
Luckily the QuantumGrid is up to the challenge. Here is an example of a smart phone styled list using the QuantumGrid and Delphi XE2:
This can be accomplished using the “banded” table view in the QuantumGrid. A banded table view lets you group columns together into bands. Each band can have a variable number of vertically or horizontally stacked columns. The above example is composed of three bands and four columns: one column (with double-height) in the first band, two columns stacked vertically in the second, and a single column in the third band.
Adding and organizing bands and columns is made easy using the right-click context menu of the QuantumGrid. Starting with a simple banded table view, here is a brief video that shows how easy it is to add and layout the bands and columns necessary to achieve the above affect.
Once the banded table view has the proper bands and columns added, the following settings should be applied to the table view in the object inspector:
OptionsData.Editing = False OptionsSelection.CellSelect = False OptionsView.ColumnAutoWidth = True OptionsView.GridLines = glNone OptionsView.GroupByBox = False OptionsView.Header = False OptionsView.RowSeparatorColor = clGrayText OptionsView.RowSeparatorWidth = 1 OptionsView.BandHeaders = False
With these settings in place, all that is needed is a bit of sample data and some contact thumbnails to complete the effect. You can download the source of this sample project here.
Updated 5/10/2012: DevExpress employee Alex M had this to say on the forums:
I think that making CountColumn right aligned will add a final touch to the look and feel.
TextEditProperties.Alignment.Horz := taRightJustify;
Also, I believe using a band’s context menu introduced in DevExpress VCL Build v2011 vol 2 (try once, love it forever 🙂 ) would simplify column/band creation and arrangement shown in the video.
I’ve updated the sample and video to reflect Alex’s suggestions. Thanks Alex!