CollectionView API image
Eduardo Gomez Romero
905
Reputation points
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
Sign in to answer