Identify last element of Each

Hey guys,

I am eaching through an array via

<Each Value="{Items}"
  <StackPanel ItemSpacing="5">
    <Text Value="Some text" />
    <Rectangle Width="1" Height=20" Color="Red" />
  </StackPanel>
</Each>

Is it possible to hide the rectangle element when the last element of the array is reached?

For example, if the array “Items” contains 3 elements, the list should look like:
Text & Rectangle - Text & Rectangle - Text (no rectangle)

Hello! I’d create an Observable for the Rectangle’s Visibility value. This value would be determined by the items position in the array. For the last item it would be “Collapsed” and “Visible” for others.

Thank you for your reply! I am not exactly sure how you would do this. Do you mind providing a snippet?

Not a working snippet but an idea:
// this would happen in the loop you add items
item.rectangle_visibility = (items.indexOf(item) == items.length-1) ? new Observable(”Collapsed”) : new Observable(”Visible”);
// then in the UX part of Each you add Visibility={rectangle_visibility} for the Rectangle

That worked perfectly, thank you!