Creating specific Custom TListBoxItem with given example and trouble with fontColor property

Question

Can someone please guide me in the right direction. I am attempting to create a Custom ListboxItem using Delphi XE4 for a iOS application. My goal output would be something along the lines of the photo above, where as I am currently stuck here (image below).

I have been successful at dynamically generating a ListBoxItem and inserting an TLabel object, however, I am unable to change the 'fontColor' property of the TLabel to a desired color. I can code

TLabel.Fontcolor := ClaBlue;

But the color reverts to black. I would ideal like it to look just like the example one I give. I am having troubles changing the font color of the inserted TLabel, and adding a gradient background to each Listbox Item. I do not know if I need to use a 'Style editor', or even how. And yes, I have looked at the sample included in Delphi/RAD Studio Here is my current coding below:

while XMLNode<>nil do begin 

HeaderText := 'Part#: ' + XMLNode.ChildNodes['PARTNUM'].Text + Chr(9) + XMLNode.ChildNodes['VENDPARTNUM'].Text;

DetailText := '$' + XMLNode.ChildNodes['MD1_SELL_PRICE'].Text + ' /' + XMLNode.ChildNodes['UM1_PRICE_NAME'].Text + sLineBreak + 'Min: ' + XMLNode.ChildNodes['md2_from.MD2_MIN_QTY'].text + Chr(9) + 'On Hand: ' + XMLNode.ChildNodes['md2_from.MD2_ON_HAND_QTY'].text + Chr(9) + Label1.text ;
Form6.ListBox1.Items.Add(DetailText); 
ListBoxItem:=Form6.ListBox1.ListItems[Form6.ListBox1.Items.Count-1]; 
ListBoxItem.StyleLookup:='listboxitembottomdetail';
ListBoxItem.WordWrap:=True; 
ListBoxItem.Font.Size:= 8;
ListBoxItem.Height := 120; 
TestLabel := TLabel.Create(self); 
TestLabel.Text := HeaderText; 
TestLabel.font.size := 20; 
testLabel.FontColor := claBlue; 
TestLabel.Width := form6.ListBox1.ClientWidth;
i := i +1; 
XMLNode := XMLNode.NextSibling;
end; 
Form6.ListBox1.EndUpdate;
Form6.Show;

Answer 1

You have to use the Style Book, use the CustomListBox sample that ships with delphi to learn how to properly use Styles in Firemonkey.

It also wouldn't hurt to read through some of the official Firemonkey style guides for introduction
such as Customizing FireMonkey Applications with Styles.

It looks more complicated then it is, in short to produce the result you want to :

1. Access the Style designer of the component
2. Via structure window edit/add/delete and modify controls, in your case it will be a combination of TText Controls organized in Tlayouts.
3. Once you've saved your modifications, you can change the color of a specific TText control at runtime: Item.StylesData['TestLabel.Color'] := TAlphaColors.Red; ( where Item is a TListboxitem )

What you are trying to achieve is not hard, learn handling the Style Designer via practice, pure trial and error, it's not as complicated as it looks.