search bar in shell behavior

Eduardo Gomez Romero 1,015

So, I need to modify, my behavior on desktop

I have the shell, with the Seach bar

<Window
    x:Class="METROWIND.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Window.TitleBar>
        <TitleBar
            Title="METROWIND"
            BackgroundColor="{x:AppThemeBinding Dark={x:StaticResource Black}, Light={x:StaticResource Primary}}"
            HeightRequest="60">
            <TitleBar.Content>
                <Border>
                    <SearchBar/>
                </Border>
            </TitleBar.Content>
            <TitleBar.TrailingContent>
                <ImageButton
                    Background="Transparent"
                    BorderWidth="0"
                    HeightRequest="36"
                    WidthRequest="36">
                    <ImageButton.Source>
                        <FontImageSource
                            FontFamily="SegoeMDL2"
                            Glyph="&#xE713;"
                            Size="16" />
                    </ImageButton.Source>
                </ImageButton>
            </TitleBar.TrailingContent>
        </TitleBar>
    </Window.TitleBar>

    public partial class App : Application
    {
        AppShell shell;

        public App(AppShell appShell)
        {

            SyncfusionLicenseProvider.RegisterLicense(AppConstants.SYNCFUSION_KEY);

            InitializeComponent();

            shell = appShell;
        }

        protected override Window CreateWindow(IActivationState? activationState)
        {
            Window window = new MainWindow(shell);

            return window;

        }

everything works fantastic, but what I want to do for desktop, is to make my collection of turbines globally available for you to search in the shell to open a new window WITH THE DETAIL

Also, I have a cahrgeStationPage, that display a combo box with the turbines to search, and mke the map go to that pin

    public partial class ChargingStationsMapPageViewModel(
        HttpService service, DeviceLanguageService deviceLanguage, TurbinesService turbinesService) :
        HomePageViewModel(service, deviceLanguage, turbinesService)
    {

        private Map? MapView;

        [ObservableProperty]
        bool isOptionsOpen;

        [ObservableProperty]
        bool isExpanded;

        [RelayCommand]
        private void Appearing(Map map)
        {

            MapView = map;
        }

        [RelayCommand]
        void ItemSelected(Turbine Turbine)
        {

            var mapSpan = MapSpan.FromCenterAndRadius(Turbine.Location,
                Distance.FromKilometers(0.4));

            MapView!.MoveToRegion(mapSpan);
            IsExpanded = false;
        }

        [RelayCommand]
        void OpenMenu()
        {

            IsOptionsOpen = true;
        }

        [RelayCommand]
        void ChangeMapType(int mapType)
        {
            MapView!.MapType = mapType switch
            {
                0 => MapType.Street,
                1 => MapType.Satellite,
                2 => MapType.Hybrid, // Example: Handle mapType 2
                _ => throw new ArgumentOutOfRangeException(nameof(mapType), mapType, "Invalid map type"),
            };
            IsOptionsOpen = false;
        }
    }
}

