Weird disappearing error

Question

Weird disappearing error

Eduardo Gomez Romero 1,335

I have a very weird error where everything disappears after a while

and I think the fault is here

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="METROWIND.Views.NewsPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constants="clr-namespace:METROWIND.Constants"
    xmlns:ffimageloading="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
    xmlns:models="clr-namespace:METROWIND.Models"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:DataType="vm:NewsPageViewModel">

    <Grid
        Padding="5,0,5,0">

        <CollectionView
            x:Name="NewsList"
            ItemsSource="{x:Binding ArticleList}"
            SelectionMode="None">

            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="10"
                    Orientation="Vertical" />
            </CollectionView.ItemsLayout>

            <CollectionView.EmptyViewTemplate>
                <DataTemplate>
                    <VerticalStackLayout
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="CenterAndExpand">
                        <ActivityIndicator IsRunning="True" />
                        <Label
                            HorizontalOptions="Center"
                            Text="{x:Static rex:AppResource.Loading}" />
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.EmptyViewTemplate>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:Article">
                    <Border
                        Padding="10"
                        StrokeShape="RoundRectangle 20"
                        StrokeThickness="1">
                        <Grid
                            Padding="10"
                            ColumnDefinitions="Auto,*"
                            RowDefinitions="250,Auto,Auto,Auto,Auto"
                            RowSpacing="10">
                            <ffimageloading:CachedImage
                                Grid.ColumnSpan="2"
                                Aspect="AspectFill"
                                BitmapOptimizations="True"
                                CacheDuration="30"
                                ErrorPlaceholder="no_image.png"
                                LoadingPlaceholder="loading.gif"
                                Source="{x:Binding UrlToImage,
                                                   TargetNullValue=no_image.png}" />
                            <!--  Title  -->
                            <Label
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                FontAttributes="Bold"
                                FontSize="Large"
                                Text="{x:Binding Title}" />
                            <!--  Source and Icon  -->
                            <HorizontalStackLayout
                                Grid.Row="2"
                                Grid.ColumnSpan="2"
                                Spacing="10">
                                <Label
                                    FontFamily="ma"
                                    FontSize="Large"
                                    Text="{x:Static constants:MaterialFonts.Newspaper}"
                                    VerticalTextAlignment="Center" />
                                <Label
                                    Text="{x:Binding Source.Name}"
                                    VerticalTextAlignment="Center" />
                            </HorizontalStackLayout>
                            <!--  Author and Date  -->
                            <Grid
                                Grid.Row="3"
                                Grid.ColumnSpan="2"
                                ColumnDefinitions="Auto,*,Auto"
                                ColumnSpacing="10">
                                <Label
                                    FontFamily="ma"
                                    FontSize="Large"
                                    Text="{x:Static constants:MaterialFonts.Person}" />
                                <Label
                                    Grid.Column="1"
                                    Text="{x:Binding Author,
                                                     TargetNullValue='Author unknown'}"
                                    VerticalTextAlignment="Center" />
                                <Label
                                    Grid.Column="2"
                                    Text="{x:Binding PublishedAt}" />
                            </Grid>
                        </Grid>
                        <Border.GestureRecognizers>
                            <TapGestureRecognizer
                                Command="{Binding ShowNewsDetailCommand, Source={RelativeSource AncestorType={x:Type vm:NewsPageViewModel}}, x:DataType=vm:NewsPageViewModel}"
                                CommandParameter="{x:Binding .}" />
                        </Border.GestureRecognizers>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

vm

namespace METROWIND.ViewModel
{
    public partial class NewsPageViewModel: ObservableObject
    {
        public ObservableCollection<Article> ArticleList { get; set; } = [];

        readonly IHttpService _httpService;
        readonly IDeviceLanguageService _deviceLanguageService;
        readonly IAppService _appService;

        public NewsPageViewModel(IDeviceLanguageService deviceLanguageService,
            IHttpService httpService,
            IAppService appService)
        {
            _deviceLanguageService = deviceLanguageService;
            _httpService = httpService;
            _appService = appService;
            LoadNews();

        }

        public async void LoadNews()
        {
            var language = _deviceLanguageService.GetDeviceCultureInfo();
            var newsUrl = AppConstants.GetNewsUrl(language.TwoLetterISOLanguageName);

            var newsObj = await _httpService.GetAsync<News>(newsUrl);

            if (newsObj != null && newsObj.Articles != null)
            {
                foreach (var article in newsObj.Articles)
                {
                    ArticleList.Add(article);
                }
            }
        }

        [RelayCommand]
        async Task ShowNewsDetail(Article article)
        {
            if (article != null)
            {
                await _appService.NavigateToPage($"{nameof(ArticleDetailsPage)}",
                     new Dictionary<string, object> {{ "articleObj", article }
                });
            }
        }
    }
}

