绑定到集合 Xamarin 中的索引

Question

public List<Scoreboard> RawScoreboard { get; set; }

public ObservableCollection<Scoreboard> ScoreboardList { get; set; }


  <CollectionView ItemsSource="{Binding ScoreboardList}"
                        EmptyView="Sorry, no scores yet! Play a game and view your results here!">
            <CollectionView.ItemTemplate>
                <DataTemplate  x:DataType="models:Scoreboard">
                    <Grid BackgroundColor="{StaticResource BasePurple}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding Score}" Style="{StaticResource LabelStyle}" />

                        <Label Grid.Column="1" Text="{Binding UserName}" Style="{StaticResource LabelStyle}" />

                        <Label Grid.Column="2" Text="{Binding CountryName}" Style="{StaticResource LabelStyle}" />

                        <Label Grid.Column="3" Style="{StaticResource LabelStyle}" >
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="{Binding Score}"/>
                                    <Span Text="/10"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

所以我想要做的是更改 Rank 列以将其绑定为列表中自己的索引。即 1、2、3、4、5、6。这里只是一个编号列表。我认为这可能在 linq 中可以做到吗？

public class Scoreboard
{
    public int UserId { get; set; }

    public int CountryId { get; set; }

    public string CountryName { get; set; }

    public string UserName { get; set; }

    public int Score { get; set; }
}

public async Task OnAppearing()
        {
            await GetScores();
            SortScoreboard();

            foreach (var scoreboard in RawScoreboard)
            {
                ScoreboardList.Add(scoreboard);
            }
    }

我已经添加了所有相关的代码，所以基本上。 “我如何将一个元素绑定到它自己的集合视图中的索引？”

Answer 1

这有点像 hack。但是您可以创建一个 ValueConverter，它将CollectionView 作为参数并尝试从中获取索引：

public class IndexValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter is Binding binding && 
            value is Scoreboard score && 
            binding.Source is CollectionView collectionView && 
            collectionView.BindingContext is ScoreboardViewModel viewModel)
        {
            return viewModel.ScoreboardList.IndexOf(score);
        }

        return -1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => throw new NotImplementedException();
}

记得注册你的转换器：

<ContentPage.Resources>
    <ResourceDictionary>
        <converters:IndexValueConverter x:Key="IndexConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

这样您可以将Label 绑定到项目本身，并使用ConverterParameter 中的引用从以下位置查找索引：

<Label Text="{Binding ., Converter={StaticResource IndexConverter}, ConverterParameter={Binding Source={x:Reference Scores}, Path=BindingContext}}" />

鉴于您将CollectionView 称为“分数”与x:Name="Scores"。

这会产生类似：