CollectionView: conditional for last element

Ayleen 21

Is there a possibility to address the last element in a CollectionView in order to style that differently?

I use a BoxView with height 1 as a separator under the list items, but I do not want to have it under the last element.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,551 Reputation points Microsoft Vendor

2022-12-08T07:23:02.297+00:00

Is there a possibility to address the last element in a CollectionView in order to style that differently?

Do you want to set a specific style for last item in the CollectionView?
Could you share this code of style?

Ayleen 21

As I mentioned, I use a BoxView as a separator under my text label, like so (Code does not show the surrounding CollectionView for more clarity):

                    <Grid ColumnDefinitions="40, *"  
                          RowDefinitions="*, Auto">  
                        <Image HeightRequest="25">  
                            <Image.Source>  
                                .... some icon  
                            </Image.Source>  
                        </Image>  
                        <Label Text="{Binding .}"  
                               Grid.Column="1"/>  
                        <BoxView HeightRequest="1"  
                                 Grid.Row="1"  
                                 Grid.Column="1"  
                                 Color="LightGray"/>  
                    </Grid>

Under the last element, I do not want to show the BoxView, as it is somewhat interfering with the lower edge of the Border element:

PS: I use a ListView now, because the CollectionView did not work quite the same on Android and iOS - on iOS it was extended to overflow the lower edge of the device - at least in the simulator.
But my question does concern both, ListView and CollectionView, as I have more use cases for that.

Ayleen 21 Reputation points

2022-12-09T17:52:20.173+00:00

Sorry, but:

1) I didn't find a solution to my inital problem
2) I already found out, that I should have used the "reply" instead of "answer" - sorry, new here ...

I moved my "answer" (which was not an answer, but a reply to LeonLu's reply) to be a reply to LeonLu. Hope that makes my intentions more clear ¯_(ツ)_/¯
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,551 Reputation points Microsoft Vendor

2022-12-12T08:17:53.737+00:00

You can use <Entry Grid.Column="1" Grid.Row="0" Text="{Binding }" HorizontalOptions="FillAndExpand" TextColor="Black" IsEnabled="False" ></Entry> and set the IsEnabled="False" to replace <Label > and <BoxView>
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,551 Reputation points Microsoft Vendor

2022-12-12T08:18:09.06+00:00

You can use <Entry Grid.Column="1" Grid.Row="0" Text="{Binding }" HorizontalOptions="FillAndExpand" TextColor="Black" IsEnabled="False" ></Entry> and set the IsEnabled="False" to replace <Label > and <BoxView>
Ayleen 21 Reputation points

2022-12-13T20:32:51.763+00:00

Hmm, tried that, but then I do not have a separator at all. Not even if I set SeparatorVisibility on the ListView to Default.
Ayleen 21 Reputation points

2022-12-13T20:33:42.367+00:00

Hmm, tried that, but then I do not have a separator at all. Not even if I set SeparatorVisibility on the ListView to Default.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,551 Microsoft Vendor

Let focus on the Collectionview, if you want to add the separator in the collectionview. You can add handler for CollectionView, then add ItemDecoration with following code.

   Microsoft.Maui.Controls.Handlers.Items.CollectionViewHandler.Mapper.AppendToMapping("ChatStackFromEnd", (h, v) =>  
           {  
   #if ANDROID  
               AndroidX.RecyclerView.Widget.RecyclerView recycleView = h.PlatformView;  
               recycleView.AddItemDecoration(new AndroidX.RecyclerView.Widget.DividerItemDecoration(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity, AndroidX.RecyclerView.Widget.DividerItemDecoration.Vertical));  
   #endif  
          });

Share via

CollectionView: conditional for last element

Your answer