Как отобразить список объектов класса в представлении коллекции?

Я хочу отобразить список (наблюдаемую коллекцию) типа BleDevice в моем представлении. Я использую шаблон mvvm в .net maui (.net 7).

Модель:

public class BleDevice
    {
        public BleDevice(){}
        public BleDevice(string name, string mac) 
        {
            Name = name;
            MacAddress = mac;
        }
        public string Name {  get; set; }
        public string MacAddress { get; set; }
    }

ViewModel:

public partial class MainViewModel: ObservableObject
    {
        
        public MainViewModel()
        {
            devices = new ObservableCollection<BleDevice>();
            devices.Add(new BleDevice("Mystronics Winder", "00:00:00:00:00"));
            devices.Add(new BleDevice("Living Room TV", "25:e7:aa:05:84"));
        }

        [ObservableProperty]
        ObservableCollection<BleDevice> devices;
    }

Вид (xaml): (отредактировано)

<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class = "MauiApp2.MainPage"
             xmlns:viewmodel = "clr-namespace:MauiApp2.ViewModel"
             xmlns:model = "clr-namespace:MauiApp2.Model"
             x:DataType = "viewmodel:MainViewModel">

    <VerticalStackLayout>
        <CollectionView ItemsSource = "{Binding Devices}">
            <CollectionView.ItemTemplate>
                <DataTemplate  x:DataType = "{model:BleDevice}">
                    <Grid>
                        <Label Text = "{Binding Name}"/>
                        <Label Text = "{Binding MacAddress}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

Ошибка: XFC0045 Binding: Property "Name" not found on "MauiApp2.ViewModel.MainViewModel". MauiApp2 \source\repos\MauiApp2\MauiApp2\View\MainPage.xaml

Почему он распознает "{Binding Devices}", но не "{Binding Name}" и "{Binding MacAddress}"?

Вам нужно либо добавить атрибут DataType к вашему DataTemplate, либо удалить тот, который у вас уже есть в другом месте вашей страницы.

Jason 18.11.2022 13:33

Не связанное с этим примечание: свойство Devices не обязательно должно иметь атрибут [ObservableProperty], поскольку оно является ObservableCollection. ObservableCollection сам уведомит пользовательский интерфейс о любых изменениях в коллекции (добавление, удаление и т. д.).

Michal Diviš 18.11.2022 14:06

Если вы удалите атрибут, им нужно будет явно сделать его общедоступным

Jason 18.11.2022 14:14

@ Джейсон, это правильно? <DataTemplate x:DataType = "{model:BleDevice}"> Я все еще получаю ту же ошибку.

Mahyar Shokraeian 18.11.2022 14:58

Нет. Посмотрите, как отформатирован другой DataType у вас на странице.

Jason 18.11.2022 15:03

@Jason Тип данных основной страницы содержимого определяется следующим образом xmlns:viewmodel = "clr-namespace:MauiApp2.ViewModel" x:DataType = "viewmodel:MainViewModel" для доступа к модели представления. (ps: извините, я нуб-разработчик в .net)

Mahyar Shokraeian 18.11.2022 15:08

Посмотрите на две разные DataType декларации. Чем отличается тот, который НЕ работает?

Jason 18.11.2022 15:10

@Jason Это была опечатка. все равно спасибо за помощь :)

Mahyar Shokraeian 18.11.2022 15:19

Вы также можете обратиться к официальному документу о CollectionView. Это может быть полезно для вас.

Jianwei Sun - MSFT 24.11.2022 02:23
[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Топ-10 компаний-разработчиков PHP
Топ-10 компаний-разработчиков PHP
Если вы ищете надежных разработчиков PHP рядом с вами, вот список лучших компаний по разработке PHP.
Скраппинг поиска Apple App Store с помощью Python
Скраппинг поиска Apple App Store с помощью Python
📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что...
Редкие достижения на Github ✨
Редкие достижения на Github ✨
Редкая коллекция доступна в профиле на GitHub ✨
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Улучшение генерации файлов Angular
Улучшение генерации файлов Angular
Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.
0
9
74
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ViewModel Удалите атрибут [ObservableProperty] и измените его на этот:

public partial class MainViewModel : ObservableObject
    {
        public MainViewModel()
        {
            Devices = new ObservableCollection<BleDevice>();
            Devices.Add(new BleDevice("Mystronics Winder", "00:00:00:00:00"));
            Devices.Add(new BleDevice("Living Room TV", "25:e7:aa:05:84"));
        }

      public ObservableCollection<BleDevice> Devices { get; set; }
    }

View(xaml) Удалите x:DataType = "xxx":

<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class = "MauiApp2.MainPage"
             xmlns:viewmodel = "clr-namespace:MauiApp2.ViewModel"
             xmlns:model = "clr-namespace:MauiApp2.Model"
             >
    <VerticalStackLayout>
        <CollectionView ItemsSource = "{Binding Devices}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text = "{Binding Name}"/>
                        <Label Text = "{Binding MacAddress}"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

Другие вопросы по теме