<ContentPage
    x:Class="METROWIND.Views.ChargingStationsMapPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constant="clr-namespace:METROWIND.Constants"
    xmlns:controls="clr-namespace:METROWIND.Controls"
    xmlns:expander="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander"
    xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:model="clr-namespace:METROWIND.Models"
    xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="stationsMapPage"
    x:DataType="vm:ChargingStationsMapPageViewModel">

    <ContentPage.Behaviors>
        <mct:EventToCommandBehavior
            Command="{x:Binding AppearingCommand}"
            CommandParameter="{x:Reference ChargingStationMap}"
            EventName="Appearing" />

    </ContentPage.Behaviors>

    <Grid>
        <Border Style="{x:StaticResource ChargeStationBorderStyle}">
            <expander:SfExpander
                AnimationDuration="200"
                IsExpanded="{x:Binding IsExpanded}">
                <expander:SfExpander.Header>
                    <Grid RowDefinitions="48">
                        <Label Style="{x:StaticResource ChooseStationLabelStyle}" />
                    </Grid>
                </expander:SfExpander.Header>
                <expander:SfExpander.Content>
                    <Grid
                        Padding="10,0,0,0"
                        RowDefinitions="Auto">
                        <CollectionView ItemsSource="{x:Binding Turbines}">
                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="model:TurbinePin">
                                    <Border Stroke="Transparent">
                                        <HorizontalStackLayout Spacing="10">
                                            <Label Style="{x:StaticResource ElectricBoltLabelStyle}" />
                                            <Label
                                                Style="{x:StaticResource AddressLabelStyle}"
                                                Text="{x:Binding Turbine.Name}" />
                                        </HorizontalStackLayout>
                                        <Border.Behaviors>
                                            <mct:TouchBehavior
                                                DefaultBackgroundColor="White"
                                                PressedBackgroundColor="CornflowerBlue" />
                                        </Border.Behaviors>
                                        <Border.GestureRecognizers>
                                            <TapGestureRecognizer
                                                Command="{x:Binding Source={x:Reference stationsMapPage},
                                                                    Path=BindingContext.ItemSelectedCommand}"
                                                CommandParameter="{x:Binding Turbine}" />
                                        </Border.GestureRecognizers>

                                    </Border>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Grid>
                </expander:SfExpander.Content>
            </expander:SfExpander>
        </Border>

        <maps:Map
            x:Name="ChargingStationMap"
            ItemsSource="{x:Binding Turbines}"
            VerticalOptions="FillAndExpand">
            <maps:Map.ItemTemplate>
                <DataTemplate x:DataType="model:TurbinePin">
                    <controls:CustomMapPin
                        Address="{x:Binding Turbine.Address}"
                        Images="{x:Binding Turbine.ImagesURLs}"
                        Label="{x:Binding Turbine.Name}"
                        Location="{x:Binding Turbine.Location}"
                        MarkerClickedCommand="{x:Binding PinClickedCommand}"
                        MarkerClickedCommandParameter="{x:Binding Turbine}" />
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>

        <Button
            x:Name="mapLayers"
            Command="{x:Binding OpenMenuCommand}"
            Style="{x:StaticResource MapButtonStyle}">
            <Button.ImageSource>
                <FontImageSource
                    FontFamily="ma"
                    Glyph="{x:Static constant:MaterialFonts.Layers}" />
            </Button.ImageSource>
        </Button>

        <popup:SfPopup
            IsOpen="{x:Binding IsOptionsOpen}"
            RelativeView="{x:Binding Source={x:Reference mapLayers}}"
            Style="{x:StaticResource ChargeStationPopupStyle}">
            <popup:SfPopup.PopupStyle>
                <popup:PopupStyle CornerRadius="8" />
            </popup:SfPopup.PopupStyle>
            <popup:SfPopup.ContentTemplate>
                <DataTemplate>
                    <VerticalStackLayout Spacing="10">
                        <controls:CustomImageButton
                            Caption="{x:Static rex:AppResource.Default}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="default_layer.png"
                            Parameters="0" />
                        <controls:CustomImageButton
                            Caption="{x:Static rex:AppResource.Satelite}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="satelite_layer.png"
                            Parameters="2" />
                    </VerticalStackLayout>
                </DataTemplate>
            </popup:SfPopup.ContentTemplate>
        </popup:SfPopup>
    </Grid>
</ContentPage>

On this particular page, the search box, should take care of this

How is working right now

I have a homePage

