<!-- WPF -->
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Avalonia — лише це відрізняється: -->
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- WPF: Margin на кожному елементі (Margin-хак) -->
<StackPanel>
    <Button Margin="0,0,0,8" Content="Кнопка 1"/>
    <Button Margin="0,0,0,8" Content="Кнопка 2"/>
    <Button Margin="0,0,0,8" Content="Кнопка 3"/>
    <!-- Остання кнопка — зайвий нижній відступ! -->
</StackPanel>

<!-- WPF: Style-підхід (краще але все одно обхід) -->
<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="0,0,0,8"/>
        </Style>
    </StackPanel.Resources>
    <Button Content="Кнопка 1"/>
    <Button Content="Кнопка 2"/>
    <!-- Але стиль застосовується до ВСІХ кнопок включно з останньою -->
</StackPanel>

<!-- Avalonia: просто і елегантно -->
<StackPanel Spacing="8">
    <Button Content="Кнопка 1"/>
    <Button Content="Кнопка 2"/>
    <Button Content="Кнопка 3"/>
    <!-- Відступ тільки між елементами: 8px між 1-2 і між 2-3 -->
    <!-- Після "Кнопка 3" — ЖОДНОГО зайвого відступу -->
</StackPanel>

<!-- WPF: щоб зробити відступ між рядками — потрібен "порожній" рядок висотою 8px -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="8"/>    <!-- Штучний відступ! -->
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Рядок 1"/>
    <!-- Grid.Row="1" — це порожній рядок-відступ -->
    <TextBlock Grid.Row="2" Text="Рядок 2"/>
</Grid>

<!-- Avalonia: просто RowSpacing -->
<Grid RowSpacing="8" ColumnSpacing="12">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="Ім'я:"/>
    <TextBox   Grid.Row="0" Grid.Column="1" Text="Іван"/>

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Email:"/>
    <TextBox   Grid.Row="1" Grid.Column="1" Text="ivan@example.com"/>
    <!-- RowSpacing=8 автоматично між рядками, ColumnSpacing=12 між колонками -->
</Grid>

<RelativePanel>
    <!-- Заголовок: вгорі зліва від панелі -->
    <TextBlock x:Name="title"
               RelativePanel.AlignLeftWithPanel="True"
               RelativePanel.AlignTopWithPanel="True"
               Text="Налаштування профілю"
               FontSize="18" FontWeight="Bold"
               Margin="0,0,0,16"/>

    <!-- Аватар: нижче заголовка, вирівняний зліва -->
    <Border x:Name="avatar"
            RelativePanel.Below="title"
            RelativePanel.AlignLeftWithPanel="True"
            Width="64" Height="64"
            Background="#2563eb" CornerRadius="32"
            Margin="0,0,0,12">
        <TextBlock Text="🧑" FontSize="28" HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
    </Border>

    <!-- Ім'я: справа від аватара, вирівняний по його верху -->
    <TextBlock x:Name="userName"
               RelativePanel.RightOf="avatar"
               RelativePanel.AlignTopWith="avatar"
               Text="Іван Петренко"
               FontSize="16" FontWeight="SemiBold"
               Margin="12,0,0,0"/>

    <!-- Посада: нижче імені, вирівняна зліва з ім'ям -->
    <TextBlock RelativePanel.Below="userName"
               RelativePanel.AlignLeftWith="userName"
               Text="Junior WPF Developer"
               Foreground="#64748b"
               Margin="12,4,0,0"/>

    <!-- Кнопка "Редагувати": у правому нижньому куті панелі -->
    <Button RelativePanel.AlignRightWithPanel="True"
            RelativePanel.AlignBottomWithPanel="True"
            Content="✏️ Редагувати"
            Padding="12,6" Background="#2563eb" Foreground="White"
            CornerRadius="6"/>
</RelativePanel>

<SplitView IsPaneOpen="{Binding IsSidebarOpen}"
           DisplayMode="CompactInline"
           CompactPaneLength="48"
           OpenPaneLength="200">
    <SplitView.Pane>
        <!-- Вміст бічної панелі: іконки + текст -->
        <StackPanel Spacing="8" Margin="0,8">
            <Button Command="{Binding ToggleSidebarCommand}" 
                    Content="☰" Width="48" Background="Transparent"/>
            <ListBox>
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <TextBlock Text="🏠" Width="24" TextAlignment="Center"/>
                        <TextBlock Text="Головна"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <TextBlock Text="⚙️" Width="24" TextAlignment="Center"/>
                        <TextBlock Text="Налаштування"/>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </StackPanel>
    </SplitView.Pane>

    <SplitView.Content>
        <!-- Основний контент екрану -->
        <Border Background="#f1f5f9" Padding="24">
            <TextBlock Text="Тут відображається обрана сторінка" 
                       FontSize="20" Foreground="#333"/>
        </Border>
    </SplitView.Content>
</SplitView>

<Expander Header="Розгорніть для деталей">
    <!-- Додаємо анімацію вмісту -->
    <Expander.ContentTransition>
        <CrossFade Duration="0:0:0.2" />
    </Expander.ContentTransition>
    
    <StackPanel Spacing="8" Margin="8">
        <TextBlock Text="Цей текст з'являється плавно з ефектом fade." />
        <TextBlock Text="А висота панелі розширюється за допомогою вбудованої анімації Expander." />
    </StackPanel>
</Expander>

<ScrollViewer>
    <ItemsRepeater ItemsSource="{Binding Products}">
        <ItemsRepeater.Layout>
            <!-- Адаптивна сітка з відступами 16px і мінімальним розміром комірки 280x320 -->
            <UniformGridLayout MinItemWidth="280" MinItemHeight="320"
                               MinColumnSpacing="16" MinRowSpacing="16" />
        </ItemsRepeater.Layout>
        
        <ItemsRepeater.ItemTemplate>
            <DataTemplate>
                <Border Background="White" CornerRadius="8" Padding="16" BoxShadow="0 4 12 0 #1A000000">
                    <StackPanel Spacing="8">
                        <Image Source="{Binding ContextImage}" Height="150" Stretch="UniformToFill"/>
                        <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16" />
                        <TextBlock Text="{Binding Price}" Foreground="#2563eb" FontWeight="SemiBold"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
</ScrollViewer>

<Border Background="#2563eb" Width="100" Height="40" CornerRadius="4">
    <!-- Реєстрація того, ЯК панель повинна реагувати на зміну її Width -->
    <Border.Transitions>
        <Transitions>
            <DoubleTransition Property="Width" Duration="0:0:0.3"/>
            <BrushTransition Property="Background" Duration="0:0:0.3"/>
        </Transitions>
    </Border.Transitions>

    <!-- Якщо змінити клас (через C# або CSS-стилі в Avalonia), 
         Width зміниться з 100 до 200 ПЛАВНО за 0.3 секунди -->
</Border>