Meilenstein, Navigation geht, Grid ist da inkl Farben

Project_Periodensystem.View/PeriodicTablePage.axaml

@@ -1,9 +1,15 @@
 <!-- PeriodicTablePage.axaml -->
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="Project_Periodensystem.View.PeriodicTablePage">
+             xmlns:conv="clr-namespace:Project_Periodensystem.View.Converters"
+             x:Class="Project_Periodensystem.View.PeriodicTablePage"
+             Background="Beige">
 
-    <Grid>
+    <UserControl.Resources>
+        <conv:SeriesToColorConverter x:Key="SeriesToColor"/>
+    </UserControl.Resources>
+
+    <Grid Margin="20">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
@@ -14,12 +20,15 @@
         <TextBlock Grid.Row="0" 
                   Text="Periodensystem der Elemente" 
                   FontSize="24" 
+                  Foreground="White"
                   HorizontalAlignment="Center"
-                  Margin="0,20,0,20"/>
+                  Margin="0,0,0,20"/>
 
         <!-- Periodensystem Grid -->
-        <Grid Grid.Row="1" 
+        <ScrollViewer Grid.Row="1" 
-              Name="PeriodicGrid"
+                     HorizontalScrollBarVisibility="Auto" 
+                     VerticalScrollBarVisibility="Auto">
+            <Grid Name="PeriodicGrid"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center">
                 <Grid.RowDefinitions>
@@ -55,13 +64,15 @@
                     <ColumnDefinition Width="60"/>
                 </Grid.ColumnDefinitions>
             </Grid>
+        </ScrollViewer>
 
         <!-- Footer with About Button -->
         <Button Grid.Row="2" 
                 x:Name="AboutButton"
                 Click="AboutButton_Click"
                 HorizontalAlignment="Right"
-                Margin="20">
+                Margin="0,20,0,0"
+                Padding="20,10">
             About
         </Button>
     </Grid>

Project_Periodensystem.View/PeriodicTablePage.axaml.cs

@@ -1,11 +1,15 @@
 using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Data.Converters;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
-using Avalonia;
 using Avalonia.VisualTree;
 using Project_Periodensystem.Persistence;
