将Xamarin表单中CollectionView中的所有项目右对齐

问题描述

我一直在尝试将Xamarin形式CollectionView中的所有项目正确对齐,但是不幸的是,该代码不适用于IOS,但它在Android中却可以正常使用。好像很奇怪当我加载100个项目时,只有出现在屏幕上的前十个项目是右对齐的,而其余的则是未对齐的。另外,当我清除collectionview并加载下100个项目(这是要求的一部分)时,则整个项目都没有对齐。

<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 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,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>

当我较少的物品说10时,所有的物品都相应地对齐。但是,当项目数增加到100时,很令人吃惊的是,仅有的几个顶级项目是对齐的,而其余的则没有对齐。当我滚动回到顶部时,则所有项目均未正确对齐。

Sample picture

更新2 如果我删除Span并将其更改为标签,则所有标签都将进行相应对齐,但是跨度会产生问题。

解决方法

我发现的唯一临时解决方案是将“跨度”更改为“标签”,但是不会水平连续显示文本作为“跨度”。因为使用跨度,我想在一个完成后显示两个差异文本,使用两个标签我无法获得相似的结果。