that grabs all the turbines from the service and put it in a collection view

        protected readonly TurbinesService _turbinesService;
        public ObservableCollection<TurbinePin> Turbines => _turbinesService.TurbinePins;
        public HomePageViewModel(HttpService service, DeviceLanguageService deviceLanguage, TurbinesService turbinesService)
        {
            deviceLanguageService = deviceLanguage;
            httpService = service;
            LoadNews();
            _turbinesService = turbinesService;
            OnPinMarkerClickedCommand = new Command<object>(OnPinMarkerClicked);
            _turbinesService.GetTurbinePinsForUI(OnPinMarkerClickedCommand);
        }
        public ObservableCollection<Article>? NewsList { get; set; } =
            [];
        async void LoadNews()
        {
            var language = deviceLanguageService.GetDeviceCultureInfo();
            var newsUrl = AppConstants.GetNewsUrl(language.TwoLetterISOLanguageName);
            NewsList!.Clear();
            var newsObj = await httpService.GetAsync<News>(newsUrl);
            foreach (var item in newsObj!.Articles!)
            {
                NewsList.Add(item);
            }
        }
        [RelayCommand]
        protected void ShowNewsDetail(Article article)
        {
            if (article != null)
            {
                Shell.Current.GoToAsync($"{nameof(ArticleDetailsPage)}",
                    true,
                    new Dictionary<string, object> {
                        { "articleObj", article }
                    });
            }
        }
        void OnPinMarkerClicked(object turbine)
        {
            if (turbine != null)
            {
                Shell.Current.GoToAsync($"{nameof(TurbineDetailPage)}",
                     true,
                     new Dictionary<string, object> {
                    { "SelectedTurbine", turbine }
                });
            };
        }
    }
}

and in my turbines collection page, I inherit from this page, in order to get the turbines

    public partial class TurbinesCollectionPageViewModel(HttpService service, DeviceLanguageService deviceLanguage,
        TurbinesService turbinesService) : HomePageViewModel(service, deviceLanguage, turbinesService)
    {

        CollectionView? TurbinesCollection;

        [ObservableProperty]
        Turbine? turbine;

        [RelayCommand]
        void PageEnter(CollectionView collectionView)
        {

            if (collectionView != null)
            {

                TurbinesCollection = collectionView;
            }
        }

        [RelayCommand]
        async Task SelectedItemChange(SfComboBox combo)
        {

            if (combo.SelectedIndex < 0)
            {
                return;
            }

            var item = Turbines.ElementAt(combo.SelectedIndex);
            TurbinesCollection?.ScrollTo(combo.SelectedIndex, -1, ScrollToPosition.Center);
            var inputView = combo.Children[1] as Entry;

#if ANDROID || IOS
            if (KeyboardExtensions.IsSoftKeyboardShowing(inputView!))
            {
                await Task.Delay(200);
                await inputView!.HideKeyboardAsync(default);
            }
#else
            await Task.CompletedTask;
#endif
        }
    }

and for I have a search box that can use to search

   <Grid
       Padding="20"
       RowDefinitions="Auto,*"
       RowSpacing="-30">
       <inputLayout:SfTextInputLayout Style="{x:StaticResource TurbineCollectionComboBoxStyle}">
           <editors:SfComboBox
               x:Name="combobox"
               DisplayMemberPath="Turbine.Name"
               ItemsSource="{x:Binding Turbines}"
               Style="{x:DynamicResource TurbinesCollectionComboBoxStyle}">
               <editors:SfComboBox.Behaviors>
                   <mct:EventToCommandBehavior
                       Command="{x:Binding SelectedItemChangeCommand}"
                       CommandParameter="{x:Binding Source={x:Reference combobox}}"
                       EventName="SelectionChanged" />
               </editors:SfComboBox.Behaviors>
           </editors:SfComboBox>
       </inputLayout:SfTextInputLayout>

       <CollectionView
           x:Name="TurbineCollection"
           Grid.Row="1"
           ItemsSource="{x:Binding Turbines}"
           SelectionMode="None"
           Style="{x:StaticResource TurbineCollectionViewStyle}">
           <CollectionView.ItemTemplate>
               <DataTemplate x:DataType="model:TurbinePin">
                   <Border BackgroundColor="#578D57">
                       <Border.StrokeShape>
                           <RoundRectangle CornerRadius="8" />
                       </Border.StrokeShape>
                       <VerticalStackLayout>
                           <Label
                               Style="{x:StaticResource TurbineDataLabelStyleStyle}"
                               Text="{x:Binding Turbine.Name}" />
                           <Label
                               Style="{x:StaticResource TurbineDataLabelStyleStyle}"
                               Text="{x:Binding Turbine.Address}" />
                           <Label
                               Style="{x:StaticResource C02LabelStyle}"
                               Text="{x:Binding Turbine.FinalCo2Removed,
                                                StringFormat='{0:F5} kg CO₂'}" />
                       </VerticalStackLayout>
                       <Border.GestureRecognizers>
                           <TapGestureRecognizer
                               Command="{x:Binding OnPinMarkerClickedCommand,
                                                   Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                               CommandParameter="{x:Binding}" />
                       </Border.GestureRecognizers>
                   </Border>
               </DataTemplate>
           </CollectionView.ItemTemplate>
       </CollectionView>

