wasting resources

Question

In my page, I assign the Map every time the page appears

    <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 TurbinePins}">
                            <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 TurbinePins}"
            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}" />
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>

This is not very efecient

  Map? MapView;
    public bool LoadedPins;
    [ObservableProperty]
    bool isExpanded;
    public ObservableCollection<TurbinePin> TurbinePins { get; set; } = [];
    public ObservableCollection<MapTypeButton> MapTypeButtons { get; set; } = [];
    public ChargingStationsMapPageViewModel(TurbinesService turbinesService, IServiceProvider serviceProvider)
    {
        MapDialogButtons();
        _turbineServices = turbinesService;
        _serviceProvider = serviceProvider;
    }
    private void MapDialogButtons()
    {
        MapTypeButtons.Add(new MapTypeButton
        {
            Caption = "Default",
            ImageName = FontAwesome.Road,
            Selected = true,
            MapNumber = 1
        });
        MapTypeButtons.Add(new MapTypeButton
        {
            Caption = "Satellite",
            MapNumber = 2,
            ImageName = FontAwesome.StreetView,
        });
    }
    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)
    {
        if (MapView != null)
        {
            MapView = map;
        }
        await LoadTurbinePins();
    }

I tried to check when the page reappears but for some reason the mapView is null again

Answer 1

Hello,

The reason for repeated page loading is that every time you display the page, the Appearing method is executed. In the ViewModel, each Pin is cleared and reloaded, which causes the map to reload the ItemSource and re-render each time.

If your requirement is to reload all map markers when the page is displayed, this is unavoidable.

I noticed that in your LoadTurbinePins method, all the data is added to the TurbinePins each time it is run. Have you tried running this code multiple times and found that the TurbinePins contain duplicate data? This duplicate data will also cause the Map control to refresh due to changes in the Itemsource data.

Before updating data, it is recommended that you check whether the data already exists or has been deleted to avoid multiple loading problems.

foreach (var pin in turbinePins)

{

  if(!TurbinePins.Contains(pin))

            TurbinePins.Add(pin);

}

Well since MVVM pattern you are not supposed to use any code behind, how I am supposed, to navigate the current location of the map?

The Pin type supports MarkerClicked events. You can place it in a Xaml page and convert the Sender to the Pin class in the event. Please refer to the following code.

<maps:Pin MarkerClicked="Pin_MarkerClicked"/>

 

private void Pin_MarkerClicked(object sender, PinClickedEventArgs e)

{

    var pin = sender as Pin;

    map.MoveToRegion(MapSpan.FromCenterAndRadius(pin.Location, Distance.FromKilometers(2)));

}

 

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.