CollectionView API image

Question

For some reason my colletionView doesn't want to show the images

   <CollectionView
            Grid.Row="2"
            Margin="20"
            HorizontalOptions="CenterAndExpand"
            ItemsSource="{x:Binding SelectedTurbine.ImagesURL}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="5"
                    Orientation="Horizontal" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        HeightRequest="80"
                        Source="{x:Binding .}"
                        WidthRequest="80" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

And I am sure that my images cololectionview has the images, well at least the urls, and I put the URL directly I can see it

you can use this for testing

https://metrowindstorage.blob.core.windows.net/ecuador/charge_station.png

look

https://reccloud.com/u/2qwabpj

I load things here

 async Task LoadOrInitializeTurbineAsync() {
     var turbinesRef = _firestoreDb!.Collection(collectionName);
     var snapshot = await turbinesRef.GetSnapshotAsync();

     if (snapshot.Count == 0) {
         var turbine = new Turbine {
             Id = "EC-G-SB",
             Country = "Ecuador",
             Name = "Estación Ciudadela Simón Bolívar",
             Address = "Av. de las Américas, Guayaquil 090513, Ecuador",
             Latitude = -2.151993,
             Longitude = -79.886109,
             InstalationDateTime = new DateTime(2024, 8, 2, 0, 0, 0, DateTimeKind.Utc),
             ImagesURL = [],
         };

         turbine.RemovedCo2Kilograms = Math.Round(turbine.EnergyProduced * turbine.Co2EmissionOffset, 5);

         await AddTurbineImages(turbine);

         var turbineDocRef = turbinesRef.Document(turbine.Id);

         await turbineDocRef.SetAsync(turbine);
         // Add to observable collection if necessary
         AddToObservable(turbine);
     }
     else {
         foreach (var document in snapshot.Documents) {
             var turbine = document.ConvertTo<Turbine>();
             turbine.Id = document.Id;
             await AddTurbineImages(turbine);
             AddToObservable(turbine);
         }
     }
 }

 private async Task AddTurbineImages(Turbine turbine) {

     turbine.ImagesURL!.Clear();

     var containerClient = _blobServiceClient.GetBlobContainerClient(turbine.Country!.ToLower());
     await foreach (var item in containerClient.GetBlobsAsync()) {
         var blobClient = containerClient.GetBlobClient(item.Name);
         turbine.ImagesURL!.Add(blobClient.Uri.ToString());
     }
 }

I created this for debus purpoises So, I do not understand why

 <Grid
     RowDefinitions="Auto,Auto,*,*"
     RowSpacing="5">

     <Label
         Padding="0,30,0,0"
         FontAttributes="Bold"
         HorizontalTextAlignment="Center"
         Text="{x:Binding SelectedTurbine.Turbine.Name}"
         VerticalOptions="Center" />

     <Label
         Grid.Row="1"
         HorizontalTextAlignment="Center"
         Text="{x:Binding SelectedTurbine.Turbine.Address}"
         VerticalOptions="Center" />

     <Grid
         Grid.Row="2"
         Margin="2"
         Padding="10"
         ColumnDefinitions="*,*"
         ColumnSpacing="2"
         HorizontalOptions="Center"
         RowDefinitions="*,*,*,*,*"
         RowSpacing="2">

         <Border>
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineInstalationDateTime}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TubinePower}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="2">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineCapacity}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="3">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineEmission}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="4">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineCarbonRemoval}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.StringifyInstalationDate}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="1"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.Power,
                                  StringFormat='{0} kW'}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="2"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.CapacityFactor}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="3"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.Co2EmissionOffset,
                                  StringFormat='{0} kg CO₂/kWh'}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="4"
             Grid.Column="1">
             <Label
                 Padding="10,0,0,0"
                 FontAttributes="Bold"
                 FontSize="Medium"
                 Text="{x:Binding SelectedTurbine.Turbine.FinalCo2Removed,
                                  StringFormat='{0} kg CO₂'}"
                 VerticalOptions="Center" />
         </Border>
     </Grid>

     <CollectionView
         Grid.Row="3"
         Margin="20"
         HorizontalOptions="CenterAndExpand"
         ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURL}">
         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>

         <CollectionView.ItemTemplate>
             <DataTemplate>
                 <Image
                     HeightRequest="300"
                     Source="{x:Binding .,
                                        TargetNullValue=no_image.png}"
                     WidthRequest="300" />
             </DataTemplate>
         </CollectionView.ItemTemplate>

     </CollectionView>
 </Grid>

        void OnPinMarkerClicked(object turbine)
        {
            if (turbine != null)
            {
                // Handle the pin click event
                Shell.Current.GoToAsync($"{nameof(TurbineDetailPage)}",
                    true,
                    new Dictionary<string, object> {
                    { "SelectedTurbine", turbine }
                });
            };
        }
    }
}

.Net 9

Windows, Android

Answer 1

Hello,

After testing, this is due to the fact that the page does not allocate space for the CollectionView when the ItemSource of the CollectionView is empty. Therefore, after the ImageURL has data, the page will not display it.

Workaround: Instantiate the ImageURL in the constructor of the ViewModel so that the page to be pre-allocated for the CollectionView in advance.

public MyViewModel()

{

    _model.ImageURL = new List<string>();

}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.