LanMountainDesktop/LanMountainDesktop/Views/SettingsPages/GridSettingsPage.axaml

<UserControl 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:ui="using:FluentAvalonia.UI.Controls"
             xmlns:fi="using:FluentIcons.Avalonia"
             xmlns:ic="using:FluentIcons.Avalonia.Fluent"
             xmlns:comp="using:LanMountainDesktop.Views.Components"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             x:Class="LanMountainDesktop.Views.SettingsPages.GridSettingsPage">
    <Grid x:Name="GridSettingsPanel"
          ColumnDefinitions="*, *"
          RowDefinitions="Auto, *">
        <TextBlock x:Name="GridPanelTitleTextBlock"
                   Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                   FontSize="28"
                   FontWeight="SemiBold"
                   Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                   Margin="0,0,0,24"
                   Text="调整网格布局" />

        <!-- Left Column: Grid Preview -->
        <Border x:Name="GridPreviewHost"
                Grid.Row="1" Grid.Column="0"
                Margin="0,0,16,0"
                VerticalAlignment="Top"
                HorizontalAlignment="Stretch">
            <Border x:Name="GridPreviewFrame"
                    HorizontalAlignment="Stretch"
                    CornerRadius="28"
                    Background="#FF1A1A1A"
                    Padding="12">
                <Border x:Name="GridPreviewViewport"
                        ClipToBounds="True"
                        CornerRadius="16"
                        Background="#30111827">
                    <Panel>
                        <Canvas x:Name="GridPreviewLinesCanvas"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                IsHitTestVisible="False" />
                        <Grid x:Name="GridPreviewGrid"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center">
                            <Border x:Name="GridPreviewTopStatusBarHost"
                                Grid.Row="0"
                                Background="Transparent"
                                Padding="2">
                            <StackPanel x:Name="GridPreviewTopStatusComponentsPanel"
                                        Orientation="Horizontal"
                                        Spacing="3">
                            </StackPanel>
                        </Border>

                        <Border x:Name="GridPreviewBottomTaskbarContainer"
                                Classes="glass-strong"
                                Grid.Row="1"
                                Margin="3"
                                CornerRadius="16"
                                Padding="2">
                            <Grid ColumnDefinitions="Auto,*,Auto"
                                  ColumnSpacing="3">
                                <Border x:Name="GridPreviewTaskbarFixedActionsHost" Grid.Column="0">
                                    <StackPanel x:Name="GridPreviewBackButtonVisual" Orientation="Horizontal" Spacing="3">
                                        <fi:SymbolIcon Classes="icon-s" Symbol="Window" />
                                        <TextBlock x:Name="GridPreviewBackButtonTextBlock" Text="回到Windows" VerticalAlignment="Center" />
                                    </StackPanel>
                                </Border>
                                <StackPanel x:Name="GridPreviewTaskbarDynamicActionsHost"
                                            Grid.Column="1"
                                            Orientation="Horizontal"
                                            HorizontalAlignment="Center"
                                            Spacing="3" />
                                <Border x:Name="GridPreviewTaskbarSettingsActionHost" Grid.Column="2">
                                    <StackPanel Orientation="Horizontal" Spacing="3">
                                        <StackPanel x:Name="GridPreviewComponentLibraryVisual" IsVisible="False" Orientation="Horizontal" Spacing="3">
                                            <fi:FluentIcon x:Name="GridPreviewComponentLibraryIcon" Classes="icon-s" Icon="Apps" />
                                            <TextBlock x:Name="GridPreviewComponentLibraryTextBlock" Text="Widget library" VerticalAlignment="Center" />
                                        </StackPanel>
                                        <fi:SymbolIcon x:Name="GridPreviewSettingsButtonIcon" Classes="icon-s" Symbol="Settings" />
                                    </StackPanel>
                                </Border>
                            </Grid>
                        </Border>
                    </Grid>
                    </Panel>
                </Border>
            </Border>
        </Border>

        <!-- Right Column: Settings Content -->
        <StackPanel Grid.Row="1" Grid.Column="1"
                    Margin="16,0,0,0"
                    Spacing="16">
            
            <Border Classes="settings-expander-shell">
                <ui:SettingsExpander x:Name="GridRowsSettingsExpander" Header="Rows" Description="Adjust the density of the grid">
                    <ui:SettingsExpander.Footer>
                        <Grid ColumnDefinitions="*,Auto" ColumnSpacing="12" Width="220">
                            <Slider x:Name="GridSizeSlider"
                                    Grid.Column="0"
                                    Minimum="6"
                                    Maximum="96"
                                    TickFrequency="1"
                                    TickPlacement="None"
                                    Value="12" />
                            <ui:NumberBox x:Name="GridSizeNumberBox"
                                          Grid.Column="1"
                                          Width="80"
                                          Minimum="6"
                                          Maximum="96"
                                          Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                          Value="12" />
                        </Grid>
                    </ui:SettingsExpander.Footer>
                </ui:SettingsExpander>
            </Border>

            <Border Classes="settings-expander-shell">
                <ui:SettingsExpander x:Name="GridSpacingSettingsExpander" Header="Spacing" Description="Adjust the gap between cells">
                    <ui:SettingsExpander.Footer>
                        <ComboBox x:Name="GridSpacingPresetComboBox"
                                  Width="120">
                            <ComboBoxItem x:Name="GridSpacingRelaxedComboBoxItem" Tag="Relaxed" Content="Relaxed" />
                            <ComboBoxItem x:Name="GridSpacingCompactComboBoxItem" Tag="Compact" Content="Compact" />
                        </ComboBox>
                    </ui:SettingsExpander.Footer>
                </ui:SettingsExpander>
            </Border>

            <Border Classes="settings-expander-shell">
                <ui:SettingsExpander x:Name="GridEdgeInsetSettingsExpander" Header="Screen Inset" Description="Adjust margins around the desktop">
                    <ui:SettingsExpander.Footer>
                        <Grid ColumnDefinitions="*,Auto" ColumnSpacing="12" Width="220">
                            <Slider x:Name="GridEdgeInsetSlider"
                                    Grid.Column="0"
                                    Minimum="0"
                                    Maximum="30"
                                    TickFrequency="1"
                                    TickPlacement="None"
                                    Value="18" />
                            <ui:NumberBox x:Name="GridEdgeInsetNumberBox"
                                          Grid.Column="1"
                                          Width="80"
                                          Minimum="0"
                                          Maximum="30"
                                          Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                          Value="18" />
                        </Grid>
                    </ui:SettingsExpander.Footer>
                    <ui:SettingsExpanderItem>
                        <ui:SettingsExpanderItem.Footer>
                            <TextBlock x:Name="GridEdgeInsetComputedPxTextBlock"
                                       Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                       Text=">= 0 px" />
                        </ui:SettingsExpanderItem.Footer>
                    </ui:SettingsExpanderItem>
                </ui:SettingsExpander>
            </Border>

            <Button x:Name="ApplyGridButton"
                    HorizontalAlignment="Stretch"
                    Padding="0,10"
                    Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                    Content="应用" />

            <TextBlock x:Name="GridInfoTextBlock"
                       Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                       Text="Grid: - cols x - rows (1:1)" />
        </StackPanel>
    </Grid>
</UserControl>