Как связать локальное встроенное изображение в ListView в формах Xamarin? - PullRequest
Новая
       38

Как связать локальное встроенное изображение в ListView в формах Xamarin?

0 голосов
/ 13 апреля 2020

У меня есть ListView в XAML и List<string>, который содержит локальные пути встроенных изображений. Я не могу показывать изображения в списке. Кстати, я могу показать как одно изображение

<Image Source="{local:ImageResource TypingApplication.Images.Icons.Search.png}" />

Но я не могу показать изображения в ListView. Вот мой код XAML 

<ListView x:Name="ListView"
            ItemsSource="{Binding ListItems}"
            IsEnabled="True"
            IsVisible="True"
            RowHeight="40"
            Opacity="0.9">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>                            
                <Image Source="{local:ImageResource TypingApplication.Images.Icons.{Binding .}}"/>
            </ViewCell>                        
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Я добавил ImageResourceExtension в Extensions папку и xmlns:local="clr-namespace:TypingApplication.Extensions" в XAML, как я уже говорил, я могу показать одиночное изображение, только есть проблема с ListView.

Вот мой C# код, который содержит List и Construcor 

public List<string> ListItems
{
    get
    {
        return new List<string>()
        {
            "Home.png",
            "Favorite.png",
            "Search.png"
        };
    }
}

public HomePage()
{
    InitializeComponent();
    this.BindingContext = this;
}

Обратите внимание, что я использую общие изображения в своем проекте. Я установил свойства всех изображений на Embedded resource в SolutionExplorer.

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

Если вы хотите добавить встроенное изображение в просмотр списка, согласно ответу json, у вашей привязки есть проблема, вы можете использовать IValueConverter, чтобы преобразовать путь изображения как правильный.

Я делаю один пример согласно к вашему коду вы можете посмотреть: 

<ListView HasUnevenRows="True" ItemsSource="{Binding ListItems}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Image
                                HeightRequest="100"
                                Source="{Binding ., Converter={StaticResource imageconverter}}"
                                WidthRequest="100" />
                        </StackLayout>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 <ContentPage.Resources>
    <local:imageconverter x:Key="imageconverter" />
</ContentPage.Resources>

Конвертер изображений: 

 public class imageconverter : IValueConverter
{
    public string Source { get; set; }
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
         Source = (string)value;

        if (Source == null)
            return null;

        // Do your translation lookup here, using whatever method you require

        var imageSource = ImageSource.FromResource("demo3."+Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
        return imageSource;
    }


    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Вы можете изменить demo3 как TypingApplication в соответствии с вашим кодом. 

public partial class Page14 : ContentPage
{
    public ObservableCollection<string> ListItems { get; set; }
    public Page14()
    {
        InitializeComponent();

        ListItems = new ObservableCollection<string>()
        {
            "image1.jpg","image2.png","image3.png"
        };

        this.BindingContext = this;
    }
}

В ответ Prateek я предлагаю вам изменить List <> на Observablecollection <>, поскольку он реализует интерфейс INotifyPropertyChanged, уведомляет об изменении данных.

https://docs.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8

1 голос
/ 13 апреля 2020
  • Измените список на ObservableCollection
  • IValueConverter, чтобы преобразовать привязку в нужное значение
  • Для свойства изображения должно быть установлено значение EmbeddedResource
public class EmbeddedToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string fileName && parameter is String assemblyName)
        {
            try
            {
                var imageSource = ImageSource.FromResource(assemblyName + "." + fileName, typeof(EmbeddedToImageSourceConverter).GetTypeInfo().Assembly);
                return imageSource;
            }
            catch (Exception)
            {
                return value;
            }
        }
        else
            return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

XAML 

<ContentPage.Resources>
    <local:EmbeddedToImageSourceConverter x:Key="converter"/>
</ContentPage.Resources>

В представлении списка добавьте обязательный ресурс конвертора wrto, который мы только что создали. 

<Image Source="{Binding ., Converter={StaticResource converter}, ConverterParameter='TypingApplication.Images.Icons'}"/>
...