in GUI Development by

Hi Team,

Is it possible to have the vertical list which informs the user that there are more items to scroll by having a gradient color until it reaches the last item like in the image attached below?




1 Answer

+1 vote

Hello Sazna,

the solution depends on the desired behavior of the gradient. From the screenshot it is difficult to deduce whether the gradient affects the opacity of the list itself or whether it lies behind or in front of it.

Assuming the gradient is lying in front of the list, following would be the possible approach:

Step 1. Let's assume there is a component containing a Vertical List.

Step 2. Add a new Rectangle view to the component.

Step 3. Arrange the Rectangle view to appear above the list in its lower area (where the last visible list item would be expected).

Step 4. Configure the Rectangle view with colors to display a vertical gradient. See the section Specify the color of the Rectangle view.

Step 5. Add a new slot method to the component.

Step 6. Assign the slot method to the list's property OnUpdate. See also the section Arrange other views on the content of the Vertical List.

Step 7. Edit the slot method and implement it with following or similar code:

var int32 lastItemIndex = VerticalList.NoOfItems - 1;
var rect  lastItemArea  = VerticalList.GetItemsArea( lastItemIndex, lastItemIndex );

// If there is something below the lower edge of the list -> display the gradient
Rectangle.Visible = lastItemArea.y2 > VerticalList.Bounds.y2;

Now, whenever something changes in the list, a signal is sent to the slot method. Within the slot method the implementation evaluates the position of the last list item. If the position is beyond the lower edge of the list, the rectangle is set visible. Otherwise it is hidden,

I hope it corresponds to your use case. If not please explain more in detail the desired appearance.

Best regards

Paul Banach

Hi Paul,

It helped me. Thank you so much.



Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint