Introducing the ListView Item Designer in RAD Studio 10.1 Berlin

Posted by on in UI

In RAD Studio 10.1 Berlin, we provide a new ListView Item Designer for FireMonkey applications that you can use to easily design custom ListView layouts. During today's launch webinar, I showed the new TListView Item Designer in action. TListView provides a fast, scrollable list for your multi-device applications. With TListView, you have access to a number of predefined appearance modes. Those appearance modes expose objects that you can then customize and connect to your data source. The Item Designer makes it easy to add additional objects to create custom TListView layouts.

Step 1: Add TListView and TPrototypeBindSource onto your form

Go to File > New > Multi-Device Application. From the Tool Palette, drag and drop TListView onto your form and resize the control. For this demo, I am going to connect the list to some sample data. Drag and drop TPrototypeBindSource onto your form, then right-click on TPrototypeBindSource to select multiple types of sample data.

 

Step 2: Select Dynamic Appearance

With TListView selected, navigate to the Structure pane. Select ListView -> Item Appearance. From the ItemAppearance drop-down menu, select 'DynamicAppearance'.

 

Step 3: Adding your own ListView Objects

With TListView selected in the Structure pane, browse to the Item property. In the Object Inspector, you will now see a '+ Add New'  option under 'Objects'. Select the objects you want to add.

 

4. Customize your layout

Right-click on TListView on your form to 'Toggle DesignMode'. This brings up the visual designer, allowing you to rearrange elements as you like. You can also change the font type, font color and other properties. As you can see in the screenshot, the new objects can be bound into your data source using the LiveBindings Designer.

 




About
Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio

