如何为 CollectionView 设置背景图片

Question

How to set background image for collectionview in Xamarin.Forms?

In Colletionview "Background" is a brush and I can not adjust the image source

Answer 1

You can try this method:

1. Set the CollectionView's background setting to transparent.

<CollectionView ItemsSource="{Binding Monkeys}" BackgroundColor="Transparent">

2. Put Grid on the upper level of the collection view.

<Grid>
   <CollectionView ItemsSource="{Binding Monkeys}" BackgroundColor="Transparent">
   ...
   </CollectionView>
</Grid>

3. put a image view at the same level of the collection view.

<Grid>
   <Image Source=""/>
   <CollectionView ItemsSource="{Binding Monkeys}" BackgroundColor="Transparent">
      <CollectionView.ItemTemplate>
      ...
   </CollectionView>
</Grid>

Page.xaml

<Grid>
   <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"/>
   <CollectionView ItemsSource="{Binding Monkeys}" BackgroundColor="Transparent">
      <CollectionView.ItemTemplate>
         <DataTemplate>
            <Grid Padding="10">
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <Image Grid.RowSpan="2"
                               Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="60"
                               WidthRequest="60" />
               <Label Grid.Column="1"
                               Text="{Binding Name}"
                               FontAttributes="Bold" />
               <Label Grid.Row="1"
                               Grid.Column="1"
                               Text="{Binding Location}"
                               FontAttributes="Italic"
                               VerticalOptions="End" />
            </Grid>
         </DataTemplate>
      </CollectionView.ItemTemplate>
   </CollectionView>
</Grid>

Screenshot