error

https://reccloud.com/u/rpo2p6u

in this video I show the app working on debug on an emulator, but when I use it in my phone for a while, everything disappears, and I don't get any errors

on the emulator also occurs

https://reccloud.com/u/lgh9z56

i do not know if has something do with the binding mismatch error that I get in the station page

  <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 ItemSelectedCommand,
                                                                  Source={RelativeSource AncestorType={x:Type vm:ChargingStationsMapPageViewModel}},
                                                                  x:DataType=vm:ChargingStationsMapPageViewModel}"
                                              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>

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

      <popup:SfPopup
          x:Name="MapChangeTypuPopUp"
          RelativeView="{x:Reference mapLayers}"
          Style="{x:StaticResource ChargeStationPopupStyle}"
          WidthRequest="{x:Binding Width,
                                   Source={x:Reference mapLayers}}">
          <popup:SfPopup.PopupStyle>
              <popup:PopupStyle CornerRadius="8" />
          </popup:SfPopup.PopupStyle>
          <popup:SfPopup.ContentTemplate>
              <DataTemplate x:DataType="vm:ChargingStationsMapPageViewModel">
                  <VerticalStackLayout Spacing="10">
                      <VerticalStackLayout BindableLayout.ItemsSource="{x:Binding MapTypeButtons}">
                          <BindableLayout.ItemTemplate>
                              <DataTemplate x:DataType="model:MapTypeButton">
                                  <controls:CustomImageButton
                                      BorderColor="{Binding SelectedColor}"
                                      Caption="{Binding Caption}"
                                      ClickCommand="{Binding ChangeMapTypeCommand, Source={RelativeSource AncestorType={x:Type vm:ChargingStationsMapPageViewModel}}, x:DataType=vm:ChargingStationsMapPageViewModel}"
                                      ImageName="{Binding ImageName}"
                                      MapNumber="{x:Binding MapNumber}"
                                      Parameter="{Binding}" />
                              </DataTemplate>
                          </BindableLayout.ItemTemplate>
                      </VerticalStackLayout>
                  </VerticalStackLayout>
              </DataTemplate>
          </popup:SfPopup.ContentTemplate>
      </popup:SfPopup>
  </Grid>

vm

public partial class ChargingStationsMapPageViewModel: AppShellViewModel
{
    public SfPopup? MapDialogPopUp;

    public Map? MapView;

    [ObservableProperty]
    bool isExpanded;

    public ChargingStationsMapPageViewModel(
        ITurbineService turbineService, IAppService
        appService, IServiceProvider serviceProvider,
        NoInternetPopUp noInternetPopUp,
        ICommandHandler commandHandler, IConnectivity connectivity)
        : base(turbineService, appService, serviceProvider, commandHandler, connectivity, noInternetPopUp)
    {
        MapDialogButtons();

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

    private void MapDialogButtons()
    {
        MapTypeButtons.Add(new MapTypeButton
        {
            Caption = AppResource.Default,
            ImageName = MaterialFonts.Map,
            Selected = true,
            MapNumber = 1
        });
        MapTypeButtons.Add(new MapTypeButton
        {
            Caption = AppResource.Satelite,
            MapNumber = 2,
            ImageName = MaterialFonts.Satellite,
        });
    }

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

        MapView!.MoveToRegion(mapSpan);
    }

    [RelayCommand]

    void OpenMapLayerOptions()
    {
        MapDialogPopUp!.IsOpen = 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;
        }

        MapDialogPopUp!.IsOpen = false;
    }
}

