Right Align all items in CollectionView in Xamarin Forms

Published

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.

Sample picture

Source: Xamarin.ios Questions

Published
Categorised as Uncategorised Tagged , , , ,

Answers

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.


Sven Hodkiewicz

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq