1

Имеется FlexLayout

<FlexLayout x:Name="flexLayout" Wrap="Wrap" JustifyContent="SpaceEvenly" />

Как к нему привязать ObservableCollection ?

public partial class MainPage : ContentPage
{
    public ObservableCollection<Image> ImageCollection { get; set; }
            
    public MainPage()
    {
        InitializeComponent();
                
        ImageCollection = new ObservableCollection<Image>();
                
        for (int i = 0; i < 30; i++)
        {
            ImageCollection.Add(new Image { Source = "waterfront.jpg" });
        }
    }
}

Спасибо за ваше время.

1 ответ 1

0

Так как я вообще ничего не знаю про Xamarin и никогда не писал под эту платформу, а писал под WPF, а системы похожите, то я попробую просто угадать ответ читая документацию и примеры из гугла.

Первое, что вам надо сделать - это перестать создавать контролы к коде, а оставить эту работу самому UI движку.

Так же стоит иметь настроенным BindingContext. Вот документация, но несмотря на то что я в теме про привязки данных, я мало что понял. :)

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainViewModel();
    }
}
public class MainViewModel
{
    public ObservableCollection<string> Images { get; }
            
    public MainViewModel()
    {
        Images = new ObservableCollection<string>();
                
        for (int i = 0; i < 30; i++)
        {
            Images.Add("waterfront.jpg");
        }
    }
}

Если вы хотите динамически менять строки, а не только добавлять и удалять элементы коллекции, то придется реализовать вьюмодель с данными для картинки (см. MVVM и INotifyPropertyChanged). Но конкретно для данного примера это не обязательно.

Теперь осталось объяснить интерфейсу, что от него требуется.

<FlexLayout Wrap="Wrap"
            JustifyContent="SpaceEvenly"
            BindableLayout.ItemsSource="{Binding Images}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image>
                <Image.Source>
                    <FileImageSource File="{Binding}" />
                </Image.Source>
            </Image>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

Про картинки тоже есть документация.

Можно еще так попробовать, во всяком случае в WPF так можно.

<Image Source="{Binding}" />
12
  • 'BindableLayout.ItemsSource="{Binding Images}" ' здесь пишет **Не найден контекст данных для привязки **
    – mdlcode
    Commented 31 авг. 2021 в 17:33
  • @mdlcode исправил код в конструкторе
    – aepot
    Commented 31 авг. 2021 в 17:46
  • До сих пор проблема остается.
    – mdlcode
    Commented 31 авг. 2021 в 17:51
  • @mdlcode оно запускается и ругается, или не запускается? Может глюки, попробуйте закрыть ide, удалить папки bin и obj (картинку сохраните) и запуститься заново.
    – aepot
    Commented 31 авг. 2021 в 17:54
  • оно запускается. Попробовал удалить bin and obj и в главном проекте и в андроиде, но нет не помогло.
    – mdlcode
    Commented 31 авг. 2021 в 18:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.