this view model inherits from the shell

        public AppShellViewModel(ITurbineService turbineService, IAppService appService,
            IServiceProvider serviceProvider, ICommandHandler commandHandler,
            IConnectivity connectivity, NoInternetPopUp noInternetPopUp)
        {
            _serviceProvider = serviceProvider;
            _turbineService = turbineService;
            _appService = appService;
            _commandHandler = commandHandler;
            _connectivity = connectivity;
            _noInternetPopUp = noInternetPopUp;

            _turbineService.NoInternet += TurbineService_NoInternet;

            InitializeCommand();

            _turbineService.SetPinClickHandler(this);

            if (!_isConnectivityEventRegistered)
            {
                _connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
                _isConnectivityEventRegistered = true;
            }
        }

        private void TurbineService_NoInternet()
        {
            _noInternetPopUp.Show();
        }

        private void InitializeCommand()
        {
            _commandHandler.SetPinClickedCommand(new Command<TurbinePin>(async (pin) =>
            await PinMarkerClicked(pin)));
        }

        [RelayCommand]
        async Task Appearing(AppShell appShell)
        {
            _shell = appShell;

            try
            {
                if (TurbinePins.Count == 0 && !isInitializing)
                {
                    isInitializing = true;
                    await _turbineService.InitializeAsync();
                    isInitializing = false;
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine($"Initialization failed: {ex.Message}");
                isInitializing = false;
            }
        }

        private void Connectivity_ConnectivityChanged(object? sender, ConnectivityChangedEventArgs e)
        {
            HandleConnectivityChangeAsync();
        }

        private async void HandleConnectivityChangeAsync()
        {
            if (_connectivity.NetworkAccess == NetworkAccess.Internet)
            {
                _noInternetPopUp.IsOpen = false;

                try
                {
                    if (TurbinePins.Count == 0 && !isInitializing)
                    {
                        isInitializing = true;
                        await _turbineService.InitializeAsync();
                        isInitializing = false;
                    }
                }
                catch (Exception ex)
                {
                    Debug.WriteLine($"Initialization failed: {ex.Message}");
                    isInitializing = false;
                }
            }
            else
            {
                TurbineService_NoInternet();
            }
        }

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

        [RelayCommand]
        void ToggleSwitch()
        {
            if (IsCompactMode)
            {
                _shell!.FlyoutWidth = 65;
            }
            else
            {
                _shell!.FlyoutWidth = 300;
            }

            IsMenuPopUpOpen = false;
        }

        public async Task PinMarkerClicked(TurbinePin turbine)
        {
            if (turbine != null)
            {
#if ANDROID || IOS
                await _appService.NavigateToPage(nameof(TurbineDetailPage),
            new Dictionary<string, object> { { "SelectedTurbine", turbine } });
#elif WINDOWS || MACCATALYST
                var viewModel = _serviceProvider.GetRequiredService<TurbineDetailPageViewModel>();

                viewModel.SelectedTurbine = turbine;

                var page = _serviceProvider.GetRequiredService<TurbineDetailPage>();

                page.BindingContext = viewModel;

                var secondWindow = new Window(page);

                var existingWindow = Application.Current!.Windows.FirstOrDefault(
                    w => w.Page is TurbineDetailPage);

                if (existingWindow != null)
                {
                    Application.Current?.ActivateWindow(existingWindow);
                }
                else
                {
                    Application.Current!.OpenWindow(secondWindow);
                }
#endif
            }
        }

ps: btw why the loading text is on the top, in the xmal you can see that is on the center

Could you please check the code

https://github.com/eduardoagr/METROWIND/tree/MetroWind-1-2

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-20T08:25:21.58+00:00

i do not know if has something do with the binding mismatch error that I get in the station page

Firstly, please run your application in the windows, then you can also try to use this XAML data binding diagnostics - Visual Studio (Windows) tools in Visual Studio to detect and resolve data binding errors in XAML projects.

Can you see Binding failures button in the application toolbar? I test above demo, it is working without any failures.

in this video I show the app working on debug on an emulator, but when I use it in my phone for a while, everything disappears, and I don't get any errors

Please disable your hot reload in the VS(UnCheck XAML Hot Reload, WinUI (including .NET MAUI), and Android and iOS (.NET MAUI) options, click the OK), then, uninstall your application in your devices, run it in emulators or devices, will this issue appear? You can generate an APK as well, install it in your devices, will this issue appear?
Eduardo Gomez Romero 1,335 Reputation points

2025-01-20T10:49:25.6+00:00

In do does not understand why the hot reload would affect the app

Eduardo Gomez Romero 1,335

I disable the hot reload, and got the same error, everything disappears. This happens in the news page

Can you please check the new page to see if to see something suspicious

NnewPageVM

    public partial class NewsPageViewModel: ObservableObject
    {
        public ObservableCollection<Article> ArticleList { get; set; } = [];
        readonly IHttpService _httpService;
        readonly IDeviceLanguageService _deviceLanguageService;
        readonly IAppService _appService;
        public NewsPageViewModel(IDeviceLanguageService deviceLanguageService,
            IHttpService httpService,
            IAppService appService)
        {
            _deviceLanguageService = deviceLanguageService;
            _httpService = httpService;
            _appService = appService;
            LoadNews();
        }
        public async void LoadNews()
        {
            var language = _deviceLanguageService.GetDeviceCultureInfo();
            var newsUrl = AppConstants.GetNewsUrl(language.TwoLetterISOLanguageName);
            var newsObj = await _httpService.GetAsync<News>(newsUrl);
            if (newsObj != null && newsObj.Articles != null)
            {
                foreach (var article in newsObj.Articles)
                {
                    ArticleList.Add(article);
                }
            }
        }
        [RelayCommand]
        async Task ShowNewsDetail(Article article)
        {
            if (article != null)
            {
                await _appService.NavigateToPage($"{nameof(ArticleDetailsPage)}",
                     new Dictionary<string, object> {{ "articleObj", article }
                });
            }
        }
    }
}

xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="METROWIND.Views.NewsPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constants="clr-namespace:METROWIND.Constants"
    xmlns:ffimageloading="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
    xmlns:models="clr-namespace:METROWIND.Models"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:DataType="vm:NewsPageViewModel">

    <Grid
        Padding="5,0,5,0"
        RowDefinitions="Auto,*">

        <CollectionView
            x:Name="NewsList"
            Grid.Row="1"
            ItemsSource="{x:Binding ArticleList}"
            VerticalOptions="Center">

            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="10"
                    Orientation="Vertical" />
            </CollectionView.ItemsLayout>

            <CollectionView.EmptyViewTemplate>
                <DataTemplate>
                    <VerticalStackLayout>
                        <ActivityIndicator IsRunning="True" />
                        <Label
                            HorizontalOptions="Center"
                            Text="{x:Static rex:AppResource.Loading}" />
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.EmptyViewTemplate>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:Article">
                    <Border
                        Padding="10"
                        StrokeShape="RoundRectangle 20"
                        StrokeThickness="1">
                        <Grid
                            Padding="10"
                            ColumnDefinitions="Auto,*"
                            RowDefinitions="250,Auto,Auto,Auto,Auto"
                            RowSpacing="10">
                            <ffimageloading:CachedImage
                                Grid.ColumnSpan="2"
                                Aspect="{OnIdiom Desktop=AspectFill, Phone=AspectFit}"
                                BitmapOptimizations="True"
                                CacheDuration="60"
                                DownsampleToViewSize="True"
                                ErrorPlaceholder="no_image.png"
                                LoadingPlaceholder="loading.gif"
                                Source="{x:Binding UrlToImage,
                                                   TargetNullValue=no_image.png}" />
                            <!--  Title  -->
                            <Label
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                FontAttributes="Bold"
                                FontSize="Large"
                                Text="{x:Binding Title}" />
                            <!--  Source and Icon  -->
                            <HorizontalStackLayout
                                Grid.Row="2"
                                Grid.ColumnSpan="2"
                                Spacing="10">
                                <Label
                                    FontFamily="ma"
                                    FontSize="Large"
                                    Text="{x:Static constants:MaterialFonts.Newspaper}"
                                    VerticalTextAlignment="Center" />
                                <Label
                                    Text="{x:Binding Source.Name}"
                                    VerticalTextAlignment="Center" />
                            </HorizontalStackLayout>
                            <!--  Author and Date  -->
                            <Grid
                                Grid.Row="3"
                                Grid.ColumnSpan="2"
                                ColumnDefinitions="Auto,*,Auto"
                                ColumnSpacing="10">
                                <Label
                                    FontFamily="ma"
                                    FontSize="Large"
                                    Text="{x:Static constants:MaterialFonts.Person}" />
                                <Label
                                    Grid.Column="1"
                                    Text="{x:Binding Author,
                                                     TargetNullValue='Author unknown'}"
                                    VerticalTextAlignment="Center" />
                                <Label
                                    Grid.Column="2"
                                    Text="{x:Binding PublishedAt}" />
                            </Grid>
                        </Grid>
                        <Border.GestureRecognizers>
                            <TapGestureRecognizer
                                Command="{Binding ShowNewsDetailCommand, Source={RelativeSource AncestorType={x:Type vm:NewsPageViewModel}}, x:DataType=vm:NewsPageViewModel}"
                                CommandParameter="{x:Binding .}" />
                        </Border.GestureRecognizers>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

NewPage code behind (Only for desktop)

I use this becouse I have a title bar on the app

public partial class NewsPage: ContentPage
{
    private readonly NewsPageViewModel pageViewModel;

    public NewsPage(NewsPageViewModel newsPageViewModel)
    {
        InitializeComponent();
        pageViewModel = newsPageViewModel;
        BindingContext = newsPageViewModel;

        var tb = new AppTitleBar();
        tb.UpdateProperties(pageViewModel.ArticleList,
            "Title", "Title", false, OccurrenceMode.None);
        App.WindowInstance!.TitleBar = tb;

        tb.ComboBox.SelectionChanged += ComboBox_SelectionChanged;
    }

    private void ComboBox_SelectionChanged(object? sender, SelectionChangedEventArgs e)
    {
        if (sender is SfComboBox combobox)
        {
            NewsList.ScrollTo(combobox.SelectedIndex, -1, ScrollToPosition.Center);
        }

    }

Eduardo Gomez Romero 1,335

by the way this is the service I use for navigating

