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 中我需要进入 Picture 以获取元素 imageSource，但我该怎么做呢？

Answer 1

您的页面似乎包含 CollectionView 中的可绑定布局。

其实你可以用list in list作为CollectionView的ItemsSource。

在代码后面

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 中的代码，它可以像以下屏幕截图一样正常工作。

我使用本地图像只是为了演示。