Accepted answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,181 Microsoft Vendor

Hello,

In Maui, the Window supports MVVM data binding. Therefore, you can use data binding to perform Command search and navigation in the SearchBar, which is no different from implementing this function in a regular page.

You can refer to the following code to learn how to bind ViewModel in Window.


<Window.BindingContext>

	<vm:MyViewModel/>

</Window.BindingContext>

<Window.TitleBar>

	<TitleBar

        ...>

		<SearchBar SearchCommand="{Binding SearchCommand}"/>

		...

	</TitleBar>

</Window.TitleBar>

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.

Eduardo Gomez Romero 1,015

Ok so I tried to bind my homeviewmode with my MainWindow and it didn't work

<Window
    x:Class="METROWIND.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:DataType="vm:HomePageViewModel"
    xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core">
    <Window.TitleBar>
        <TitleBar
            Title="METROWIND"
            BackgroundColor="#3C155F"
            HeightRequest="48"
            Icon="icon_win.png">
            <TitleBar.Content>
                <editors:SfComboBox
                    Margin="5"
                    ItemsSource="{x:Binding Turbines}"
                    IsEditable="True"
                    WidthRequest="650" />
            </TitleBar.Content>
        </TitleBar>
    </Window.TitleBar>
</Window>

    public partial class App: Application
    {
        AppShell shell;
        HomePageViewModel viewModel;

        public App(AppShell appShell, HomePageViewModel viewModel)
        {

            SyncfusionLicenseProvider.RegisterLicense(AppConstants.SYNCFUSION_KEY);

            InitializeComponent();

            shell = appShell;
            this.viewModel = viewModel;
        }

        protected override Window CreateWindow(IActivationState? activationState)
        {
            Window window = new MainWindow(shell, viewModel);

            return window;

        }
    }
}

So, what I want to do, is to have the list of my turbines in the combo box, when click on in, it will go to the charge station page and execute this method

[RelayCommand]
       void ItemSelected(Turbine Turbine)
       {
           var mapSpan = MapSpan.FromCenterAndRadius(Turbine.Location,
               Distance.FromKilometers(0.4));
           MapView!.MoveToRegion(mapSpan);
           IsExpanded = false;
       }

to be able to center on the map

