Picker with image .net maui-CodePudding

I should create a picker with which I can select one of the texts supported by the relative images. I’ve only found examples of pickers that allow the selection of simple texts, I can’t find a solution. Is it possible?. I attach the mockup so you can get a better idea of what I mean.

mockup

i used this code, can you adapt it?

<Picker x:Name="picker" 
                    Grid.Column="1"
                    Title="Cosenza"
                    TitleColor="White"
                    TextColor="White"
                    FontSize="25"
                    HorizontalOptions="Start"
                    VerticalOptions="Center">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>Cosenza</x:String>
                        <x:String>Castrolibero</x:String>
                        <x:String>Mendicino</x:String>
                        <x:String>San Pietro in Guarano</x:String>
                        <x:String>San Vincenzo la Costa</x:String>
                        <x:String>Rende</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker>

CodePudding user response：

That could be achieved using ListView or CollectionView. I made an example for you.

In xaml define a listview:

<ListView x:Name="listView" ItemsSource="{Binding ItemCollection}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <HorizontalStackLayout >
                    <Label 
                           Text="{Binding Name}" 
                           FontAttributes="Bold"
                           VerticalTextAlignment="Center"/>
                    <Image  
                           Source="{Binding ImageSource}" 
                           Aspect="AspectFill"
                           HeightRequest="30" 
                           WidthRequest="30" />
                </HorizontalStackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In ViewModel, define an ObservableCollection called ItemCollectionObservableCollection which listview itemsource property bound to.

public class MainPageViewModel
{
    public ObservableCollection<Item> ItemCollection { get; set; } = new ObservableCollection<Item>();

    public MainPageViewModel()
    {
        CreateCollection();
    }

    private void CreateCollection()
    {
        ItemCollection.Add(
            new Item
            {
                Name = "Flower",
                ImageSource = "flower.png"
            });
        ItemCollection.Add(
            new Item
            {
                Name = "Star",
                ImageSource = "star.png"
            });
    }
}

Also create a new model class file:

public class Item
{
    public string Name { get; set; }
    public string ImageSource { get; set; }

    public Item()
    {
    }
}

That's an easy way using MVVM structure to create a ListView. And you UI is much more complicated. Only use ListView may not solve all questions. If you still have any question, feel free to ask.

For more info, you could refer to .NET Maui ListView.