show an age when collectionview is done

Question

show an age when collectionview is done

Eduardo Gomez Romero 1,355

I have a page, that everything gets the data by binding

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

     <ActivityIndicator
         HorizontalOptions="CenterAndExpand"
         IsRunning="{Binding IsLoading}"
         IsVisible="{Binding IsLoading}"
         VerticalOptions="CenterAndExpand" />

     <Label
         Padding="0,5,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="0,0,0,20"
         HorizontalOptions="CenterAndExpand"
         ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURLs}">

         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>

         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="x:String">
                 <Image
                     Aspect="AspectFit"
                     Source="{Binding}"
                     VerticalOptions="Center" />
             </DataTemplate>
         </CollectionView.ItemTemplate>

     </CollectionView>
 </Grid>

 public partial class TurbineDetailPageViewModel: ObservableObject
 {
     [ObservableProperty]
     TurbinePin? selectedTurbine;
 }

in my SelectedTurbines, I have a list of turbines, that are store in azure

 <CollectionView
         Grid.Row="3"
         Margin="0,0,0,20"
         HorizontalOptions="CenterAndExpand"
         ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURLs}">

         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>

         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="x:String">
                 <Image
                     Aspect="AspectFit"
                     Source="{Binding}"
                     VerticalOptions="Center" />
             </DataTemplate>
         </CollectionView.ItemTemplate>

     </CollectionView>

so, my SelectedTubine has a list with a link to the container in azure

Question

How can I make the grid of the page visible, when all my pictures are visible in my collection page

Anonymous

2024-11-28T02:06:07.0666667+00:00

How can I make the grid of the page visible?

Which grid do you want to control visible or invisible?

when all my pictures are visible in my collection page

Do you have await/async method to get the pictures from Azure? If so, please share this part of code.

Eduardo Gomez Romero 1,355

No, the way that this is working, is with binding

class

   [FirestoreData]
   public partial class Turbine: ObservableObject
   {
       [FirestoreProperty]
       public string? Id { get; set; }

       [FirestoreProperty]
       public string? Country { get; set; }

       [FirestoreProperty]
       public string? Name { get; set; }

       [FirestoreProperty]
       public string? Address { get; set; }

       [FirestoreProperty]
       public double Power { get; set; } = 0.37;

       [FirestoreProperty]
       public double Co2EmissionOffset { get; set; } = 0.45;

       [FirestoreProperty]
       public double CapacityFactor { get; set; } = 0.25;

       [FirestoreProperty]
       public double Latitude { get; set; }

       [FirestoreProperty]
       public double Longitude { get; set; }

       [FirestoreProperty]
       public DateTime InstalationDateTime { get; set; }

       [FirestoreProperty]
       public List<string>? ImagesURLs { get; set; } = [];

       public string? StringifyInstalationDate => InstalationDateTime.ToString("D", CultureInfo.CurrentCulture);

       public string? Label => Name; // Keeps the display label for the map

       public Location Location => new(Latitude, Longitude);

       [FirestoreProperty]
       public double EnergyPerDay => RoundToDecimals(Power * CapacityFactor * 24);

       [FirestoreProperty]
       public double EnergyPerHour => RoundToDecimals(EnergyPerDay / 24, 4);

       [FirestoreProperty]
       public double EnergyPerSecond => RoundToDecimals(EnergyPerHour / 60, 5);

       [FirestoreProperty]
       public double RemovedCo2PerSecond => RoundToDecimals(EnergyPerSecond * Co2EmissionOffset, 5);

       [FirestoreProperty]
       public double DaysPassedSinceInstallation => (DateTime.Today - InstalationDateTime).Days;

       [FirestoreProperty]
       public double EnergyProduced => RoundToDecimals(EnergyPerDay * DaysPassedSinceInstallation);

       [FirestoreProperty]
       public double RemovedCo2Kilograms { get; set; }

       [ObservableProperty]
       public double finalCo2Removed;


       private static double RoundToDecimals(double value, int decimals = 2)
       {
           return Math.Round(value, decimals);
       }

   }

Serivece

public class TurbinesService(FirestoreService firestoreService, BlobServiceClient blobServiceClient)
{
    private const string collectionName = "turbines";
    private static System.Timers.Timer? _timer;
    private FirestoreDb? _firestoreDb;
    public ObservableCollection<TurbinePin> TurbinePins = [];
    public async Task InitializeAsync()
    {
        await firestoreService.InitializeFirestoreAsync();
        _firestoreDb = firestoreService.GetFirestoreDb();
        if (_firestoreDb != null)
        {
            await LoadOrInitializeTurbineAsync();
            //InitializeTimer();
        }
    }
    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),
                ImagesURLs = [],
            };
            turbine.RemovedCo2Kilograms = Math.Round(
                turbine.EnergyProduced * turbine.Co2EmissionOffset, 5);
            await AddTurbineImages(turbine);
            var turbineDocRef = turbinesRef.Document(turbine.Id);
            await turbineDocRef.SetAsync(turbine);
            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.ImagesURLs!.Clear();
        var containerClient = blobServiceClient.GetBlobContainerClient(turbine.Country!.ToLower());
        await foreach (var item in containerClient.GetBlobsAsync())
        {
            var blobClient = containerClient.GetBlobClient(item.Name);
            turbine.ImagesURLs!.Add(blobClient.Uri.ToString());
        }
    }
    private void AddToObservable(Turbine turbine)
    {
        TurbinePins.Add(new TurbinePin { Turbine = turbine });
    }
    public Task<ObservableCollection<TurbinePin>> GetTurbinePinsForUI(ICommand pinClickedCommand)
    {
        foreach (var pin in TurbinePins.OrderBy(
            t => t.Turbine?.InstalationDateTime))
        {
            pin.PinClickedCommand = pinClickedCommand;
        }
        return Task.FromResult(TurbinePins);
    }