<ContentPage
    x:Class="METROWIND.Views.ChargingStationsMapPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constant="clr-namespace:METROWIND.Constants"
    xmlns:controls="clr-namespace:METROWIND.Controls"
    xmlns:expander="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander"
    xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:model="clr-namespace:METROWIND.Models"
    xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="stationsMapPage"
    x:DataType="vm:ChargingStationsMapPageViewModel">
    <ContentPage.Behaviors>
        <mct:EventToCommandBehavior
            Command="{x:Binding AppearingCommand}"
            CommandParameter="{x:Reference ChargingStationMap}"
            EventName="Appearing" />
    </ContentPage.Behaviors>
    <Grid>
        <Border
            x:Name="MobileContent"
            Style="{x:StaticResource ChargeStationBorderStyle}">
            <expander:SfExpander
                AnimationDuration="200"
                IsExpanded="{x:Binding IsExpanded}">
                <expander:SfExpander.Header>
                    <Grid RowDefinitions="48">
                        <Label Style="{x:StaticResource ChooseStationLabelStyle}" />
                    </Grid>
                </expander:SfExpander.Header>
                <expander:SfExpander.Content>
                    <Grid
                        Padding="10,0,0,0"
                        RowDefinitions="Auto">
                        <CollectionView ItemsSource="{x:Binding Turbines}">
                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="model:TurbinePin">
                                    <Border Stroke="Transparent">
                                        <HorizontalStackLayout Spacing="10">
                                            <Label Style="{x:StaticResource ElectricBoltLabelStyle}" />
                                            <Label
                                                Style="{x:StaticResource AddressLabelStyle}"
                                                Text="{x:Binding Turbine.Name}" />
                                        </HorizontalStackLayout>
                                        <Border.Behaviors>
                                            <mct:TouchBehavior
                                                DefaultBackgroundColor="White"
                                                PressedBackgroundColor="CornflowerBlue" />
                                        </Border.Behaviors>
                                        <Border.GestureRecognizers>
                                            <TapGestureRecognizer
                                                Command="{x:Binding Source={x:Reference stationsMapPage},
                                                                    Path=BindingContext.ItemSelectedCommand}"
                                                CommandParameter="{x:Binding Turbine}" />
                                        </Border.GestureRecognizers>
                                    </Border>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Grid>
                </expander:SfExpander.Content>
            </expander:SfExpander>
        </Border>
        <maps:Map
            x:Name="ChargingStationMap"
            ItemsSource="{x:Binding Turbines}"
            VerticalOptions="FillAndExpand">
            <maps:Map.ItemTemplate>
                <DataTemplate x:DataType="model:TurbinePin">
                    <controls:CustomMapPin
                        Address="{x:Binding Turbine.Address}"
                        Images="{x:Binding Turbine.ImagesURLs}"
                        Label="{x:Binding Turbine.Name}"
                        Location="{x:Binding Turbine.Location}"
                        MarkerClickedCommand="{x:Binding PinClickedCommand}"
                        MarkerClickedCommandParameter="{x:Binding Turbine}" />
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>
        <Button
            x:Name="mapLayers"
            Command="{x:Binding OpenMenuCommand}"
            Style="{x:StaticResource MapButtonStyle}">
            <Button.ImageSource>
                <FontImageSource
                    FontFamily="ma"
                    Glyph="{x:Static constant:MaterialFonts.Layers}" />
            </Button.ImageSource>
        </Button>
        <popup:SfPopup
            IsOpen="{x:Binding IsOptionsOpen}"
            RelativeView="{x:Binding Source={x:Reference mapLayers}}"
            Style="{x:StaticResource ChargeStationPopupStyle}">
            <popup:SfPopup.PopupStyle>
                <popup:PopupStyle CornerRadius="8" />
            </popup:SfPopup.PopupStyle>
            <popup:SfPopup.ContentTemplate>
                <DataTemplate>
                    <VerticalStackLayout Spacing="10">
                        <controls:CustomImageButton
                            BorderColor="{x:Binding BorderColor}"
                            Caption="{x:Static rex:AppResource.Default}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="{x:Static constant:FontAwesome.Road}"
                            Parameters="0" />
                        <controls:CustomImageButton
                            BorderColor="{x:Binding BorderColor}"
                            Caption="{x:Static rex:AppResource.Satelite}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="{x:Static constant:FontAwesome.StreetView}"
                            Parameters="2" />
                    </VerticalStackLayout>
                </DataTemplate>
            </popup:SfPopup.ContentTemplate>
        </popup:SfPopup>
    </Grid>
</ContentPage>