    public class AppService: IAppService
    {
        public async Task NavigateBack(string quary = "..")
        {
            await Shell.Current.GoToAsync(quary);
        }

        public async Task NavigateToPage(string pageName)
        {
            await Shell.Current.GoToAsync(pageName);
        }

        public async Task NavigateToPage(string pageName, Dictionary<string, object> objectToPass, bool animate = true)
        {
            await Shell.Current.GoToAsync(pageName, animate, objectToPass);
        }

        public async Task ShowAlert(string title, string message, string confirm = "OK")
        {
            await Shell.Current.DisplayAlert(title, message, confirm);
        }
    }
}

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T06:04:45.8+00:00

I checked news page, there are no binding issues or other suspicious. However, open your AppShell.xaml , you set the different flyout for different device type, but you do not use OnIdiom to control it, When you start the application, you will have duplicated views, am I right? You can remove the code about Flyout for Desktop, Then test it in your android devices, will you get the same issue?

By the way, if you have any updates, please add this additional information to your question.

Eduardo Gomez Romero 1,335

it doesn't meter if I have this?

<Shell
    x:Class="METROWIND.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:METROWIND.Controls"
    xmlns:local="clr-namespace:METROWIND"
    xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:views="clr-namespace:METROWIND.Views"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="shelly"
    x:DataType="vm:AppShellViewModel"
    Shell.FlyoutBehavior="{OnIdiom Desktop=Locked,
                                   Phone=Disabled}">

because this will prevent the flyout to be use in phones

Also, in code behind I have this