DetailPage

 public partial class TurbineDetailPageViewModel: ObservableObject
 {
     [ObservableProperty]
     TurbinePin? selectedTurbine;
 }

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

     <ActivityIndicator
         HorizontalOptions="CenterAndExpand"
         IsRunning="{Binding IsLoading}"
         IsVisible="{Binding IsLoading}"
         VerticalOptions="CenterAndExpand" />

     <Label
         Padding="0,5,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="0,0,0,20"
         HorizontalOptions="CenterAndExpand"
         ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURLs}">

         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>

         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="x:String">
                 <Image
                     Aspect="AspectFit"
                     Source="{Binding}"
                     VerticalOptions="Center" />
             </DataTemplate>
         </CollectionView.ItemTemplate>

     </CollectionView>
 </Grid>

since this page is a grid, I want to make it visible, when my images are loaded

1 answer

Your answer

Anonymous

2024-11-28T02:06:07.0666667+00:00

How can I make the grid of the page visible?

Which grid do you want to control visible or invisible?

when all my pictures are visible in my collection page

Do you have await/async method to get the pictures from Azure? If so, please share this part of code.

Answer 1

Anonymous

Hello,

Firstly, open your InitializeAsync method, change the return type to Task<bool>, if the LoadOrInitializeTurbineAsync load finished, you can return the true value, others retrun false value.

public async Task<bool> InitializeAsync()
 {
     await firestoreService.InitializeFirestoreAsync();
     _firestoreDb = firestoreService.GetFirestoreDb();
     if (_firestoreDb != null) {
          await LoadOrInitializeTurbineAsync().ContinueWith((e) =>

         {

             return true;

         });
     }
     return false; 
   }

Then Open your ViewModel. add a isLoadFinished property, if set the return value to this IsLoadFinished property.

 [ObservableProperty]

 bool isLoadFinished;

 IsLoadFinished = await  turbinesService.InitializeAsync();

You can bind a IsVisible value to IsLoadFinished.

 <Grid
     IsVisible="{Binding IsLoadFinished}"
     RowDefinitions="Auto,Auto,*,*"
     RowSpacing="5">

Best Regards,

Leon Lu

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.

Eduardo Gomez Romero 1,355

I did it another way but is not working, the activity indicator never shows, and the grid is never shown

namespace METROWIND.ViewModel
{

    [QueryProperty(nameof(SelectedTurbine), "SelectedTurbine")]
    public partial class TurbineDetailPageViewModel: ObservableObject
    {
        [ObservableProperty]
        TurbinePin? selectedTurbine;


        [ObservableProperty]
        [NotifyPropertyChangedFor(nameof(isVisible))]
        bool isLoading = true;

        public bool isVisible => !IsLoading;
    }
}

<ContentPage
    x:Class="METROWIND.Views.TurbineDetailPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:model="clr-namespace:METROWIND.Models"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    Title="{x:Static rex:AppResource.TurbineDetails}"
    x:DataType="vm:TurbineDetailPageViewModel">

    <Grid
        IsVisible="{x:Binding isVisible}"
        RowDefinitions="Auto,Auto,*,*"
        RowSpacing="5">

        <ActivityIndicator
            Grid.RowSpan="4"
            HorizontalOptions="CenterAndExpand"
            IsRunning="{Binding IsLoading}"
            VerticalOptions="CenterAndExpand" />

        <Label
            Padding="0,5,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
            x:Name="ImagesCollection"
            Grid.Row="3"
            Margin="0,0,0,20"
            HorizontalOptions="CenterAndExpand"
            ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURLs}">

            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="5"
                    Orientation="Horizontal" />
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="x:String">
                    <Image
                        x:Name="CurrentImage"
                        Aspect="AspectFit"
                        Loaded="CurrentImage_Loaded"
                        Source="{Binding}"
                        VerticalOptions="Center" />
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>
    </Grid>


</ContentPage>

code behidnamespace METROWIND.Views;
public partial class TurbineDetailPage: ContentPage
{
    int ImagesLoaded = 0;
    public TurbineDetailPage(TurbineDetailPageViewModel turbineDetailVViewModel)
    {
        InitializeComponent();
        BindingContext = turbineDetailVViewModel;
    }
    private void CurrentImage_Loaded(object sender, EventArgs e)
    {
        ImagesLoaded++;
        if (BindingContext is TurbineDetailPageViewModel viewModel)
        {
            var totalImages = viewModel.SelectedTurbine!.Turbine!.ImagesURLs!.Count;
            if (ImagesLoaded == totalImages)
            {
                viewModel.IsLoading = false;
            }
        }
    }
}

Eduardo Gomez Romero 1,355 Reputation points

2024-12-03T22:44:09.4233333+00:00

why? is not showing
Anonymous

2024-12-06T01:49:35.2866667+00:00

Can you add a breakpoint in if (ImagesLoaded == totalImages)? Do you get the correct result? Is totalImages greater than 0?

If you have more information to add, please edit your question content.
Eduardo Gomez Romero 1,355 Reputation points

2024-12-06T23:30:15.8366667+00:00

here let me show you

https://reccloud.com/u/q3j09ib

I add a breakpoint, and I see when it hits and loop, but it still takes some time

I want to show the page when this is loaded with the images

Share via

show an age when collectionview is done

1 answer

Your answer