帶有圖像 .net maui 的選擇器

Question

我應該創建一個選擇器，用它我可以 select 相關圖像支持的文本之一。 我只找到了允許選擇簡單文本的選擇器示例，我找不到解決方案。 是否可以？。 我附上了模型，這樣你就可以更好地理解我的意思。

小樣

我用過這段代碼，你能改編一下嗎？

<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>

Answer 1

這可以使用 ListView 或 CollectionView 來實現。 我為你做了一個例子。

在xaml定義一個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>

在 ViewModel 中，定義一個名為 ItemCollectionObservableCollection 的 ObservableCollection，它綁定了 listview itemsource 屬性。

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

同時新建一個 model class 文件：

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

    public Item()
    {
    }
}

這是使用 MVVM 結構創建 ListView 的簡單方法。 而你的用戶界面要復雜得多。 只使用ListView不一定能解決所有問題。 如果您還有任何問題，請隨時提問。

更多信息，您可以參考.NET Maui ListView 。