but my list of turbines is null

User's image

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,181 Reputation points Microsoft Vendor

2024-11-26T07:06:41.8433333+00:00

Could you provide how you get Turbines information in ViewModel? Based on the current information, I can infer that after the ViewModel is initialized, the data in the Turbines collection is empty.

Eduardo Gomez Romero 1,015

yes, I don't understand why, because the turbines Ervie gets initialize in the HomeView Model

look

TurbineServices

namespace METROWIND.Services
{
    public class TurbinesService
    {
        private const string collectionName = "turbines";
        private readonly FirestoreService _firestoreService;
        private readonly BlobServiceClient _blobServiceClient;
        private static System.Timers.Timer? _timer;
        private FirestoreDb? _firestoreDb;

        public ObservableCollection<TurbinePin> TurbinePins { get; set; } = [];

        public TurbinesService(FirestoreService firestoreService, BlobServiceClient blobServiceClient)
        {
            _firestoreService = firestoreService;
            _blobServiceClient = blobServiceClient;
            InitializeAsync();
        }

        private async void 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 ObservableCollection<TurbinePin> GetTurbinePinsForUI(ICommand pinClickedCommand)
        {
            foreach (var pin in TurbinePins.OrderBy(t => t.Turbine?.InstalationDateTime))
            {
                pin.PinClickedCommand = pinClickedCommand;
            }
            return TurbinePins;
        }

        private void InitializeTimer()
        {
            _timer = new System.Timers.Timer(1000); // 1000 milliseconds = 1 second
            _timer.Elapsed += async (sender, e) => await UpdateCO2ValueAsync();
            _timer.AutoReset = true;
            _timer.Enabled = true;
        }

        private async Task UpdateCO2ValueAsync()
        {
            var turbineRef = _firestoreDb!.Collection(collectionName).Document("EC-G-SB");
            var snapshot = await turbineRef.GetSnapshotAsync();
            var turbine = snapshot.ConvertTo<Turbine>();

            var beforeUpdate = turbine.RemovedCo2Kilograms;

            turbine.FinalCo2Removed = beforeUpdate;

            turbine.RemovedCo2Kilograms = Math.Round(beforeUpdate + 0.0007, 5);

            await turbineRef.SetAsync(turbine, SetOptions.Overwrite);

            UpdateTurbineInCollection(turbine);
        }

        private void UpdateTurbineInCollection(Turbine updatedTurbine)
        {
            var existingTurbinePin = TurbinePins.FirstOrDefault(
                tp => tp.Turbine!.Id == updatedTurbine.Id);

            if (existingTurbinePin != null)
            {
                existingTurbinePin.Turbine!.RemovedCo2Kilograms = updatedTurbine.RemovedCo2Kilograms;

                existingTurbinePin.Turbine!.FinalCo2Removed = updatedTurbine.RemovedCo2Kilograms;
            }
        }
    }
}

