Xamarin Forms - DataTemplate из вложенного свойства в DataTemplate из родительского объекта - PullRequest
Новая
       3

Xamarin Forms - DataTemplate из вложенного свойства в DataTemplate из родительского объекта

0 голосов
/ 27 февраля 2020

У меня есть 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>();
    }
}

Я пытаюсь создать макет горизонтального стека, заполненный фреймами для каждого пользователя и в каждом кадре есть список карточек, принадлежащих этому пользователю.

Я пытался сделать это с помощью списков, стековых макетов и почти всех других методов, которые показывает Google, но каждый из них имеет одинаковый результат.

Я получаю кадры для пользователей, но они не заполнены.

Мой 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 это такое простое задание, которое заняло бы у меня несколько минут, но это меня победило.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Лучше использовать модель 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>

установить BindingContext в главной странице: 

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

DemoViewModel: 

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")
            };
        }

    }

Класс Пользователь удален, CardData остается то же самое, также вы можете добавить его обратно, если это необходимо.

BindingUser: 

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",
                },
            };  
        }
    }
0 голосов
/ 27 февраля 2020

Здесь вы рассмотрели две вещи,

Первое, для просмотра списка, вы должны использовать свойство 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",
        };
    }
}
...