带有image .net maui的选择器

Question

我应该创建一个选择器，用它可以选择相对图像支持的文本之一。我只找到了允许选择简单文本的选择器的例子，我找不到解决方案。这可能吗?我附上了模型，这样你就能更好地理解我的意思。

模型我用过这个代码，你能修改吗?

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

同时创建一个新的模型类文件:

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

这是一种使用MVVM结构创建ListView的简单方法。你的UI要复杂得多。仅使用ListView可能无法解决所有问题。如果还有什么问题，请提出来。

更多信息，可以参考。net Maui ListView。