LanMountainDesktop/LanMountainDesktop/Views/SettingsPages/ComponentsSettingsPage.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:LanMountainDesktop.ViewModels"
             xmlns:controls="using:LanMountainDesktop.Controls"
             xmlns:ui="using:FluentAvalonia.UI.Controls"
             xmlns:fi="using:FluentIcons.Avalonia"
             x:Class="LanMountainDesktop.Views.SettingsPages.ComponentsSettingsPage"
             x:DataType="vm:ComponentsSettingsPageViewModel">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Classes="settings-page-container settings-page-animated">
            <Grid ColumnDefinitions="*,Auto"
                  Height="180"
                  Margin="0,0,0,16">
                <controls:GridPreviewControl Cells="{Binding ShortSideCells}"
                                             AspectRatio="{Binding ScreenAspectRatio}"
                                             EdgeInsetPercent="{Binding EdgeInsetPercent}"
                                             GridBrush="{DynamicResource TextFillColorTertiaryBrush}"
                                             ScreenBorderBrush="{DynamicResource TextFillColorSecondaryBrush}"
                                             InsetBrush="{DynamicResource ControlFillColorSecondaryBrush}"
                                             Margin="0,0,16,0" />
                <StackPanel Grid.Column="1"
                            Width="140"
                            Spacing="4">
                    <controls:CornerRadiusPreviewControl Radius="{Binding CornerRadiusPreviewValue}"
                                                         ShapeBrush="{DynamicResource AccentFillColorDefaultBrush}"
                                                         GuideBrush="{DynamicResource TextFillColorTertiaryBrush}"
                                                         FillBrush="{DynamicResource AccentFillColorDefaultBrush}"
                                                         Height="120" />
                    <TextBlock Text="{Binding CornerRadiusPreviewValue, StringFormat='{}{0}px'}"
                               FontSize="11"
                               Opacity="0.65"
                               HorizontalAlignment="Center"
                               FontFamily="Consolas, Courier New" />
                </StackPanel>
            </Grid>

            <controls:IconText Icon="Apps"
                               Text="{Binding ComponentsHeader}"
                               Margin="0,0,0,4" />

            <ui:FASettingsExpander Header="{Binding ComponentsHeader}"
                                 IsExpanded="True">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF0024;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="16">
                        <TextBlock Text="{Binding ShortSideCellsLabel}"
                                   VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="6"
                                Maximum="96"
                                IsSnapToTickEnabled="True"
                                TickFrequency="1"
                                Value="{Binding ShortSideCells}" />
                        <TextBlock Grid.Column="2"
                                   Width="32"
                                   Text="{Binding ShortSideCells}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Right" />
                    </Grid>
                </ui:FASettingsExpanderItem>
                <ui:FASettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="16">
                        <TextBlock Text="{Binding EdgeInsetPercentLabel}"
                                   VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="30"
                                IsSnapToTickEnabled="True"
                                TickFrequency="1"
                                Value="{Binding EdgeInsetPercent}" />
                        <TextBlock Grid.Column="2"
                                   Width="32"
                                   Text="{Binding EdgeInsetPercent, StringFormat='{}{0}%'}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Right" />
                    </Grid>
                </ui:FASettingsExpanderItem>
                <ui:FASettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*">
                        <TextBlock Text="{Binding SpacingPresetLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="180"
                                  ItemsSource="{Binding SpacingPresets}"
                                  SelectedItem="{Binding SelectedSpacingPreset}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <controls:IconText Icon="ShapeOrganic"
                               Text="{Binding ComponentRadiusHeader}"
                               Margin="0,12,0,4" />

            <ui:FASettingsExpander Header="{Binding CornerRadiusStyleLabel}"
                                 Description="{Binding CornerRadiusStyleDescription}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF0FE8;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <ComboBox Width="200"
                                  ItemsSource="{Binding CornerRadiusStyleOptions}"
                                  SelectedItem="{Binding SelectedCornerRadiusStyle}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                        <Button Classes="AppBarButton" ToolTip.Tip="{Binding CornerRadiusSpecTooltip}" Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).OpenDesignSpecCommand}" CommandParameter="CORNER_RADIUS_SPEC.md">
                            <fi:SymbolIcon Symbol="QuestionCircle" />
                        </Button>
                    </StackPanel>
                </ui:FASettingsExpander.Footer>
            </ui:FASettingsExpander>
        </StackPanel>
    </ScrollViewer>
</UserControl>