XAML 带有图像的拾取器,net maui

yks3o0rb  于 2023-01-28  发布在  其他
关注(0)|答案(1)|浏览(147)

我应该创建一个选择器,我可以选择一个文本支持的相对图像。我只找到了允许选择简单文本的选择器的例子,我找不到一个解决方案。这是可能的吗?我附上了模型,所以你可以得到一个更好的想法我的意思。
mockup
我用了这个代码,你能修改一下吗?

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

fwzugrvs1#

这可以使用ListView或CollectionView来实现。我为您做了一个示例。
在XAML中定义一个列表视图:

<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,它列出了绑定到的视图项源属性。

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

相关问题