Projekt_SS25/Project_Periodensystem.View/PeriodicTablePage.axaml

<!-- PeriodicTablePage.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:conv="clr-namespace:Project_Periodensystem.View.Converters"
             x:Class="Project_Periodensystem.View.PeriodicTablePage">

    <UserControl.Styles>
        <Style Selector="Button">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Width" Value="250"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>
        <Style Selector="Button:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="DarkRed"/>
        </Style>
        <Style Selector="Button:pressed /template/ ContentPresenter">
            <Setter Property="Background" Value="Red"/>
        </Style>
        <Style Selector="Button TextBlock">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- Separate styles for navigation buttons -->
        <Style Selector="Button.NavigationButton">
            <Setter Property="Width" Value="250"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>

        <!-- Element tile specific styles - ALWAYS white text -->
        <Style Selector="Button.ElementTile">
            <Setter Property="Width" Value="55"/>
            <Setter Property="Height" Value="55"/>
            <Setter Property="Margin" Value="2"/>
        </Style>

        <!-- Specific styles for element tile content -->
        <Style Selector="Button.ElementTile > StackPanel > TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        
        <!-- Different sizes for symbol and number -->
        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Symbol">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Number">
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- Force white text for element tiles and their content -->
        <Style Selector="Grid#PeriodicGrid Button">
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style Selector="Grid#PeriodicGrid Button TextBlock">
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style Selector="Grid#PeriodicGrid Button > StackPanel > TextBlock">
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </UserControl.Styles>

    <UserControl.Resources>
        <conv:SeriesToColorConverter x:Key="SeriesToColor"/>
    </UserControl.Resources>

    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Header -->
        <TextBlock Grid.Row="0" 
                  Text="Periodensystem der Elemente"                   
                  FontSize="36"
                    FontWeight="Bold" 
                  Foreground="White"
                  HorizontalAlignment="Center"
                  Margin="0,0,0,20"/>

        <!-- Periodic Table Grid -->
        <ScrollViewer Grid.Row="1" 
                     HorizontalScrollBarVisibility="Auto" 
                     VerticalScrollBarVisibility="Auto">
            <Grid Name="PeriodicGrid"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>

        <!-- Footer with Buttons -->
        <Grid Grid.Row="2" 
              Margin="0,20,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
                
            <Button Name="ThemeButton"
                    Grid.Column="0"
                    Click="ThemeButton_Click"
                    Width="250"
                    Height="40">
                <TextBlock Text="Theme wechseln"
                          FontSize="16"
                          HorizontalAlignment="Center"/>
            </Button>

            <Button x:Name="AboutButton"
                    Grid.Column="2"
                    Click="AboutButton_Click"
                    Width="200"
                    Height="40">
                <TextBlock Text="About"
                          FontSize="16"
                          HorizontalAlignment="Center"/>
            </Button>
        </Grid>
    </Grid>
</UserControl>