Comments

  • Adrian Zussino
    Adrian Zussino Tuesday, 26 September 2017

    Hi Sarina.
    I'm develping my first app for android, in it I have a bindingsourse and a bindignslist with a TListView and now I want to get de the selectedvalue when the user click it.
    Thanks and pleas be patient with my English!!!

  • Joe Falchetto
    Joe Falchetto Monday, 6 March 2017

    Hi Sarina,
    where can I find C++ samples that describes how write and read the DynamicAppearance items programatically? Like Text, Image and Button?
    Always I find Livebinding samples...

  • Jean-Luc M22328
    Jean-Luc M22328 Wednesday, 1 March 2017

    Hi Sarina,

    I use DynamicAppearance and TGlyphButtonObjectAppearance on my item.
    In code, following the example, I use:

    It.Data['GlyphButton3'] := 0; // first image index

    My ImageList has one png image and is linked to my listview.
    But at runtime, no image displayed :-(

    With TImageObjectAppearance, same code work very well.
    Is a special image format needed for Tglyphxxx ??

  • Farhad R28100
    Farhad R28100 Tuesday, 20 December 2016

    Hi Sarina
    I am trying to use this new feature, I can add new items to my list view like text1, text2 etc, but when I try to bind the listview to my data source it always generate an error. seems these new items can not be find by the binder.
    The error message is like this:
    EvalError in LinkFillControlToField1: Couldn't find txtID.
    where txtId is a text object I added to my listview!

  • Farhad R28100
    Farhad R28100 Wednesday, 21 December 2016

    Solved!
    We need to add the items in all platforms!

  • JC Whitsett
    JC Whitsett Tuesday, 13 December 2016

    I have this mostly working, but I dont understand how to change the color of a detail text in code. I have a TListview component named lviewStatus and can change the text as shown below.

    lviewStatus.Items[1].Data[TMultiDetailAppearanceNames.Detail2]:= 'ON';

    But how to get access to the TTextObjectAppearance I just can not find.

  • Aleksandar D13053
    Aleksandar D13053 Tuesday, 13 December 2016

    Hi Sarina,

    in ListView DynamicAppearance im Edit mode, i added a TGlyphButtonObjectAppearance, button type Checkbox.
    So, i expect that when Listbox in edit mode, when i click on that checkbox, checkbox will turn to checked. but it's not. What i'm doing wrong?

  • Aleksandar D13053
    Aleksandar D13053 Monday, 19 December 2016

    solved.
    set appearanceobjectname to "G".

    don't ask me why.

  • Jean-Luc M22328
    Jean-Luc M22328 Friday, 7 October 2016

    Hi Sarina,

    I need to display an email list. For each item, I need to display a bitmap (attach type) to indicate an attachement. Is it possible to hide or show this bitmap (TImageObjectAppearance) on a flag by item ?

  • jalols
    jalols Tuesday, 30 August 2016

    Hi, Sarina
    How I can change items of PrototypeBindSource?

  • Grigore T499
    Grigore T499 Wednesday, 3 August 2016

    I Listview customized to display multiple fields from a data source. This is excellent, but implicit in the ListView have access to the selected item using Items.text. Now I have Item text1, text2, etc. How can return values Item text1, text2 for Items selected by user from ListView?

  • Grigore T499
    Grigore T499 Friday, 5 August 2016

    I solved this problem using:
    AItem.Data['Text1'].ToString
    AItem.Data['Text2'].ToString
    AItem.Data['Text3'].ToString
    AItem.Data['Text4'].ToString
    I added this code on listview onItemClick event.

  • Tuan-Loc
    Tuan-Loc Tuesday, 19 July 2016

    Hi Sarina,
    Can you show how to attach events to individual custom objects (like Text2, Image3 ...) please.

  • Sarina D
    Sarina D Tuesday, 19 July 2016

    Hi Tuan-Loc,

    As they are not controls, they do not have this functionality per se. However, TListView.OnItemClickExOnItemClickEx event has the click position passed to it, so that could be used for finding out where the click happened. This would not include support for animations for example, but should allow you to detect which object received the click.

    Regards,
    Sarina

  • Regent Beaulieu
    Regent Beaulieu Sunday, 5 June 2016

    Hi Sarina,

    The text bellow is a part about ObjectsCollection of the .fmx file. How can we reproduce this at runtime ?

    ItemAppearanceObjects.ItemObjects.ObjectsCollection =

    Regards,
    Regent

  • Regent Beaulieu
    Regent Beaulieu Sunday, 5 June 2016

    item
    AppearanceObjectName = 'NODE_ID'
    AppearanceClassName = 'TTextObjectAppearance'
    Appearance.Width = 30.000000000000000000
    Appearance.Visible = False
    end

  • Sarina D
    Sarina D Friday, 10 June 2016
  • Regent Beaulieu
    Regent Beaulieu Friday, 10 June 2016

    Hi Sarina,

    Thank you for your response.

    I am looking to add new drawables on the fly at runtime. Because I create TListView at runtime, insert it in a new TTAbItem, and create binding, all that on the fly.

    The only think I am not abble to do by code at this times, is to create TAppearance object like TTextObjectAppearance and add it into ObjectsCollection.

    My ultimate goal is to replace a TreeView (old VCL app) by a TabItem navigation in my new Firemonkey application. That why I have NODE_ID and PARENT_NODEID in my database.

    Regards,
    Regent

  • Sarina D
    Sarina D Friday, 17 June 2016

    Hi Regent,

    If drawables need to be generated on the fly, I would look at the CustomAdapter demo (which is completely custom with no appearances), or using custom appearances (custom as in program code, like in the Ratings appearance sample).

    https://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/Object%20Pascal/Multi-Device%20Samples/User%20Interface/ListView/CustomAdapter/

    https://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/Object%20Pascal/Multi-Device%20Samples/User%20Interface/ListView/ListViewRatingsAppearance/


    Regards,
    Sarina

  • Jair RC
    Jair RC Thursday, 26 May 2016

    Hi, Sarina...

    And how to connect an image from ImageList to an object of type TImageObjectAppearance or TGlyphButtonObjectAppearance?? I need to put any icons on Dynamic ListViewItem via code or via LiveBindings…

    Thank you from Brazil
    Jair Chiapetti

  • Please login first in order for you to submit comments