GridEditorWindow.xaml

<Window x:Class="ScreenGrid.GridEditorWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ScreenGrid – Grid Editor"
    Width="960" Height="760"
    MinWidth="820" MinHeight="620"
    WindowStartupLocation="CenterScreen"
    Background="#1e1e2e"
    Foreground="White"
    ResizeMode="CanResize">

    <Window.Resources>
        <!-- Dark flat button style -->
        <Style x:Key="FlatBtn" TargetType="Button">
            <Setter Property="Background" Value="#2d2d44"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="#444466"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="14,7"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="4" Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#3a3a5c"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#50508a"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="AccentBtn" TargetType="Button" BasedOn="{StaticResource FlatBtn}">
            <Setter Property="Background" Value="#0066cc"/>
            <Setter Property="BorderBrush" Value="#0080ff"/>
        </Style>
        <Style x:Key="DangerBtn" TargetType="Button" BasedOn="{StaticResource FlatBtn}">
            <Setter Property="Background" Value="#8b2252"/>
            <Setter Property="BorderBrush" Value="#aa3366"/>
        </Style>
    </Window.Resources>

    <Grid Margin="16">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2.15*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Header -->
        <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Grid Editor" FontSize="22" FontWeight="SemiBold"
                   Foreground="#ccd0ff" Margin="0,0,0,8"/>

        <!-- Grid name -->
        <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" Margin="0,0,0,10">
            <TextBlock Text="Grid Name:" VerticalAlignment="Center" Margin="0,0,8,0"
                       FontSize="13" Foreground="#aab"/>
            <TextBox x:Name="TxtGridName" Width="260" Height="30" FontSize="13"
                     Background="#2a2a3e" Foreground="White" BorderBrush="#444466"
                     Padding="6,4" VerticalContentAlignment="Center"/>
        </StackPanel>

        <!-- Usage help -->
        <Border Grid.Row="2" Grid.Column="0" Background="#25253b" BorderBrush="#3b3b58" BorderThickness="1"
                CornerRadius="6" Padding="10" Margin="0,0,0,10">
            <TextBlock Foreground="#d8dcff" FontSize="12" TextWrapping="Wrap">
                <Run Text="Quick tips: " FontWeight="SemiBold"/>
                <Run Text="Columns (W) sets left/right widths (example: 1:1:1).  " />
                <Run Text="Height (H) is optional vertical split (example: 1:1). Leave H empty for full-height zones.  " />
                <Run Text="The top row appears first in the Shift overlay." />
            </TextBlock>
        </Border>

        <!-- Rows list -->
        <Border Grid.Row="3" Grid.Column="0" Background="#16162a" BorderBrush="#333355" BorderThickness="1"
                CornerRadius="6" Padding="8" Margin="0,0,0,10">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <StackPanel x:Name="RowsPanel" />
            </ScrollViewer>
        </Border>

        <!-- Orientation preview -->
        <Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Margin="14,0,0,10"
                Background="#16162a" BorderBrush="#333355" BorderThickness="1"
                CornerRadius="6" Padding="10">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <TextBlock Text="Orientation Preview" FontSize="15" FontWeight="SemiBold"
                           Foreground="#d8dcff"/>

                <TextBlock x:Name="TxtPreviewName" Grid.Row="1" Margin="0,6,0,8"
                           Foreground="#9ca3d7" FontSize="12"
                           Text="Select a row to preview"/>

                <Border Grid.Row="2" Background="#111124" BorderBrush="#3b3b58" BorderThickness="1" CornerRadius="6" Padding="10">
                    <Canvas x:Name="PreviewCanvas" MinHeight="160" />
                </Border>

                <!-- Appearance Settings -->
                <Border Grid.Row="3" Margin="0,10,0,0" Background="#111124" BorderBrush="#3b3b58"
                        BorderThickness="1" CornerRadius="6" Padding="10">
                    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                        <StackPanel>
                            <TextBlock Text="Overlay Appearance" FontSize="14" FontWeight="SemiBold"
                                       Foreground="#d8dcff" Margin="0,0,0,6"/>

                            <!-- Background Opacity -->
                            <TextBlock Text="Background Opacity" Foreground="#aab" FontSize="11" Margin="0,0,0,2"
                                       ToolTip="Overlay darkness (0=transparent, 255=opaque)"/>
                            <Slider x:Name="SliderOverlayAlpha" Minimum="0" Maximum="255"
                                    TickFrequency="1" IsSnapToTickEnabled="True" Margin="0,0,0,8"
                                    ValueChanged="OnColorSliderChanged"/>

                            <!-- ── Zone Color ── -->
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,3">
                                <TextBlock Text="Zone Color" Foreground="#ccd0ff" FontSize="12"
                                           FontWeight="SemiBold" VerticalAlignment="Center"/>
                                <Rectangle x:Name="SwatchZone" Width="14" Height="14"
                                           RadiusX="2" RadiusY="2" Margin="8,0,0,0"
                                           Stroke="#555" StrokeThickness="1"/>
                            </StackPanel>
                            <Grid Margin="0,0,0,8">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="16"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" Text="R" Foreground="#ff6b6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderZoneR" Grid.Row="0" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="1" Text="G" Foreground="#6bff6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderZoneG" Grid.Row="1" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="2" Text="B" Foreground="#6ba8ff" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderZoneB" Grid.Row="2" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                            </Grid>

                            <!-- ── Highlight Color ── -->
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,3">
                                <TextBlock Text="Highlight Color" Foreground="#ccd0ff" FontSize="12"
                                           FontWeight="SemiBold" VerticalAlignment="Center"/>
                                <Rectangle x:Name="SwatchHighlight" Width="14" Height="14"
                                           RadiusX="2" RadiusY="2" Margin="8,0,0,0"
                                           Stroke="#555" StrokeThickness="1"/>
                            </StackPanel>
                            <Grid Margin="0,0,0,2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="16"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" Text="R" Foreground="#ff6b6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderHighlightR" Grid.Row="0" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="1" Text="G" Foreground="#6bff6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderHighlightG" Grid.Row="1" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="2" Text="B" Foreground="#6ba8ff" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderHighlightB" Grid.Row="2" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                            </Grid>
                            <TextBlock Text="Opacity" Foreground="#aab" FontSize="11" Margin="0,0,0,2"/>
                            <Slider x:Name="SliderHighlightAlpha" Minimum="0" Maximum="255"
                                    TickFrequency="1" IsSnapToTickEnabled="True" Margin="0,0,0,8"
                                    ValueChanged="OnColorSliderChanged"/>

                            <!-- ── Snap Preview Color ── -->
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,3">
                                <TextBlock Text="Snap Preview Color" Foreground="#ccd0ff" FontSize="12"
                                           FontWeight="SemiBold" VerticalAlignment="Center"/>
                                <Rectangle x:Name="SwatchSnap" Width="14" Height="14"
                                           RadiusX="2" RadiusY="2" Margin="8,0,0,0"
                                           Stroke="#555" StrokeThickness="1"/>
                            </StackPanel>
                            <Grid Margin="0,0,0,2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="16"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" Text="R" Foreground="#ff6b6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderSnapR" Grid.Row="0" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="1" Text="G" Foreground="#6bff6b" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderSnapG" Grid.Row="1" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                                <TextBlock Grid.Row="2" Text="B" Foreground="#6ba8ff" FontSize="10" VerticalAlignment="Center"/>
                                <Slider x:Name="SliderSnapB" Grid.Row="2" Grid.Column="1"
                                        Minimum="0" Maximum="255" TickFrequency="1" IsSnapToTickEnabled="True"
                                        Margin="0,0,0,1" ValueChanged="OnColorSliderChanged"/>
                            </Grid>
                            <TextBlock Text="Opacity" Foreground="#aab" FontSize="11" Margin="0,0,0,2"/>
                            <Slider x:Name="SliderSnapAlpha" Minimum="0" Maximum="255"
                                    TickFrequency="1" IsSnapToTickEnabled="True" Margin="0,0,0,8"
                                    ValueChanged="OnColorSliderChanged"/>

                            <Button x:Name="BtnResetAppearance" Style="{StaticResource FlatBtn}"
                                    Content="Reset Colors" Click="OnResetAppearance"
                                    HorizontalAlignment="Left" Margin="0,4,0,0" Padding="10,5"/>
                        </StackPanel>
                    </ScrollViewer>
                </Border>
            </Grid>
        </Border>

        <!-- Add row + row presets -->
        <StackPanel Grid.Row="4" Grid.Column="0" Margin="0,0,0,14">
            <TextBlock Text="Quick Add" FontSize="13" FontWeight="SemiBold" Foreground="#cfd3ff" Margin="0,0,0,6"/>
            <WrapPanel>
                <Button Style="{StaticResource FlatBtn}" Content="＋ Empty Row" Click="OnAddRow" Margin="0,0,8,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="HALVES" Click="OnPresetHalves" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="HALVES ½H" Click="OnPresetHalvesHalf" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="THIRDS" Click="OnPresetThirds" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="THIRDS ½H" Click="OnPresetThirdsHalf" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="4:3 LEFT" Click="OnPreset43Left" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="4:3 CENTER" Click="OnPreset43Center" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="4:3 RIGHT" Click="OnPreset43Right" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="QUARTERS" Click="OnPresetQuarters" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="QUARTERS ½H" Click="OnPresetQuartersHalf" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="FIFTHS" Click="OnPresetFifths" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="FIFTHS ½H" Click="OnPresetFifthsHalf" Margin="0,0,4,4"/>
                <Button Style="{StaticResource FlatBtn}" Content="CUSTOM…" Click="OnPresetCustom" Margin="0,0,4,4"/>
            </WrapPanel>
        </StackPanel>

        <!-- Action buttons -->
        <StackPanel Grid.Row="5" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource FlatBtn}" Content="Reset to Defaults" Click="OnReset" Margin="0,0,8,0"/>
            <Button Style="{StaticResource FlatBtn}" Content="Save to File…" Click="OnSaveToFile" Margin="0,0,8,0"/>
            <Button Style="{StaticResource AccentBtn}" Content="Apply &amp; Close" Click="OnApply" Margin="0,0,0,0"/>
        </StackPanel>
    </Grid>
</Window>