+using Project_Periodensystem.View.Converters;
 
 namespace Project_Periodensystem.View
 {
@@ -14,38 +18,33 @@ namespace Project_Periodensystem.View
     {
         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
         {
-            // Example: Map series string to color
             if (value == null) return new SolidColorBrush(Colors.Gray);
-            switch (value.ToString())
+            
+            return value.ToString() switch
             {
-                case "Alkali Metal":
+                "Nichtmetall" => new SolidColorBrush(Color.Parse("#3e6418")),
-                    return new SolidColorBrush(Colors.OrangeRed);
+                "Metall" => new SolidColorBrush(Color.Parse("#711019")),
-                case "Alkaline Earth Metal":
+                "Post-Übergangsmetall" => new SolidColorBrush(Color.Parse("#555555")),
-                    return new SolidColorBrush(Colors.Gold);
+                "Halbmetall" => new SolidColorBrush(Color.Parse("#015146")),
-                case "Transition Metal":
+                "Edelgas" => new SolidColorBrush(Color.Parse("#3a2151")),
-                    return new SolidColorBrush(Colors.LightBlue);
+                "Halogen" => new SolidColorBrush(Color.Parse("#846011")),
-                case "Metalloid":
+                "Alkalimetall" => new SolidColorBrush(Color.Parse("#6c3b01")),
-                    return new SolidColorBrush(Colors.LightGreen);
+                "Erdalkalimetall" => new SolidColorBrush(Color.Parse("#846011")),
-                case "Nonmetal":
+                "Lanthanoid" => new SolidColorBrush(Color.Parse("#402c17")),
-                    return new SolidColorBrush(Colors.LightGray);
+                "Actinoid" => new SolidColorBrush(Color.Parse("#732e4c")),
-                case "Halogen":
+                _ => new SolidColorBrush(Color.Parse("#222222"))
-                    return new SolidColorBrush(Colors.Violet);
+            };
-                case "Noble Gas":
-                    return new SolidColorBrush(Colors.Cyan);
-                default:
-                    return new SolidColorBrush(Colors.Gray);
-            }
         }
     }
 
     public partial class PeriodicTablePage : UserControl
     {
-        private readonly Grid periodicGrid;
+        private readonly Grid? periodicGrid;
 
         public PeriodicTablePage()
         {
             InitializeComponent();
-            periodicGrid = this.Find<Grid>("PeriodicGrid") ?? throw new Exception("PeriodicGrid not found");
+            periodicGrid = this.Find<Grid>("PeriodicGrid");
             InitializePeriodicTable();
         }
 
@@ -59,8 +58,27 @@ namespace Project_Periodensystem.View
             try
             {
                 Logger.Log("Initialisiere PeriodicTable...");
+                
+                // Prüfen ob das Grid gefunden wurde
+                if (periodicGrid == null)
+                {
+                    Logger.Log("FEHLER: PeriodicGrid nicht gefunden!");
+                    return;
+                }
+
+                // Prüfen ob Elemente vorhanden sind
+                if (PeriodicTableData.Elements == null || !PeriodicTableData.Elements.Any())
+                {
+                    Logger.Log("FEHLER: Keine Elemente in PeriodicTableData!");
+                    return;
+                }
+
+                var converter = new SeriesToColorConverter();
+                // Elemente hinzufügen
                 foreach (var element in PeriodicTableData.Elements)
                 {
+                    Logger.Log($"Füge Element hinzu: {element.Symbol} ({element.Row},{element.Column})");
+                    
                     var border = new Border
                     {
                         Width = 58,
@@ -68,7 +86,8 @@ namespace Project_Periodensystem.View
                         Margin = new Thickness(1),
                         CornerRadius = new CornerRadius(4),
                         BorderThickness = new Thickness(1),
-                        BorderBrush = new SolidColorBrush(Colors.Gray)
+                        BorderBrush = new SolidColorBrush(Colors.Gray),
+                        Background = converter.Convert(element.Series, typeof(IBrush), null, CultureInfo.CurrentCulture) as IBrush // Hier wird die Farbe gesetzt
                     };
 
                     var stackPanel = new StackPanel();
@@ -93,31 +112,20 @@ namespace Project_Periodensystem.View
 
                     border.Child = stackPanel;
 
-                    // Set background color based on element series
+                    // Position setzen
-                    var converter = new SeriesToColorConverter();
-                    border.Background = converter.Convert(element.Series, typeof(IBrush), null!, System.Globalization.CultureInfo.CurrentCulture) as IBrush;
-
-                    // Position the element - adjust for 0-based indexing
                     Grid.SetRow(border, Math.Max(0, element.Row - 1));
                     Grid.SetColumn(border, Math.Max(0, element.Column - 1));
                     
                     periodicGrid.Children.Add(border);
+                    Logger.Log($"Element {element.Symbol} wurde hinzugefügt");
                 }
+
                 Logger.Log("PeriodicTable wurde initialisiert");
             }
             catch (Exception ex)
             {
-                var mainWindow = this.FindAncestorOfType<MainWindow>();
+                Logger.Log($"FEHLER beim Initialisieren des PeriodicTable: {ex.Message}");
-                if (mainWindow != null)
+                Logger.Log($"StackTrace: {ex.StackTrace}");
-                {
-                    Logger.Log("MainWindow gefunden, navigiere zu About...");
-                    mainWindow.ShowAbout();
-                }
-                else
-                {
-                    Logger.Log("FEHLER: MainWindow nicht gefunden!");
-                }
-                Logger.Log($"FEHLER im PeriodicTable-Initialisierer: {ex.Message}");
             }
         }