Weird behavior in delphi xe CustomListBoxItem

Question

I have created a custom ListBoxItem in Delphi xe6,(Based on @MikeSutton answer in this post What control should I use to create this UI in Delphi Firemonkey)

I have 2 TNumberBox and 2 TLabels there. This is my custom list box item

TListBoxItemMatchBet = class(TListBoxItem)
private
            ....
            //some other methods and properties
    fLeftValue: integer;
    procedure setLeftValue(const Value: integer);
    procedure setLeftValueStyle();
    procedure LeftValueChange(Sender: Tobject);

protected
    procedure ApplyStyle; override;
published
    property Text: string read fText write setText;
    property LeftValue: integer read fLeftValue write setLeftValue;
    property RightValue: integer read fRightValue write setRightValue;

end;

---

procedure TListBoxItemMatchBet.setLeftValue(const Value: integer);
begin
    fLeftValue := Value;
    setLeftValueStyle();

end;

procedure TListBoxItemMatchBet.setLeftValueStyle;
var
    O: TFMXObject;
begin
    O := FindStyleResource('nmbLeft'); // StyleName of the item
    if O is TNumberBox then
    begin
        TNumberBox(O).ValueType := TNumValueType.Integer;
        TNumberBox(O).Value := fLeftValue;
        TNumberBox(O).OnChange := LeftValueChange;
    end;

end;
procedure TListBoxItemMatchBet.ApplyStyle;
begin
    inherited;
    setTextStyle();
    setLeftValueStyle();
    setRightValueStyle();
end;

procedure TListBoxItemMatchBet.LeftValueChange(Sender: Tobject);
begin
    fLeftValue := round((Sender as TNumberBox).Value);
end;

every thing is fine, unless I have many (about 20) items in my listbox and I scroll up, when I scroll down the value of numberboxes will change to other records (for example when value is 50 when I scrollback the item it's value will change to some thing else like 10 and 50 will go to other listbox item).

This behavior is on Android and Iphone simulator.

Here is some screen shot.

Setting Values (top right cols)

---

Scroll Up

---

Scroll Down

The values are gone

Answer 1

After a couple of days struggling I found the solution:

Just create desired style in stylebook and add items to ListBoxItem as this

Pay attention to instantiating from TListBoxItem

Itemx := TListBoxItem.Create(self);
Itemx.StyleLookup := 'listBoxItemNumericEditable';
Itemx.Text := 'A Title';

Here is the trick

Itemx.StylesData['nmbLeft.Value'] := 50;

Also you can even add event handler like this

  Itemx.StylesData['nmbLeft.OnChange'] := TValue.From<TNotifyEvent>(DoNumberChange);