Xamarin Forms Привязать ImageSource к элементу внутри элемента

Question

У меня проблема. У меня есть следующий список:

Set AlbumsForList = new Set
{
    Name = album.Name,
    Pictures = new SetPictures
    {
        Picture = new List<SetPicture>()
    },
    Price = album.Price
};

albumList.Add(AlbumsForList);

И SetPicture имеет элемент с именем imageSource, который я хочу привязать к изображению. Вот XAML:

<CollectionView ItemsSource="{Binding albumList}" SelectionMode="Single"
    SelectionChanged="OnCollectionViewSelectionChanged">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="100" VerticalOptions="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="10"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="3"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="3"/>
                </Grid.ColumnDefinitions>

                <ff:CachedImage  Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Aspect="AspectFill" Source="{Binding DemoImage}" />

                <Label Grid.Row="0" Grid.Column="3" VerticalTextAlignment="Center" VerticalOptions="Center"  
                        HorizontalOptions="StartAndExpand" Text="{Binding Name}" TextColor="Black" FontAttributes="Bold" 
                        FontSize="18" />
                <ScrollView Orientation="Horizontal" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2">
                    <StackLayout BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Horizontal">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <ff:CachedImage  HeightRequest="40" WidthRequest="55" Aspect="AspectFill" Source="{Binding imageSource}"/>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>
                </ScrollView>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

И, наконец, вот мои классы:

[XmlRoot(ElementName = "picture")]
public class SinglePicture
{
    [XmlElement(ElementName = "id")]
    public string Id { get; set; }
    [XmlElement(ElementName = "name")]
    public string Name { get; set; }

    [XmlElement(ElementName = "sizes")]
    public Sizes Sizes { get; set; }
    [XmlIgnore]
    public ImageSource imageSource { get; set; }
}

[XmlRoot(ElementName = "pictures")]
public class SinglePictures
{
    [XmlElement(ElementName = "picture")]
    public List<SinglePicture> Picture { get; set; }
}

[XmlRoot(ElementName = "picture")]
public class SetPicture
{
    [XmlElement(ElementName = "id")]
    public string Id { get; set; }
    [XmlElement(ElementName = "name")]
    public string Name { get; set; }
    [XmlElement(ElementName = "size")]
    public string Size { get; set; }
    [XmlElement(ElementName = "price")]
    public string Price { get; set; }
    [XmlElement(ElementName = "quantity")]
    public string Quantity { get; set; }
    [XmlElement(ElementName = "sizes")]
    public Sizes Sizes { get; set; }
    [XmlIgnore]
    public ImageSource imageSource { get; set; }
}

[XmlRoot(ElementName = "pictures")]
public class SetPictures
{
    [XmlElement(ElementName = "picture")]
    public List<SetPicture> Picture { get; set; }
}

[XmlRoot(ElementName = "set")]
public class Set
{
    [XmlElement(ElementName = "name")]
    public string Name { get; set; }
    [XmlElement(ElementName = "price")]
    public string Price { get; set; }
    [XmlElement(ElementName = "pictures")]
    public SetPictures Pictures { get; set; }
    [XmlIgnore]
    public ImageSource DemoImage { get; set; }
}

[XmlRoot(ElementName = "sets")]
public class Sets
{
    [XmlElement(ElementName = "set")]
    public List<Set> Set { get; set; }
}

[XmlRoot(ElementName = "size")]
public class Size
{
    [XmlElement(ElementName = "id")]
    public string Id { get; set; }
    [XmlElement(ElementName = "name")]
    public string Name { get; set; }
    [XmlElement(ElementName = "price")]
    public string Price { get; set; }
}

[XmlRoot(ElementName = "sizes")]
public class Sizes
{
    [XmlElement(ElementName = "size")]
    public List<Size> Size { get; set; }
}

[XmlRoot(ElementName = "data")]
public class Data
{
    [XmlElement(ElementName = "sets")]
    public Sets Sets { get; set; }
    [XmlElement(ElementName = "pictures")]
    public SinglePictures Pictures { get; set; }
}

Теперь мы уже внутри listAlbums, поэтому я определил Binding Pictures, но затем в CachedImage Мне нужно go внутри Picture, чтобы получить элемент imageSource, но как я могу это сделать?

Answer 1

Кажется, что ваша страница содержит привязываемый макет в CollectionView.

На самом деле, вы можете использовать список в списке в качестве ItemsSource of CollectionView.

в коде позади

public class VM_CounterList
{


    public ObservableCollection<AlbumsForList> albumList { get; set; }


    public VM_CounterList()
    {
        albumList = new ObservableCollection<AlbumsForList>() {


             new AlbumsForList(){ 

                 Name="No.1",
                 DemoImage = "screen.png",
                 Pictures = new ObservableCollection<MyImage>{ new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" } },
             },

             new AlbumsForList(){

                 Name="No.1",
                 DemoImage = "screen.png",
                 Pictures = new ObservableCollection<MyImage>{ new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" } },
             },

             new AlbumsForList(){

                 Name="No.1",
                 DemoImage = "screen.png",
                 Pictures = new ObservableCollection<MyImage>{ new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" } },
             },

             new AlbumsForList(){

                 Name="No.1",
                 DemoImage = "screen.png",
                 Pictures = new ObservableCollection<MyImage>{ new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" },new MyImage() {ImageSource="screen.png" } },
             },

        };



    }

}

public class AlbumsForList : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public string Name { get; set; }

    public ObservableCollection<MyImage> Pictures { get; set; }

    private string demoImage;
    public string DemoImage
    {
        set
        {
            if (demoImage != value)
            {
                demoImage = value;
                NotifyPropertyChanged("DemoImage");
            }
        }
        get { return demoImage; }
    }
}


public class MyImage : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }



    private string imageSource;
    public string ImageSource
    {
        set
        {
            if (imageSource != value)
            {
                imageSource = value;
                NotifyPropertyChanged("ImageSource");
            }
        }
        get { return imageSource; }
    }
}

<DataTemplate>
    <Image  HeightRequest="40" WidthRequest="55" Aspect="AspectFill" Source="{Binding ImageSource}"/>
</DataTemplate>

Чтобы вам не нужно было менять код в xaml, он отлично работает, как на следующем снимке экрана.

Я использовал локальное изображение только для демонстрации.