Xamarin Forms - 來自父對象的 DataTemplate 中嵌套屬性的 DataTemplate

Question

我有 3 個名為 Users、Cards 和 BindingUser 的類，這是一個將它們綁定在一起的類。

public class User
{
    public int Uid { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; } 
}

public class CardData
{
    public int _id { get; set; }
    public string CardName { get; set; }
    public string CardNote { get; set; }
}

public class BindingUser
{
    public User bUser { get; set; }
    public ObservableCollection<CardData> cardDatas { get; set; }
    public BindingUser()
    {
        cardDatas = new ObservableCollection<CardData>();
    }
}

我正在嘗試創建一個水平堆棧布局，為每個用戶填充框架，並且在每個框架中都有屬於該用戶的卡片列表。

我嘗試過使用列表視圖、堆棧布局和谷歌顯示的幾乎所有其他方法來做到這一點，但每個方法都有相同的結果。

我得到了用戶的框架，但它們沒有被填充。

我的xaml看起來像這樣，我知道這是錯誤的，但我將其格式化為這樣以顯示我想要實現的目標。 在此示例中， FirstName和LastName工作正常，但未填充列表視圖。

<ContentPage.Content>
    <StackLayout Orientation="Horizontal" BackgroundColor="#EBEBEB" HeightRequest="130" BindableLayout.ItemsSource="{Binding bindingUsers}" WidthRequest="410">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout HeightRequest="300" VerticalOptions="Start" Orientation="Vertical">
                    <Frame CornerRadius="0" 
                                HorizontalOptions="Start" 
                                VerticalOptions="Start" 
                                Margin="0"
                                Padding="0"
                                WidthRequest="410"
                                HeightRequest="80"
                                BackgroundColor="Red"
                                HasShadow="true">
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding bUser.FirstName}"/>
                            <Label Text="{Binding bUser.LastName}"/>
                        </StackLayout>

                    </Frame>
                    <StackLayout Orientation="Vertical" BackgroundColor="Blue">
                        <ListView  BindableLayout.ItemsSource="{Binding bindingUsers.cardDatas}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Label Text ="{Binding CardName}"/>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>

                </StackLayout>


            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ContentPage.Content>

有人可以指出我正在努力實現的正確方向嗎？

在.net forms這是一項如此簡單的任務，我需要幾分鍾才能完成，但這讓我感到沮喪。

Answer 1

在這里你考慮了兩件事，

第一個，對於列表視圖，您必須使用 ItemsSource 屬性而不是 BindableLayout.ItemsSource。

第二個是模板的 BindingContext 將是可綁定布局源的單個項目。 例如，在您的情況下 CardData。 因此，您嘗試綁定到 ListView 的源代碼不是 CardData 的一部分。 因此，當您在數據模板內綁定不同的對象時，您已將 BindingContext 關鍵字（如 BindingContext.YourProperty）與源引用進行了綁定。 參考下面的代碼，

<StackLayout x:Name="baseLayout" Orientation="Horizontal" BackgroundColor="#EBEBEB" HeightRequest="130" 
                BindableLayout.ItemsSource="{Binding cardDatas}" WidthRequest="410">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <StackLayout HeightRequest="300" VerticalOptions="Start" Orientation="Vertical">
                <Frame CornerRadius="0" 
                            HorizontalOptions="Start" 
                            VerticalOptions="Start" 
                            Margin="0"
                            Padding="0"
                            WidthRequest="410"
                            HeightRequest="80"
                            BackgroundColor="Red"
                            HasShadow="true">
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding BindingContext.bUser.FirstName, Source={x:Reference baseLayout}}"/>
                        <Label Text="{Binding BindingContext.bUser.LastName, Source={x:Reference baseLayout}}"/>
                    </StackLayout>

                </Frame>
                <StackLayout Orientation="Vertical" BackgroundColor="Blue">
                    <ListView  ItemsSource="{Binding BindingContext.cardDatas, Source={x:Reference baseLayout}}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text ="{Binding CardName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

以及基於您的代碼的模型和視圖模型類，

public class User
{
    public int Uid { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

public class CardData
{
    public int _id { get; set; }
    public string CardName { get; set; }
    public string CardNote { get; set; }
}

public class BindingUser
{
    public User bUser { get; set; }
    public ObservableCollection<CardData> cardDatas { get; set; }
    public BindingUser()
    {
        cardDatas = new ObservableCollection<CardData>()
        {
            new CardData()
            {
                _id = 1,
                    CardName = "Testing1",
                    CardNote = "Test data1",
            },
            new CardData()
            {
                _id = 2,
                    CardName = "Testing2",
                    CardNote = "Test data2",
            },
            new CardData()
            {
                _id = 3,
                    CardName = "Testing3",
                    CardNote = "Test data3",
            },
        };

        bUser = new User
        {
            Uid = 23432,
            FirstName = "First User",
            LastName = "Last User",
        };
    }
}

Answer 2

如果要綁定復雜數據，最好使用MVVM模型，視圖模型可幫助您更清晰地了解視圖和模型，我對代碼進行了一些更改，希望對您有所幫助：

XAML：

<StackLayout BindableLayout.ItemsSource="{Binding Data}"
                 Orientation="Horizontal" BackgroundColor="#EBEBEB">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame CornerRadius="0" 
                            HorizontalOptions="Start" 
                            VerticalOptions="Start" 
                            Margin="0"
                            Padding="0"
                            WidthRequest="410"
                            BackgroundColor="Red"
                            HasShadow="true">
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding FirstName}"/>
                            <Label Text="{Binding LastName}"/>
                        </StackLayout>
                    </Frame>

                    <ListView  ItemsSource="{Binding cardDatas}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text ="{Binding CardName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>

在 MainPage 中設置 BindingContext：

public partial class MainPage : ContentPage
    {
        DemoViewModel viewModel = new DemoViewModel();
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = viewModel;
        }
    }

演示視圖模型：

class DemoViewModel
    {
        public ObservableCollection<BindingUser> Data { get; set; }

        public DemoViewModel() {
            Data = new ObservableCollection<BindingUser>
            {
                new BindingUser(1, "aa"),
                new BindingUser(2, "bb"),
                new BindingUser(3, "cc"),
                new BindingUser(4, "dd")
            };
        }

    }

類 User 被刪除，CardData 保持不變，您也可以根據需要重新添加它。

綁定用戶：

class BindingUser
    {
        public int Uid { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public ObservableCollection<CardData> cardDatas { get; set; }

        public BindingUser(int uid, string name)
        {
            Uid = uid;
            FirstName = name;
            LastName = name;
            cardDatas = new ObservableCollection<CardData>()
            {
                new CardData()
                {
                    _id = 1,
                    CardName = "card 1",
                },
                new CardData()
                {
                    _id = 2,
                    CardName = "card 2",
                },
                new CardData()
                {
                    _id = 3,
                    CardName = "card 3",
                },
            };  
        }
    }