Hello Sazna,
your application case is very advanced. You have implemented the trick with three lists to fade-out the upper/lower list area. It is a good approach. Now, you added the function to expand/collapse the items. Such modification has to affect all three lists otherwise the contents at the edges of the lists will not correspond. Also, the component containing the expand/collapse button is not the item itself. It is embedded within the item. This also needs to be taken in account.
The first problem is how the OnExpandCollapse signal is sent. Please see the implementation of Application::ToExpandScreen component:

The component ToExpandScreen, however, is not the list item. It is embedded within an item. Therefore, when it sends a signal and the signal arrives at the slot method onExpandCollapse in Application component, the sender parameter identifies an instance of the ToExpandScreen component. Trying to cast the sender to an item class results in null and an exception, displayed in the Log window:


To fix the issue, you can append to the postsignal operation an optional sender expression identifying the item. The item is the owner of the ToExpandScreen. Following modification would fix this issue:

Alternative approach: modify the onExpandCollapse slot method to correctly access the owner component of the sender:

The second problem is found in the OnLoadItem slot method. It is missing the initialization of the item's ItemNo property. Add following row to the method:

The OnLoadItem slot method also contains another problem. At the end of the method, the item receives its size. Your version, uses here the ItemHeight property, which is equal for all items:

As long as all items have equal height, the approach is fully correct. However, when items have dynamic height, you have to follow the instructions found in the section Implement the OnLoadItem slot method to load the items. Here use the variable ViewSize to initialize the size of the item. Following is the necessary modification of the OnLoadItem slot method:

A further problem is that the top and bottom vertical lists don't use the OnQueryItemHeight slot method. When you expand an item, the effect is only seen in the middle list. Therefore, you have to connect also the top and the bottom lists to the OnQueryItemHeight slot method. In the top and bottom lists, assign the slot method to the property OnQueryItemHeight:

Doing this, however, will have the side effect of the slot method being invoked in context of any of the three lists. Thus, you need to access the list via sender parameter and not directly via its name. Modify the OnQueryItemHeight slot method as shown below:

Also, when an item is expanded/collapsed, you will need to invalidate all three lists, otherwise the effect of the expand/collapse operation is not seen in the top/bottom list. Add following rows to the onExpandCollapse slot method:

The modified project is found here.
I hope it helps you further.
One hint: In the list you plan to use items of different types. In your implementation you have created a common item component. It embeds then all item types and shows/hides them depending on the provided item content. This was the recommended approach in EW <= 11 since lists were able to deal with one item class only. With EW 12, you can implement a list with different item classes so the trick with embedded item contents is not needed anymore. See also Specify the class of the items within the list.
Best regards
Paul Banach