While I am trying to make a custom listbox like the sample provided by embarcadero its looks fine but for mobile applications i need to make a custom listbox item but as I right click on any controls on my form I don't get the option to edit custom style. i need my mobile app to make some customized listbox item to show 2 images and 2 texts in a each items. any advice?
3 Answers
You can't use "Edit custom/default style" in FM mobile application.
I found by-pass, you can load any VCL style into Bitmap Style Designer and save it as FireMonkey style. I did like that few times, have some strange behaviors in some controls.. but if you need just 2 or 3 control types in your app you can try probably with success.
In VCL style you can add 2 TText and 2 TImage components inside another control.
For default in Android App you can use only light and dark default style, but I transform to Android Style also included in IDE blue and green Metropolis Styles and looks like working OK.
Drop Controls into the Listbox Items however you want, like you would with any other control. For a quick example, you can do something like:
ListBox.items.add(''); // blank Text which normally acts as title
BoxItem := ListBox.ListItems[ListBox.Items.Count-1];
NewTitle := TText.create(nil);
NewTitle.Text := 'New Orange Title';
newTitle.color := TAlphaColors.Orange;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.Client;
The answer of Jordan Web works very good. I took the liberty to extend his example:
Drop Controls into the Listbox Items however you want, like you would with any other control. For a quick example, you can do something like:
ListBox.items.add(''); // blank Text which normally acts as title
BoxItem := ListBox.ListItems[ListBox.Items.Count-1];
NewTitle := TText.create(nil);
NewTitle.Text := 'New Orange Title';
newTitle.color := TAlphaColors.Orange;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.Client;
to:
Example with one image and two text-objects
procedure TForm10.Button1Click(Sender: TObject);
var newtitle : Ttext;
boxitem : tlistboxitem;
newimage : timage;
tw : single;
begin
ListBox1.items.add('');
BoxItem := ListBox1.ListItems[ListBox1.Items.Count-1];
newimage := timage.create(nil);
newimage.width := 24;
newimage.height := 24;
newimage.bitmap := Image1.Bitmap;
Newimage.Align := TAlignLayout.Left;
newimage.parent := BoxItem;
Newimage.HitTest := false; // otherwise you can't select the listitem
tw := (ListBox1.Width - newimage.Width)/2;
NewTitle := TText.create(nil);
newtitle.TextSettings.Font.Style := [TFontStyle.fsBold];
NewTitle.Width := tw; //Set width to avoid partial text
Newtitle.Margins.Left := 5;
NewTitle.Text := 'New Orange Title ' + ListBox1.Items.Count.ToString ;
NewTitle.TextSettings.HorzAlign := TTextAlign.Leading;
newTitle.color := TAlphaColors.Orange;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.Left;
NewTitle.HitTest := false; //otherwise you can't select the listitem
boxitem.TagString := NewTitle.Text; //the required string when clicking the listitem
NewTitle := TText.create(nil);
NewTitle.Width := tw;
NewTitle.Text := 'New Green SubTitle ' + ListBox1.Items.Count.ToString;
NewTitle.TextSettings.HorzAlign := TTextAlign.Leading;
newTitle.color := TAlphaColors.Green;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.right;
NewTitle.HitTest := false;
end;
procedure TForm10.ListBox1Change(Sender: TObject);
begin
label1.Text := listbox1.Selected.TagString;
end;