Right Align all items in CollectionView in Xamarin Forms

Question

I have been trying to right align all items in Xamarin forms CollectionView, unfortunately the code doesn't work for IOS while it works well in Android. It seems strange. When I load 100 items, only the 1st ten items which appears on the screen are right aligned, but then the rest is not aligned. Additionally, when I clear the collectionview and load next 100 items (this is part of the requirement), then the whole items are not aligned.

<CollectionView ItemsSource="{Binding ArabicListText}" SelectedItem="{Binding SelectedAya}"
      SelectionMode="Single" ItemTemplate="{StaticResource ChapterItemTemplate}"
      FlowDirection="RightToLeft" x:Name="itemView">
      <CollectionView.ItemsLayout>
          <GridItemsLayout Orientation="Vertical" Span="1"/>
      </CollectionView.ItemsLayout>
</CollectionView>

Datatemplate from resources

<DataTemplate x:Key="ChapterItemTemplate">
            <SwipeView HorizontalOptions="StartAndExpand">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundPrimaryColor}, 
                                                            Dark={StaticResource DarkPageBackgroundPrimaryColor}}" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundSecondaryColor}, 
                                                            Dark={StaticResource DarkPageBackgroundSecondaryColor}}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <StackLayout Padding="10,0,5,0" HorizontalOptions="StartAndExpand">
                    <Label LineBreakMode="WordWrap" HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand" IsVisible="{Binding BindingContext.ShowEnglishVerseNumber,
                                                Source={x:Reference MyPage}, Converter={StaticResource InverterBooleanConverter}}">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding ArabicText.Aya}" 
                                                        FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
                                                        FontFamily="{Binding BindingContext.ActiveArabicFont.FontPath, Source={x:Reference MyPage}}"/>
                                <Span 
                                                        Text="{Binding ArabicText.ArabicAyaNumber,  StringFormat='﴿{0}﴾'}"
                                                          FontSize="35" FontFamily="Sherzad"></Span>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <BoxView Style="{StaticResource HorizentalLine}" IsVisible="{Binding BindingContext.ShowHorizentalLine, Source={x:Reference MyPage}}"/>
                <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.ShareAyaCommand, 
                                                    Source={x:Reference itemView}}"
                                                 CommandParameter="{Binding .}"/>
                        <SwipeGestureRecognizer Direction="Right" Command="{Binding BindingContext.NextChapterCommand, 
                                                    Source={x:Reference MyPage}}"/>
                        <SwipeGestureRecognizer Direction="Left" Command="{Binding BindingContext.PreviousChapterCommand, 
                                                    Source={x:Reference MyPage}}"/>
                    </StackLayout.GestureRecognizers>
            </StackLayout>
            </SwipeView>
        </DataTemplate>

When I have fewer items says 10, all the items are aligned accordingly. However, when the number of items grow to 100, then strangly, the only few top items are well aligned and the rest are not aligned. When I scroll back to the top, then all the items are aligned incorrectly.

Update 2 If I remove Span and change them to labels then all the labels are aligned accordingly, but having the span creates the problem.

What does the issue ocure for? iOS or Android? The right align seems for the label text? What is the text font and language? — Wendy Zang - MSFT
Hi, bro try to use HorizontalOptions="FillAndExpand" for your stacklayout — Anand
@WendyZang-MSFT it is arabic language and the fontfamily is arabic. The label text should appear as the 1st four lines which are correctly aligned. — ARH

ARH ARH · Accepted Answer · 2020-09-15T22:19:41

The only temp solution I found is to change Spans to Labels, but it doesn't display text as the Span after one another horizentally. Because using Span I want to show two diff texts after one finishes which I can't acheive similiar result using two Labels.

Right Align all items in CollectionView in Xamarin Forms

1 Answers