Как привязать ObservableCollection к FlexLayout в Xamarin?

Question

Имеется 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" });
        }
    }
}

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

Answer 1

Так как я вообще ничего не знаю про 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}" />

БЛОГ НА HUSL

Как привязать ObservableCollection к FlexLayout в Xamarin?

Ответы (1 шт):