271 lines
11 KiB
XML
271 lines
11 KiB
XML
<!-- 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>
|
|
|
|
<!-- Highlighted element tile style -->
|
|
<Style Selector="Button.ElementTile.Highlighted">
|
|
<Setter Property="BorderBrush" Value="Yellow"/>
|
|
<Setter Property="BorderThickness" Value="4"/>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Legend Button styles for clickable legend items -->
|
|
<Style Selector="Button.LegendButton">
|
|
<Setter Property="Width" Value="120"/>
|
|
<Setter Property="Height" Value="30"/>
|
|
<Setter Property="Margin" Value="5"/>
|
|
<Setter Property="CornerRadius" Value="4"/>
|
|
<Setter Property="FontWeight" Value="Bold"/>
|
|
<Setter Property="FontSize" Value="11"/>
|
|
<Setter Property="Foreground" Value="White"/>
|
|
<Setter Property="BorderThickness" Value="2"/>
|
|
<Setter Property="BorderBrush" Value="Transparent"/>
|
|
<Setter Property="HorizontalContentAlignment" Value="Center"/>
|
|
<Setter Property="VerticalContentAlignment" Value="Center"/>
|
|
</Style>
|
|
|
|
<!-- Highlighted legend button style -->
|
|
<Style Selector="Button.LegendButton.Highlighted">
|
|
<Setter Property="BorderBrush" Value="Yellow"/>
|
|
<Setter Property="BorderThickness" Value="3"/>
|
|
</Style>
|
|
|
|
<!-- Legend button hover effect -->
|
|
<Style Selector="Button.LegendButton:pointerover">
|
|
<Setter Property="Opacity" Value="0.8"/>
|
|
</Style>
|
|
</UserControl.Styles>
|
|
|
|
<UserControl.Resources>
|
|
<conv:SeriesToColorConverter x:Key="SeriesToColor"/>
|
|
</UserControl.Resources>
|
|
|
|
<Grid Margin="20">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="20"/>
|
|
<RowDefinition Height="*"/>
|
|
<RowDefinition Height="Auto"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Legend - jetzt mit klickbaren Buttons -->
|
|
<WrapPanel Grid.Row="0"
|
|
Name="LegendPanel"
|
|
HorizontalAlignment="Center"
|
|
Orientation="Horizontal">
|
|
|
|
<!-- Farben aus SeriesToColorConverter verwenden - jetzt als Buttons -->
|
|
<Button Classes="LegendButton" Background="#6c3b01"
|
|
Content="Alkalimetalle" Click="LegendButton_Click"
|
|
Tag="Alkalimetall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#846011"
|
|
Content="Erdalkalimetalle" Click="LegendButton_Click"
|
|
Tag="Erdalkalimetall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#402c17"
|
|
Content="Lanthanoide" Click="LegendButton_Click"
|
|
Tag="Lanthanoid"/>
|
|
|
|
<Button Classes="LegendButton" Background="#732e4c"
|
|
Content="Actinoide" Click="LegendButton_Click"
|
|
Tag="Actinoid"/>
|
|
|
|
<Button Classes="LegendButton" Background="#711019"
|
|
Content="Übergangsmetalle" Click="LegendButton_Click"
|
|
Tag="Metall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#555555"
|
|
Content="Post-Übergang" Click="LegendButton_Click"
|
|
Tag="Post-Übergangsmetall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#015146"
|
|
Content="Halbmetalle" Click="LegendButton_Click"
|
|
Tag="Halbmetall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#3e6418"
|
|
Content="Nichtmetalle" Click="LegendButton_Click"
|
|
Tag="Nichtmetall"/>
|
|
|
|
<Button Classes="LegendButton" Background="#3a2151"
|
|
Content="Edelgase" Click="LegendButton_Click"
|
|
Tag="Edelgas"/>
|
|
|
|
<Button Classes="LegendButton" Background="#846011"
|
|
Content="Halogene" Click="LegendButton_Click"
|
|
Tag="Halogen"/>
|
|
|
|
</WrapPanel>
|
|
|
|
<!-- Periodic Table Grid -->
|
|
<ScrollViewer Grid.Row="2"
|
|
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="3"
|
|
Margin="0,20,0,0">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto"/>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="Auto"/>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="Auto"/>
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<Button Name="BackButton"
|
|
Grid.Column="0"
|
|
Click="BackButton_Click"
|
|
Width="200"
|
|
Height="40">
|
|
<TextBlock Text="← Zurück"
|
|
FontSize="16"
|
|
HorizontalAlignment="Center"/>
|
|
</Button>
|
|
|
|
<Button Name="ThemeButton"
|
|
Grid.Column="2"
|
|
Click="ThemeButton_Click"
|
|
Width="250"
|
|
Height="40"
|
|
HorizontalAlignment="Center">
|
|
<TextBlock Text="Theme wechseln"
|
|
FontSize="16"
|
|
HorizontalAlignment="Center"/>
|
|
</Button>
|
|
|
|
<Button x:Name="AboutButton"
|
|
Grid.Column="4"
|
|
Click="AboutButton_Click"
|
|
Width="200"
|
|
Height="40">
|
|
<TextBlock Text="About"
|
|
FontSize="16"
|
|
HorizontalAlignment="Center"/>
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</UserControl>
|
|
|