Xamarin Forms ViewModel со списком в списке - PullRequest
Новая
       14

Xamarin Forms ViewModel со списком в списке

0 голосов
/ 30 января 2020

У меня проблема. Я создал ViewModel, которая выполняет веб-вызов и собирает список с альбомами: List.

Вот класс Album: 

public class Album
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Image> Image { get; set; }
    public decimal Price { get; set; }
}

Как видите, альбом содержит еще один список с изображениями: 

public class Image
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Format { get; set; }
    public decimal Price { get; set; }
    public ImageSource imageSource { get; set; }
}

В xaml я создал CollectionView, который заполняется альбомами, но в альбомах я хочу показать все изображения, которые содержит альбом. Проблема в том, что я не знаю, как показать эти изображения из albumList<Album>. Вот мой текущий xaml: 

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid HeightRequest="86">
            <Grid.RowDefinitions>
                <RowDefinition Height="3"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="3"/>
            </Grid.RowDefinitions>

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

            <StackLayout Grid.Row="1" Grid.Column="3" Orientation="Horizontal">
                <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"
                        Text="{Binding Name}" TextColor="Black" FontAttributes="Bold" FontSize="18" />
                <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="EndAndExpand"
                        Text="{Binding Price, StringFormat='€ {0:F2}'}" TextColor="Black" FontSize="18"/>
            </StackLayout>

            <!--
            Show all the images -->

        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

Вот пример изображения результата, который я хочу: enter image description here

Как я могу создать этот макет?

ОБНОВЛЕНИЕ

Чтобы получить одно большее изображение, я удалил первое изображение из списка и создал изображение в другом столбце сетки. Но это не отображается. Вот xaml, который у меня сейчас есть: 

<CollectionView ItemsSource="{Binding albumList}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="86">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="3"/>
                </Grid.RowDefinitions>

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

                <Image  Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" 
                        Aspect="AspectFill">
                    <Image.Source>
                        <FileImageSource File="{Binding demoImage}" />
                    </Image.Source>
                </Image>

                <StackLayout Grid.Row="1" Grid.Column="3" Orientation="Horizontal">
                    <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"
                            Text="{Binding Name}" TextColor="Black" FontAttributes="Bold" FontSize="18" />
                    <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="EndAndExpand"
                            Text="{Binding Price, StringFormat='€ {0:F2}'}" TextColor="Black" FontSize="18"/>
                </StackLayout>



                <StackLayout  Grid.Row="2" Grid.RowSpan="2" Grid.Column="3" BindableLayout.ItemsSource="{Binding Images}" Orientation="Horizontal">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Image  HeightRequest="40" WidthRequest="55" Aspect="AspectFill" Source="{Binding imageSource}"/>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>




            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

demoImage - это другая переменная ImageSource в ViewModel, но demoImage не отображается. Как я могу это исправить?

1 Ответ

1 голос
/ 30 января 2020

Вы можете использовать Bindable Layouts . Это позволяет любому классу макета, производному от класса Layout, генерировать его содержимое путем привязки к коллекции элементов.

в xaml 

<StackLayout  Grid.Row="xx" Grid.Column="xx" BindableLayout.ItemsSource="{Binding Image}" Orientation="Horizontal">
   <BindableLayout.ItemTemplate>
      <DataTemplate>

          <Image  HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Source="{Binding imageSource}"/>

      </DataTemplate>
   </BindableLayout.ItemTemplate>
</StackLayout>

в коде, стоящем за 

public class MyImage
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Format { get; set; }
    public decimal Price { get; set; }
    public string MyImageSource { get; set; }
}

Примечание: я заметил, что вы определяете свой класс iamge как Image , который может иметь конфликт имен с Xamarin.Forms.Image. Поэтому вам лучше переименовать его в MyImage

Обновление 

<Image  Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Aspect="AspectFill" Source="{Binding demoImage}" />


public class Album
    {

        public Album()
        {
            DemoImage = Images[0].MyImageSource;
            Images.RemoveAt(0);
        }

        public int Id { get; set; }
        public string Name { get; set; }
        public ObservableCollection<MyImage> Images { get; set; }
        public string Price { get; set; }

        public string DemoImage { get; set; }
    }
...