60 lines
2.7 KiB
XML
60 lines
2.7 KiB
XML
<Window xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:views="clr-namespace:Project_Periodensystem.View"
|
|
mc:Ignorable="d" d:DesignWidth="1400" d:DesignHeight="900"
|
|
x:Class="Project_Periodensystem.View.MainWindow"
|
|
Title="Periodensystem">
|
|
|
|
<!-- Haupt-Layout mit Padding für Abstand -->
|
|
<Grid Padding="12">
|
|
<!-- Zwei Zeilen: oben Titel + Suche, unten das Periodensystem -->
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" /> <!-- Erste Zeile: automatisch so hoch wie nötig -->
|
|
<RowDefinition Height="*" /> <!-- Zweite Zeile: nimmt den restlichen Platz ein -->
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Kopfzeile mit Titel und Suchfeld -->
|
|
<StackPanel Orientation="Horizontal"
|
|
Margin="0 0 0 12" <!-- Abstand nach unten -->
|
|
Spacing="12" <!-- Abstand zwischen Kind-Elementen -->
|
|
Grid.Row="0"> <!-- Platziert dieses Panel in der ersten Zeile -->
|
|
|
|
<!-- Überschrift -->
|
|
<TextBlock Text="Periodensystem der Elemente"
|
|
FontSize="24"
|
|
FontWeight="Bold" />
|
|
|
|
<!-- Eingabefeld für zukünftige Suche (noch ohne Funktion) -->
|
|
<TextBox Width="200" Watermark="Suche..." />
|
|
</StackPanel>
|
|
|
|
<!-- Hauptbereich mit Kacheln in einem ScrollViewer -->
|
|
<ScrollViewer Grid.Row="1"> <!-- Platziert im unteren Bereich -->
|
|
|
|
<!-- ItemsControl zeigt die Liste aller Elemente an -->
|
|
<ItemsControl Items="{Binding Elements}">
|
|
|
|
<!-- ItemsPanel definiert das Layout: hier ein 18-spaltiges Gitter -->
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<UniformGrid Columns="18" />
|
|
<!-- Wichtig: 18 Spalten, damit das Periodensystem "klassisch" dargestellt wird -->
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
|
|
<!-- Definiert, wie jedes einzelne Element aussehen soll -->
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<!-- Nutzt eine eigene Kachel-View für jedes Element -->
|
|
<views:ElementTile DataContext="{Binding}" />
|
|
<!-- DataContext ist automatisch ein einzelnes Element-Objekt -->
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
|
|
</ItemsControl>
|
|
</ScrollViewer>
|
|
</Grid>
|
|
</Window>
|