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的屬性。