Xamarin.forms 如何从 observablecollection 中获取属性并将其放入 CarouselView

Question

我想使用 CarouselView 创建一个级别选择器，每个屏幕滚动显示 6 个级别。 我已经为 LevelCard 创建了一个LevelCard ，这意味着每张卡片都有自己的价值，我这样做是因为每个级别都有许多要显示的星星，这意味着我需要每张卡片的实例更新每个级别（卡片）的星星。

Ingore PopulateCardInformation方法尚未完成，也不会像这样，我只是为了快速测试而制作它，但似乎没有任何效果。

如果您在调试时查看最后一张图片，我可以 select 所需的卡片，但我永远无法真正拉出该属性以显示为文本。 我已经搜索了Path=card1.Game Path=card1[Game] ，这Path=Game.card1我Path=Game[card1]添加任何与它实际上在我的Model.NameOfProperty中寻找一个属性名称......它正在寻找另一个名为Game的 model ...

public class LevelCard
{
    public int Game { get; set; }
    public int Score { get; set; }
    public bool IsCompleted { get; set; }
}

public class LevelSelectorPopUpModel : BaseViewModel
{
    ObservableCollection<LevelCard> cards = new ObservableCollection<LevelCard>();
    public ObservableCollection<LevelCard> Cards
    {
        get => cards;
    }

    int game = 1;
    int totalGames;

    public LevelSelectorPopUpModel()
    {
        Initialize();
    }

    async void Initialize()
    {
        totalGames = await LevelReader.GetTotalGames();
        InitializeWidthHeightProperties();
        InitializeCards();
    }

    void InitializeCards()
    {
        LevelCard card1 = new LevelCard();
        LevelCard card2 = new LevelCard();
        LevelCard card3 = new LevelCard();
        LevelCard card4 = new LevelCard();
        LevelCard card5 = new LevelCard();
        LevelCard card6 = new LevelCard();

        cards.Add(card1);
        cards.Add(card2);
        cards.Add(card3);
        cards.Add(card4);
        cards.Add(card5);
        cards.Add(card6);

        PopulateCardInformation();
    }

    void PopulateCardInformation()
    {
        foreach (var card in cards)
        {
            if (totalGames < game)
                return;
            card.Game = game;
            game++;
        }
    }
}

XAML

<CarouselView ItemsSource="{Binding Cards}"
                HorizontalScrollBarVisibility="Always"
                WidthRequest="{Binding Width}"
                HeightRequest="600"
                Margin="10, 0, 10, 0"
                BackgroundColor="Red"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand">

    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Grid RowSpacing="50"
                    VerticalOptions="CenterAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <StackLayout Orientation="Horizontal"
                                WidthRequest="600"
                                HeightRequest="250"
                                BackgroundColor="Orange"
                                VerticalOptions="CenterAndExpand"
                                HorizontalOptions="CenterAndExpand"
                                Margin="0, 10, 0, 0">
                    <Label Text="{Binding Path=card1, FallbackValue='Error'}"
                            BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                    <Label Text="{Binding Path=card2, FallbackValue='Error'}"
                            BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                    <Label Text="{Binding Path=card3, FallbackValue='Error'}"
                            BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                </StackLayout>

                <StackLayout Orientation="Horizontal"
                                WidthRequest="600"
                                HeightRequest="250"
                                BackgroundColor="Orange"
                                Grid.Row="1"
                                VerticalOptions="CenterAndExpand"
                                HorizontalOptions="CenterAndExpand"
                                Margin="0, 0, 0, 10">
                    <Label BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                    <Label BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                    <Label BackgroundColor="Purple"
                            WidthRequest="200"
                            HeightRequest="200" />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>     

Answer 1

CarousalView不是显示您想要的内容的最佳选择。 但是，您可以通过了解它的工作原理来使其发挥作用。 CarousalView在内部将项目存储为CurrentItem 。 每次滚动它时，它会将其CurrentItem更改为下一个项目。 这意味着，您第一次看到CarousalView时，它的CurrentItem是您添加到Cards集合中的第一张卡片。 当您在ItemTemplate中编写{Binding card1}时，它会尝试在其CurrentItem中找到一个名为card1的属性，这是一个Card并且没有这样的属性。 如果数字 6 是固定的，则创建一个助手 class：

public class LevelCardGroup 
{
    public LevelCard Card1 { get; }
    public LevelCard Card2 { get; }
    public LevelCard Card3 { get; }
    public LevelCard Card4 { get; }
    public LevelCard Card5 { get; }
    public LevelCard Card6 { get; }

    public LevelCardGroup(LevelCard card1, LevelCard card2, LevelCard card3,
        LevelCard card4, LevelCard card5, LevelCard card6)
    {
        Card1 = card1;
        Card2 = card2;
        Card3 = card3;
        Card4 = card4;
        Card5 = card5;
        Card6 = card6;
    }
}

并更改您的视图 model 以在Cards集合中添加助手 class 的实例：

ObservableCollection<LevelCardGroup> cards = new ObservableCollection<LevelCardGroup>();
public ObservableCollection<LevelCardGroup> Cards
{
    get => cards;
}

void InitializeCards()
{
    LevelCard card1 = new LevelCard();
    LevelCard card2 = new LevelCard();
    LevelCard card3 = new LevelCard();
    LevelCard card4 = new LevelCard();
    LevelCard card5 = new LevelCard();
    LevelCard card6 = new LevelCard();

    cards.Add(new LevelCardGroup(card1, card2, card3, card4, card5, card6));

    PopulateCardInformation();
}

您还必须更改PopulateCardInformation 。 在你看来：

<Label Text="{Binding Path=Card1.Game, FallbackValue='Error'}"
    BackgroundColor="Purple"
    WidthRequest="200"
    HeightRequest="200" />

现在LevelCardGroup的CurrentItem将是CarousalView ，它包含一个名为Card1的属性，它的值有一个名为Game的属性。