icefive
icefive
CC#
Created by icefive on 4/1/2023 in #help
❔ Unable to bind to list in picker, MAUI
Hi there! I'm trying to bind a list of objects to a picker on a .NET MAUI View (I'm using MVVM) and running into trouble. The XAML page recognizes the list of objects but I cannot seem to access any of the properties such as the Name so that I can display the Name property in the list. So the end result is the proper number of objects in the picker with a blank display value. The class in question (Model):
using System.Xml.Serialization;

namespace ApplicationName.Model;

[XmlRoot(ElementName="language")]
public class Language
{
[XmlElement(ElementName="voices")]
public Voices Voices { get; set; }

[XmlElement(ElementName="lexicons")]
public Lexicons Lexicons { get; set; }

[XmlAttribute(AttributeName="name")]
public string Name { get; set; }

[XmlAttribute(AttributeName="id")]
public string Id { get; set; }

[XmlAttribute(AttributeName="enabled")]
public bool Enabled { get; set; }
}
using System.Xml.Serialization;

namespace ApplicationName.Model;

[XmlRoot(ElementName="language")]
public class Language
{
[XmlElement(ElementName="voices")]
public Voices Voices { get; set; }

[XmlElement(ElementName="lexicons")]
public Lexicons Lexicons { get; set; }

[XmlAttribute(AttributeName="name")]
public string Name { get; set; }

[XmlAttribute(AttributeName="id")]
public string Id { get; set; }

[XmlAttribute(AttributeName="enabled")]
public bool Enabled { get; set; }
}
the ViewModel retrieves the required data into a List of Langage objects which is an observable property:
using CommunityToolkit.Mvvm.ComponentModel;
using ApplicationName.Model;
using ApplicationName.Services;
using System.Collections.ObjectModel;

namespace ApplicationName.ViewModel;

public partial class SettingsPageViewModel : BaseViewModel
{
[ObservableProperty]
public Settings settingsObj;

[ObservableProperty]
public List<Language> langs;

SettingsService settingsService;
IConnectivity connectivity;

public SettingsPageViewModel(SettingsService settingsXMLServices, IConnectivity connectivitys)
{
this.settingsService = settingsXMLServices;
this.connectivity = connectivitys;

settingsObj = Task.Run(() => settingsService.GetSettingsAsync()).Result;

Langs = settingsObj.Languages.Language;
}
}
using CommunityToolkit.Mvvm.ComponentModel;
using ApplicationName.Model;
using ApplicationName.Services;
using System.Collections.ObjectModel;

namespace ApplicationName.ViewModel;

public partial class SettingsPageViewModel : BaseViewModel
{
[ObservableProperty]
public Settings settingsObj;

[ObservableProperty]
public List<Language> langs;

SettingsService settingsService;
IConnectivity connectivity;

public SettingsPageViewModel(SettingsService settingsXMLServices, IConnectivity connectivitys)
{
this.settingsService = settingsXMLServices;
this.connectivity = connectivitys;

settingsObj = Task.Run(() => settingsService.GetSettingsAsync()).Result;

Langs = settingsObj.Languages.Language;
}
}
and finally the View (it's quite large so I'll truncate to the important parts:
<?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"
xmlns:viewmodel="clr-namespace:AppliecationName.ViewModel"
x:DataType="viewmodel:SettingsPageViewModel"
x:Class="ApplicationName.Pages.SettingsPage"
Title="Settings"
x:Name="SettingsPage">

....

<StackLayout Grid.Column="0" Margin="10,0,10,0">
<Label Margin="0,0,0,0" FontAttributes="Bold" Text="Language:"/>
<Picker x:Name="LangSetting" SelectedIndexChanged="LangSetting_SelectedIndexChanged" ItemsSource="{Binding Langs, Mode=TwoWay}"
ItemDisplayBinding="{Binding Langs.Name}">
</Picker>
</StackLayout>
<?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"
xmlns:viewmodel="clr-namespace:AppliecationName.ViewModel"
x:DataType="viewmodel:SettingsPageViewModel"
x:Class="ApplicationName.Pages.SettingsPage"
Title="Settings"
x:Name="SettingsPage">

....

<StackLayout Grid.Column="0" Margin="10,0,10,0">
<Label Margin="0,0,0,0" FontAttributes="Bold" Text="Language:"/>
<Picker x:Name="LangSetting" SelectedIndexChanged="LangSetting_SelectedIndexChanged" ItemsSource="{Binding Langs, Mode=TwoWay}"
ItemDisplayBinding="{Binding Langs.Name}">
</Picker>
</StackLayout>
The above code gives an error 'the property 'Name' was not found in type List'1'. but runs anyway. The issue is with the ItemDisplayBinding, it cannot seem to see any of the properties inside the Langs objects. Intellisense will only show me 'Count' and 'Capacity'. I feel like I have everything else in order I just need to know how to get the code to see the Name property so I can populate the picker properly. Any help is greatly appreciated!
2 replies