Issue with Displaying LiveCharts2 in C# MAUI Project: Unexpected Window Closure When Navigating to Search Page

Question

I am trying to display a chart in the GUI window of a C# MAUI project using LiveCharts2. I have installed the LiveChartsCore.SkiaSharpView.Maui package in my project and written the necessary code. The application starts without any issues. However, as soon as I click on the "go to search page" button, the window unexpectedly closes. So far, I have figured out that the error is caused by this block in the XAML file, because everything works fine up to this point. However, I don’t know how to solve it.

         <chart:CartesianChart Series="{Binding Series}"
                              HeightRequest="300" 
                              WidthRequest="400" />

Here is the SearchPage.xaml file that contains this block:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Hexe.Views"
             xmlns:chart="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             x:Class="Hexe.Views.SearchPage"
             Title="Search">
    <StackLayout Padding="10">
        <Label Text="This is the Search Page" 
               FontSize="24"
               HorizontalOptions="Center"/>
        <Entry Placeholder="Search..."
               Text="{Binding SearchQuery}" />

        <Button Text="Search"`your text`
                Command="{Binding SearchCommand}"/>

        <!-- ListView zur Anzeige der Suchergebnisse -->
        <ListView ItemsSource="{Binding SearchResults}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}"
                              Detail="{Binding Description}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <chart:CartesianChart Series="{Binding Series}"
                              HeightRequest="300" 
                              WidthRequest="400" />


    </StackLayout>
</ContentPage>`

Here is the content of MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Hexe"
             x:Class="Hexe.Views.MainPage"
    Title="Main Page">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="#3498db"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="HeightRequest" Value="50"/>
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Padding="10">
        <Label Text="Welcome to the Main Page"
               FontSize="24"
               HorizontalOptions="Center"/>
        <Button Text="Go to Analysis"
                Command="{Binding NavigateToAnalysisCommand}"/>
        <Button Text="Go to Search"
                Command="{Binding NavigateToSearchCommand}"/>
    </StackLayout>
</ContentPage>

Here is the content of AppShell.xaml.cs:

using Hexe.Views;

namespace Hexe
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();

            // Register routes for navigation
            Routing.RegisterRoute(nameof(AnalysisPage), typeof(AnalysisPage));
            Routing.RegisterRoute(nameof(SearchPage), typeof(SearchPage));
           

        }
    }
}

Here is the content of SearchPageViewModel.cs:

using System.Collections.ObjectModel;
using System.Threading.Tasks;
using System.Windows.Input;
using Microsoft.Maui.Controls;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Maui;
using Hexe.Services;

namespace Hexe.ViewModels
{
    public class SearchResult
    {
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }

    public class SearchPageViewModel : BindableObject
    {
        private readonly StockService _stockService = new StockService();
        private string searchQuery = string.Empty;

        // Property für die Suchanfrage
        public string SearchQuery
        {
            get => searchQuery;
            set
            {
                searchQuery = value;
                OnPropertyChanged();
            }
        }

        // Collection für die Suchergebnisse
        public ObservableCollection<SearchResult> SearchResults { get; set; }

        // Command für die Suche
        public ICommand SearchCommand { get; }

        // Series für das Diagramm
        private ISeries[] series = Array.Empty<ISeries>(); // Initialisiere mit einer leeren Serie
        public ISeries[] Series
        {
            get => series;
            set
            {
                series = value ?? Array.Empty<ISeries>(); // Verhindere, dass 'null' gesetzt wird
                OnPropertyChanged();
            }
        }

        public SearchPageViewModel()
        {
            SearchResults = new ObservableCollection<SearchResult>();
            SearchCommand = new Command(async () => await OnSearch());

            // Beispielhafte Daten zur Initialisierung des Diagramms
            Series = new ISeries[]
            {
                new LineSeries<double>
                {
                    Values = new double[] { 2, 4, 6, 3, 5, 7 }
                }
            };
        }

        private async Task OnSearch()
        {
            SearchResults.Clear();
            var stockData = await _stockService.GetStockSummary(SearchQuery);
            if (stockData != null)
            {
                // UI-Updates müssen auf dem Haupt-Thread ausgeführt werden
                Dispatcher.Dispatch(() =>
                {
                    SearchResults.Add(new SearchResult
                    {
                        Name = stockData.Symbol,
                        Description = $"Price: {stockData.Price}, Open: {stockData.Open}, Change: {stockData.ChangePercent}"
                    });

                    // Konvertierung von string zu double
                    if (double.TryParse(stockData.Price, out double price) &&
                        double.TryParse(stockData.Open, out double open) &&
                        double.TryParse(stockData.ChangePercent, out double changePercent))
                    {
                        // Update des Diagramms mit den neuen Daten
                        Series = new ISeries[]
                        {
                            new LineSeries<double>
                            {
                                Values = new double[] { price, open, changePercent }
                            }
                        };

                        OnPropertyChanged(nameof(Series)); // Benachrichtigen, dass sich die Daten geändert haben
                    }
                });
            }
        }
    }
}

and Here is the content of MainPageViewModel.cs:

using System.Windows.Input;
using Microsoft.Maui.Controls;
using Hexe.Views;

namespace Hexe.ViewModels
{
    public class MainPageViewModel : BindableObject
    {
        public ICommand NavigateToAnalysisCommand { get; set; }
        public ICommand NavigateToSearchCommand { get; set; }

        public MainPageViewModel()
        {
            NavigateToAnalysisCommand = new Command(OnNavigateToAnalysis);
            NavigateToSearchCommand = new Command(OnNavigateToSearch);
        }

        private async void OnNavigateToAnalysis()
        {
            await Shell.Current.GoToAsync(nameof(AnalysisPage));
        }
       
        private async void OnNavigateToSearch()
        {

            await Shell.Current.GoToAsync(nameof(SearchPage));
            
            
        }
        
        
    }
}

Does anyone have a solution?

Does anyone have a solution?