HomeViewModel

  public partial class HomePageViewModel: ObservableObject
  {
      private readonly DeviceLanguageService deviceLanguageService;

      private readonly IServiceProvider provider;

      private readonly HttpService httpService;

      protected readonly TurbinesService _turbinesService;

      public AsyncRelayCommand<TurbinePin> OnPinMarkerClickedCommand { get; set; }

      public ObservableCollection<TurbinePin> Turbines => _turbinesService.TurbinePins;

      private bool _isNavigating = false;

      public HomePageViewModel(HttpService service, DeviceLanguageService
          deviceLanguage, TurbinesService turbinesService, IServiceProvider serviceProvider)
      {
          deviceLanguageService = deviceLanguage;

          httpService = service;

          provider = serviceProvider;

          _turbinesService = turbinesService;

          OnPinMarkerClickedCommand = new AsyncRelayCommand<TurbinePin>(OnPinMarkerClicked);

          _turbinesService.GetTurbinePinsForUI(OnPinMarkerClickedCommand);

          LoadNews().ConfigureAwait(false);

      }

the Stange part is that is to go to the chargestationpageViewmodel, that inherit from this page, you will have your turbine

  public partial class ChargingStationsMapPageViewModel: HomePageViewModel
  {
      private Map? MapView;

      public ObservableCollection<MapTypeButton> MapTypeButtons { get; set; } = [];

      [ObservableProperty]
      bool isOptionsOpen;

      [ObservableProperty]
      bool isExpanded;

      public ChargingStationsMapPageViewModel(
          HttpService service, DeviceLanguageService deviceLanguage,
          TurbinesService turbinesService, IServiceProvider serviceProvider) :
          base(service, deviceLanguage, turbinesService, serviceProvider)
      {
          MapTypeButtons.Add(new MapTypeButton
          {
              Caption = "Default",
              ImageName = FontAwesome.Road,
              Selected = true,
              MapNumber = 1
          });
          MapTypeButtons.Add(new MapTypeButton
          {
              Caption = "Satellite",
              MapNumber = 2,
              ImageName = FontAwesome.StreetView,
          });
      }

      [RelayCommand]
      private void Appearing(Map map)
      {
          MapView = map;
      }

      [RelayCommand]
      void ItemSelected(Turbine Turbine)
      {
          if (Turbine == null || MapView == null)
          {
              return;
          }
          var mapSpan = MapSpan.FromCenterAndRadius(Turbine.Location,
              Distance.FromKilometers(2));

          MapView!.MoveToRegion(mapSpan);
          IsExpanded = false;
      }

      [RelayCommand]
      void OpenMenu()
      {
          IsOptionsOpen = true;
      }

      [RelayCommand]
      void ChangeMapType(MapTypeButton mapTypeCustomButton)
      {
          if (mapTypeCustomButton == null)
          {
              return;
          }

          foreach (var mapTypeButton in MapTypeButtons)
          {
              mapTypeButton.Selected = false;
          }

          mapTypeCustomButton.Selected = true;

          switch (mapTypeCustomButton.MapNumber)
          {
              case 1:
                  MapView!.MapType = MapType.Street;
                  break;
              case 2:
                  MapView!.MapType = MapType.Satellite;
                  break;
          }
      }
  }

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,181 Reputation points Microsoft Vendor

2024-11-27T06:47:21.26+00:00

The InitializeAsync is an asynchronous method. Therefore, when the constructor is executed, the code will not wait for the asynchronous method to complete and will exit.

You can change the return type of private async void InitializeAsync() from void to Task and use the Wait() method to ensure that this method is executed to completion.

Eduardo Gomez Romero 1,015

still nothing

and I updated this method from my service

  public async Task<ObservableCollection<TurbinePin>> GetTurbinePinsForUI(ICommand pinClickedCommand)
  {
      foreach (var pin in TurbinePins.OrderBy(t => t.Turbine?.InstalationDateTime))
      {
          pin.PinClickedCommand = pinClickedCommand;
      }
      return await Task.FromResult(TurbinePins);
  }

   private async Task LoadTurbinePins()
   {
       await _turbineServices.InitializeAsync();
       var turbinePins =
           await _turbineServices.GetTurbinePinsForUI(PinMarkerClickedCommand);

       foreach (var pin in turbinePins)
       {
           TurbinePins.Add(pin);
       }
       Loaded = true;
   }
   [RelayCommand]
   private async Task AppearingAsync(Map map)
   {

       MapView = map;
       await LoadTurbinePins();

   }

nothing
my collection is empty

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,181 Reputation points Microsoft Vendor

2024-11-29T06:54:26.6933333+00:00

Could you please provide a minimized example with all irrelevant options removed that reproduces the issue?

When ViewModel inherits, the collection class that works for HomePageViewModel cannot work when the subclass is bound to CollectionView. Is this what you want to explain?

Share via

search bar in shell behavior

How is working right now

0 additional answers

Your answer