public AppShell(AppShellViewModel appShellViewModel)
{
    InitializeComponent();
    BindingContext = appShellViewModel;

    Routing.RegisterRoute(nameof(TurbineDetailPage), typeof(TurbineDetailPage));
    Routing.RegisterRoute(nameof(ArticleDetailsPage), typeof(ArticleDetailsPage));

    RenderBasedOnDevice(DeviceInfo.Idiom);
}
public void RenderBasedOnDevice(DeviceIdiom idiom)
{
    var itemsToRemove = new List<ShellItem>();

    foreach (var item in Items)
    {
        if ((idiom == DeviceIdiom.Phone && item is FlyoutItem) ||
            (idiom == DeviceIdiom.Desktop && item is TabBar))
        {
            itemsToRemove.Add(item);
        }
    }

    foreach (var item in itemsToRemove)
    {
        Items.Remove(item);
    }

I tried removing the Desktop as you told me and got the same bug

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T08:54:21.3366667+00:00

Shell.FlyoutBehavior="{OnIdiom Desktop=Locked, Phone=Disabled}"

This will control flyout behavior.

RenderBasedOnDevice(DeviceInfo.Idiom);

Please remove this code as well. Just keep the code about TabBar for Phone And test it in your Android device.

Eduardo Gomez Romero 1,335

I was testing it, without the flyout item for desktop, and got the same weird bug, I think is the Api fault, because I put a debug WriteLine

  async Task ShowNewsDetail(string Url)
  {
      if (!string.IsNullOrEmpty(Url))
      {
          Debug.WriteLine($"Navigating to ArticleDetailsPage with URL: {Url}");
          await _appService.NavigateToPage($"{nameof(ArticleDetailsPage)}",
              new Dictionary<string, object> { { "articleURL", Url } }
          );
      }

And I can see the word error

[0:] Navigating to ArticleDetailsPage with URL: https://www.yankodesign.com/2025/01/14/tesla-cybertruck-with-a-solar-panel-wrap-gives-it-an-extra-15-miles-of-range/
[WindowOnBackDispatcher] OnBackInvokedCallback is not enabled for the application.
[WindowOnBackDispatcher] Set 'android:enableOnBackInvokedCallback="true"' in the application manifest.
[yname.metrowind] Explicit concurrent mark compact GC freed 160KB AllocSpace bytes, 4(80KB) LOS objects, 50% free, 18MB/36MB, paused 697us,7.360ms total 44.601ms
Thread started:  #67
The thread 67 has exited with code 0 (0x0).
Thread finished:  #67
[EGL_emulation] app_time_stats: avg=21.73ms min=1.62ms max=131.78ms count=40
[chromium] [INFO:CONSOLE(2)] "JQMIGRATE: Migrate is installed, version 3.4.1", source: https://www.yankodesign.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1 (2)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7222236028814181 (223)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7222236028814181 (223)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?c[0:] Navigating to ArticleDetailsPage with URL: https://www.yankodesign.com/2025/01/14/tesla-cybertruck-with-a-solar-panel-wrap-gives-it-an-extra-15-miles-of-range/
[WindowOnBackDispatcher] OnBackInvokedCallback is not enabled for the application.
[WindowOnBackDispatcher] Set 'android:enableOnBackInvokedCallback="true"' in the application manifest.
[yname.metrowind] Explicit concurrent mark compact GC freed 160KB AllocSpace bytes, 4(80KB) LOS objects, 50% free, 18MB/36MB, paused 697us,7.360ms total 44.601ms
Thread started:  #67
The thread 67 has exited with code 0 (0x0).
Thread finished:  #67
[EGL_emulation] app_time_stats: avg=21.73ms min=1.62ms max=131.78ms count=40
[chromium] [INFO:CONSOLE(2)] "JQMIGRATE: Migrate is installed, version 3.4.1", source: https://www.yankodesign.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1 (2)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7222236028814181 (223)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7222236028814181 (223)
[chromium] [INFO:CONSOLE(223)] "Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0", source: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?c

"Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0"

 <Shell.TitleView>
     <Grid ColumnDefinitions="*,*">
         <Label
             Grid.Column="1"
             Style="{x:StaticResource ShareLabelStyle}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer
                     Comm <Shell.TitleView>
     <Grid ColumnDefinitions="*,*">
         <Label
             Grid.Column="1"
             Style="{x:StaticResource ShareLabelStyle}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer
                     Command="{x:Binding OpenShareMenuCommand}" />
             </Label.GestureRecognizers>
         </Label>
         <Label Style="{x:StaticResource ArticleDetailLabelStyle}" />
     </Grid>
 </Shell.TitleView>
 <WebView Source="{x:Binding Url}" />
and="{x:Binding OpenShareMenuCommand}" />
             </Label.GestureRecognizers>
         </Label>

         <Label Style="{x:StaticResource ArticleDetailLabelStyle}" />

     </Grid>

 </Shell.TitleView>

 <WebView Source="{x:Binding Url}" />

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T09:29:28.1+00:00
Before testing following content, please update your nuget packages to the latest. And make a test.

I was testing it, without the flyout item for desktop, and got the same weird bug, I think is the Api fault,

Please remove following code. Just open a tested contentpage, will you get the same issue?

await share.RequestAsync(new ShareTextRequest { Uri = article.Url, Title = "Check out this article" });

Eduardo Gomez Romero 1,335

I do no understand how this

    [RelayCommand]
    async Task OpenShareMenu()
    {
        await share.RequestAsync(new ShareTextRequest
        {
            Uri = Url,
            Title = "Check out this article"
        });
    }

}

will affect anything, this is just for the titlevew

These are the pieces you need to test

Model

 public class Source
 {

     [JsonPropertyName("id")]
     public string? Id { get; set; }

     [JsonPropertyName("name")]
     public string? Name { get; set; }
 }


 public class Article
 {

     [JsonPropertyName("id")]
     public int Id { get; set; }

     [JsonPropertyName("source")]
     public Source? Source { get; set; }

     [JsonPropertyName("author")]
     public string? Author { get; set; }

     [JsonPropertyName("title")]
     public string? Title { get; set; }

     [JsonPropertyName("description")]
     public string? Description { get; set; }

     [JsonPropertyName("url")]
     public string? Url { get; set; }

     [JsonPropertyName("urlToImage")]
     public string? UrlToImage { get; set; }

     [JsonPropertyName("publishedAt")]
     public DateTime? PublishedAt { get; set; }

     [JsonPropertyName("content")]
     public string? Content { get; set; }
 }


 public class News
 {

     [JsonPropertyName("status")]
     public string? Status { get; set; }

     [JsonPropertyName("totalResults")]
     public int? TotalResults { get; set; }

     [JsonPropertyName("articles")]
     public IList<Article>? Articles { get; set; }
 }

HttpService and interface

public class HttpService: IHttpService
{
    readonly HttpClient _httpClient;
    readonly ILogger<HttpService> _logger;


    public HttpService(HttpClient httpClient, ILogger<HttpService> logger)
    {
        _httpClient = httpClient;
        _logger = logger;

        // Set User-Agent header once in the constructor
        _httpClient.DefaultRequestHeaders.Add(
            "User-Agent",
            "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html)");

    }

    public async Task<T?> GetAsync<T>(string url)
    {
        try
        {
            var response = await _httpClient.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var data = await response.Content.ReadFromJsonAsync<T>();
            return data;
        }
        catch (HttpRequestException ex)
        {
            _logger.LogError("HttpRequestException in HttpService: {Message}", ex.Message);
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Unexpected error in HttpService");
        }

        return default;
    }

    public interface IHttpService
    {
        Task<T?> GetAsync<T>(string url);
    }

News URL

 public class AppConstants
 {

     public const string
         NEWS_URL = "https://newsapi.org/v2/everything?q=renewable+energy&apiKey=5963dd2ef5ff48b9bfa99e902bd55716";

do not worry about the Api key, this is not very sensitive my other keys

NewsVM

  public ObservableCollection<Article> ArticleList { get; set; } = [];

  readonly IHttpService _httpService;
  readonly IDeviceLanguageService _deviceLanguageService;
  readonly IAppService _appService;

  public NewsPageViewModel(IDeviceLanguageService deviceLanguageService,
      IHttpService httpService,
      IAppService appService)
  {
      _deviceLanguageService = deviceLanguageService;
      _httpService = httpService;
      _appService = appService;
      LoadNews();

  }

  public async void LoadNews()
  {
      var language = _deviceLanguageService.GetDeviceCultureInfo();
      var newsUrl = AppConstants.GetNewsUrl(language.TwoLetterISOLanguageName);

      var newsObj = await _httpService.GetAsync<News>(newsUrl);

      if (newsObj != null && newsObj.Articles != null)
      {
          foreach (var article in newsObj.Articles)
          {
              ArticleList.Add(article);
          }
      }
  }

  [RelayCommand]
  async Task ShowNewsDetail(string Url)
  {
      if (!string.IsNullOrEmpty(Url))
      {
          Debug.WriteLine($"Navigating to ArticleDetailsPage with URL: {Url}");
          await _appService.NavigateToPage($"{nameof(ArticleDetailsPage)}",
              new Dictionary<string, object> { { "articleURL", Url } }
          );
      }

To avoid errors, pass use as the lang for the news

the xxaml you have it on top

Accepted answer

0 additional answers

Your answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-20T08:25:21.58+00:00

i do not know if has something do with the binding mismatch error that I get in the station page

Firstly, please run your application in the windows, then you can also try to use this XAML data binding diagnostics - Visual Studio (Windows) tools in Visual Studio to detect and resolve data binding errors in XAML projects.

Can you see Binding failures button in the application toolbar? I test above demo, it is working without any failures.

in this video I show the app working on debug on an emulator, but when I use it in my phone for a while, everything disappears, and I don't get any errors

Please disable your hot reload in the VS(UnCheck XAML Hot Reload, WinUI (including .NET MAUI), and Android and iOS (.NET MAUI) options, click the OK), then, uninstall your application in your devices, run it in emulators or devices, will this issue appear? You can generate an APK as well, install it in your devices, will this issue appear?
Eduardo Gomez Romero 1,335 Reputation points

2025-01-20T10:49:25.6+00:00

In do does not understand why the hot reload would affect the app
Eduardo Gomez Romero 1,335 Reputation points

2025-01-20T12:02:36.1233333+00:00

by the way this is the service I use for navigating

public class AppService: IAppService { public async Task NavigateBack(string quary = "..") { await Shell.Current.GoToAsync(quary); } public async Task NavigateToPage(string pageName) { await Shell.Current.GoToAsync(pageName); } public async Task NavigateToPage(string pageName, Dictionary<string, object> objectToPass, bool animate = true) { await Shell.Current.GoToAsync(pageName, animate, objectToPass); } public async Task ShowAlert(string title, string message, string confirm = "OK") { await Shell.Current.DisplayAlert(title, message, confirm); } } }
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T06:04:45.8+00:00

I checked news page, there are no binding issues or other suspicious. However, open your AppShell.xaml , you set the different flyout for different device type, but you do not use OnIdiom to control it, When you start the application, you will have duplicated views, am I right? You can remove the code about Flyout for Desktop, Then test it in your android devices, will you get the same issue?

By the way, if you have any updates, please add this additional information to your question.
Eduardo Gomez Romero 1,335 Reputation points

2025-01-21T08:45:59.2633333+00:00

it doesn't meter if I have this?

<Shell x:Class="METROWIND.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:METROWIND.Controls" xmlns:local="clr-namespace:METROWIND" xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup" xmlns:rex="clr-namespace:METROWIND.Resources" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" xmlns:views="clr-namespace:METROWIND.Views" xmlns:vm="clr-namespace:METROWIND.ViewModel" x:Name="shelly" x:DataType="vm:AppShellViewModel" Shell.FlyoutBehavior="{OnIdiom Desktop=Locked, Phone=Disabled}">

because this will prevent the flyout to be use in phones

Also, in code behind I have this

public AppShell(AppShellViewModel appShellViewModel) { InitializeComponent(); BindingContext = appShellViewModel; Routing.RegisterRoute(nameof(TurbineDetailPage), typeof(TurbineDetailPage)); Routing.RegisterRoute(nameof(ArticleDetailsPage), typeof(ArticleDetailsPage)); RenderBasedOnDevice(DeviceInfo.Idiom); } public void RenderBasedOnDevice(DeviceIdiom idiom) { var itemsToRemove = new List<ShellItem>(); foreach (var item in Items) { if ((idiom == DeviceIdiom.Phone && item is FlyoutItem) || (idiom == DeviceIdiom.Desktop && item is TabBar)) { itemsToRemove.Add(item); } } foreach (var item in itemsToRemove) { Items.Remove(item); }

I tried removing the Desktop as you told me and got the same bug
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T08:54:21.3366667+00:00

Shell.FlyoutBehavior="{OnIdiom Desktop=Locked, Phone=Disabled}"

This will control flyout behavior.

RenderBasedOnDevice(DeviceInfo.Idiom);

Please remove this code as well. Just keep the code about TabBar for Phone And test it in your Android device.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-21T09:29:28.1+00:00

Before testing following content, please update your nuget packages to the latest. And make a test.

I was testing it, without the flyout item for desktop, and got the same weird bug, I think is the Api fault,

Please remove following code. Just open a tested contentpage, will you get the same issue?

await share.RequestAsync(new ShareTextRequest { Uri = article.Url, Title = "Check out this article" });

Answer 1

Hello,

I find this issue is related to the <ffimageloading:CachedImage>, If you have many items in the CollectionView, and click <ffimageloading:CachedImage> when it is loading, you will get white and empty view.

Then, I use Image to instead of ffimageloading:CachedImage like following code in the NewsPage.xaml

     <!--<ffimageloading:CachedImage
                                Grid.ColumnSpan="2"
                                Aspect="{OnIdiom Desktop=AspectFill, Phone=AspectFit}"
                                BitmapOptimizations="True"
                                CacheDuration="60"
                                DownsampleToViewSize="True"
                                ErrorPlaceholder="no_image.png"
                                LoadingPlaceholder="loading.gif"
                                Source="{x:Binding UrlToImage,
                                                   TargetNullValue=no_image.png}" />-->
<Image
                                 Grid.ColumnSpan="2"
                                 Aspect="{OnIdiom Desktop=AspectFill, Phone=AspectFit}"                              
                                 Source="{x:Binding UrlToImage,
                                 TargetNullValue=no_image.png}"
/>

Then, if you use webview to display content, please open MauiProgram.cs, add following webviewhandler to enable the JS and all mixed content showing in CreateMauiApp method.

Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.Settings.JavaScriptEnabled=true;
            handler.PlatformView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
            handler.PlatformView.SetWebViewClient(new MyWebViewClient());
 
#endif
        });


