Legende eingefügt

Project_Periodensystem.View/PeriodicTablePage.axaml

@@ -70,6 +70,22 @@
         <Style Selector="Grid#PeriodicGrid Button > StackPanel > TextBlock">
             <Setter Property="Foreground" Value="White"/>
         </Style>
+
+        <!-- Legend styles -->
+        <Style Selector="Border.LegendItem">
+            <Setter Property="Width" Value="120"/>
+            <Setter Property="Height" Value="30"/>
+            <Setter Property="Margin" Value="5"/>
+            <Setter Property="CornerRadius" Value="4"/>
+        </Style>
+        
+        <Style Selector="Border.LegendItem TextBlock">
+            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="FontSize" Value="11"/>
+            <Setter Property="FontWeight" Value="Bold"/>
+            <Setter Property="HorizontalAlignment" Value="Center"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+        </Style>
     </UserControl.Styles>
 
     <UserControl.Resources>
@@ -79,21 +95,57 @@
     <Grid Margin="20">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
+            <RowDefinition Height="20"/>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
 
-        <!-- Header -->
+        <!-- Legend - ohne dunklen Hintergrund -->
-        <TextBlock Grid.Row="0" 
+        <WrapPanel Grid.Row="0" 
-                  Text="Periodensystem der Elemente"                   
+                   HorizontalAlignment="Center" 
-                  FontSize="36"
+                   Orientation="Horizontal">
-                    FontWeight="Bold" 
+            
-                  Foreground="White"
+            <!-- Farben aus SeriesToColorConverter verwenden -->
-                  HorizontalAlignment="Center"
+            <Border Classes="LegendItem" Background="#6c3b01">
-                  Margin="0,0,0,20"/>
+                <TextBlock Text="Alkalimetalle"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#846011">
+                <TextBlock Text="Erdalkalimetalle"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#402c17">
+                <TextBlock Text="Lanthanoide"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#732e4c">
+                <TextBlock Text="Actinoide"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#711019">
+                <TextBlock Text="Übergangsmetalle"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#555555">
+                <TextBlock Text="Post-Übergang"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#015146">
+                <TextBlock Text="Halbmetalle"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#3e6418">
+                <TextBlock Text="Nichtmetalle"/>
+            </Border>
+            
+            <Border Classes="LegendItem" Background="#3a2151">
+                <TextBlock Text="Edelgase"/>
+            </Border>
+            
+        </WrapPanel>
 
         <!-- Periodic Table Grid -->
-        <ScrollViewer Grid.Row="1" 
+        <ScrollViewer Grid.Row="2" 
                      HorizontalScrollBarVisibility="Auto" 
                      VerticalScrollBarVisibility="Auto">
             <Grid Name="PeriodicGrid"
@@ -135,7 +187,7 @@
         </ScrollViewer>
 
         <!-- Footer with Buttons -->
-        <Grid Grid.Row="2" 
+        <Grid Grid.Row="3" 
               Margin="0,20,0,0">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>