Using a list of items as an ItemsSource (instead of strings)

[Alfredo]

Hi!

I'm attempting to use your SfPicker control with a list of the following objects:

public class Car
{
    public string Brand {get; set;}
    public string Color {get; set;}
}

So my view model contains a list of these Car items:

public class PageViewModel
{
    public List<Car> MyCars = new List<Car>();
}

And I have the following page with a SfPicker control, which is bound to the MyCars list:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:main="clr-namespace:Playground.Maui._7._0"
    xmlns:sfpicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
    x:DataType="main:TestPageViewModel"
    x:Class="Playground.Maui._7._0.TestPage"
    Title="TestPage">
    <StackLayout VerticalOptions="FillAndExpand">
        <sfpicker:SfPicker>
            <sfpicker:SfPicker.Columns>
                <sfpicker:PickerColumn ItemsSource="{Binding MyCars}" />
            </sfpicker:SfPicker.Columns>
        </sfpicker:SfPicker>
    </StackLayout>
</ContentPage>

How do I display the Car.Name in the picker?  The list is coming out blank, and I couldn't find a way to do this in the documentation.

Thanks for your assistance!

Alfredo

[Indumathi Ravichandran]

Hi Alfredo,

Thank you for sharing your requirements with us. Based on the information provided, it appears that you are seeking to display picker items in a .NET MAUI SfPicker based on a specific property within the associated class. So, we recommend utilizing the DisplayMemberPath property to achieve the desired functionality. This property allows for the customization of displayed items based on specific properties within the underlying data source.

To assist you further, we have prepared a simple sample that demonstrates the implementation of this feature. You can access the sample via the attached link. Additionally, we have attached a code snippet for your reference.

Code snippet:

<picker:SfPicker

        x:Name="picker"

        Mode="Dialog" IsOpen="True" >

 

    <picker:SfPicker.Columns>

        <picker:PickerColumn

                ItemsSource="{Binding MyCars}" DisplayMemberPath="Brand"/>

    </picker:SfPicker.Columns>

    <picker:SfPicker.HeaderView>

        <picker:PickerHeaderView Height="40" Text="Car names"/>

    </picker:SfPicker.HeaderView>

    <picker:SfPicker.FooterView>

        <picker:PickerFooterView

                Height="40"

                OkButtonText="OK"

                ShowOkButton="True" />

    </picker:SfPicker.FooterView>

</picker:SfPicker>

 

 

private List<Car> myCars;

 

public event PropertyChangedEventHandler PropertyChanged;

public List<Car> MyCars

{

    get { return myCars; }

    set

    {

        if (myCars != value)

        {

            myCars = value;

            OnPropertyChanged("MyCars");

        }

    }

}

 

public ViewModel()

{

    MyCars = new List<Car>();

    MyCars.Add(new Car { Name = "Car", Brand = "Toyota", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Honda", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "BMW", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Audi", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Ferrari", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Ford", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Kia", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Nissan", Color = Colors.Red });

    MyCars.Add(new Car { Name = "Car", Brand = "Audi", Color = Colors.Red });

}

Screenshot:

We hope that this sample helps you. Please let us know if you need further assistance.

Regards,

Indumathi R

Attachment: PickerDisplayMemberPath_bd6814d9.zip

[Alfredo]

That worked perfectly.  I couldn't find that property in the documentation for the MAUI SfPicker, so your information was very helpful.

Thanks Indumathi, you guys do great work!

Alfredo

[Indumathi Ravichandran]

Hi Alfredo,

Thank you for the update. We are glad to know that the issue has been resolved at your end and we will update our UG documentation ASAP.

Regards,

Indumathi R