#if ANDROID
internal class MyWebViewClient : WebViewClient
{
    public override void OnReceivedSslError(Android.Webkit.WebView? view, SslErrorHandler? handler, SslError? error)
    {
        base.OnReceivedSslError(view, handler, error);
        handler.Cancel();
        view.LoadData("<html><body><h2>Error loading page</h2></body></html>", "text/html", "UTF-8");
    }
}
#endif

And add these namespace.

#if ANDROID
 
using Android.Net.Http;
using Android.Webkit;
#endif

In the end, open the ArticleDetailsPage.xaml.cs, if this page disappearing, you can set the webview.source=null, after that, GC will execute,

public partial class ArticleDetailsPage : ContentPage
{
    public ArticleDetailsPage(ArticleDetailsPageViewModel articleDetailsPageViewModel)
    {
        InitializeComponent();
        BindingContext = articleDetailsPageViewModel;
    }
 
    protected override void OnDisappearing()
    {
        base.OnDisappearing();
 
        if (webView != null)
        {                 
            webView.Source = null;                    
        }
    }

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,335 Reputation points

2025-01-22T11:20:55.9133333+00:00

thank you so much
Eduardo Gomez Romero 1,335 Reputation points

2025-01-22T19:57:19.1266667+00:00

btw why everything disappeared if I go to another page?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 80,851 Reputation points Microsoft External Staff

2025-01-23T05:40:38.32+00:00

I think ffimageloading:CachedImage' cannot be recycled, you can open an issue in the [FFImageLoading github repo ](https://github.com/luberda-molinet/FFImageLoading/issues). If you have many cachedImages in CollectionView, it will cause MAUI renderer issue(Not enough memory), I check the logcat, I find lots of GC information like Explicit concurrent copying GC freed 1674(207KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 7MB/14MB, paused 68us total 45.262ms. But I cannot find the source code of ffimageloading:CachedImage', I cannot confirm it.

By the way, do you have other issues in this compile binding help, if not, please accept it as answer, it will help others who have similar issue.

Share via

Weird disappearing error

0 additional answers

Your answer