LanMountainDesktop/LanMountainDesktop/Views/SettingsPages/StatusBarSettingsPage.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"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             x:Class="LanMountainDesktop.Views.SettingsPages.StatusBarSettingsPage">
    <StackPanel x:Name="StatusBarSettingsPanel"
                Spacing="16">
        <TextBlock x:Name="StatusBarPanelTitleTextBlock"
                   FontSize="24"
                   FontWeight="SemiBold"
                   Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                   Text="Status Bar" />

        <Border Classes="settings-expander-shell">
            <ui:SettingsExpander x:Name="StatusBarClockSettingsExpander"
                                 Header="&#31995;&#32479;&#26102;&#38047;"
                                 Description="&#22312;&#29366;&#24577;&#26639;&#19978;&#26174;&#31034;&#26102;&#38388;&#12290;"
                                 IsExpanded="False">
                <ui:SettingsExpander.Footer>
                    <ToggleSwitch x:Name="StatusBarClockToggleSwitch"
                                  OnContent="On"
                                  OffContent="Off" />
                </ui:SettingsExpander.Footer>
                
                <ui:SettingsExpanderItem Content="Display Format">
                    <ui:SettingsExpanderItem.Footer>
                        <StackPanel Orientation="Horizontal" Spacing="16">
                            <RadioButton x:Name="ClockFormatHMSSRadio"
                                         Content="HH:mm:ss"
                                         GroupName="ClockFormat"
                                         Tag="Hms" />
                            <RadioButton x:Name="ClockFormatHMRadio"
                                         Content="HH:mm"
                                         GroupName="ClockFormat"
                                         Tag="Hm" />
                        </StackPanel>
                    </ui:SettingsExpanderItem.Footer>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>
        </Border>

        <Border Classes="settings-expander-shell">
            <ui:SettingsExpander x:Name="StatusBarSpacingSettingsExpander"
                                 Header="Component spacing"
                                 Description="Adjust spacing between status bar components."
                                 IsExpanded="False">
                <ui:SettingsExpander.Footer>
                    <ComboBox x:Name="StatusBarSpacingModeComboBox"
                              Width="150">
                        <ComboBoxItem x:Name="StatusBarSpacingModeCompactItem" Tag="Compact" Content="Compact" />
                        <ComboBoxItem x:Name="StatusBarSpacingModeRelaxedItem" Tag="Relaxed" Content="Relaxed" />
                        <ComboBoxItem x:Name="StatusBarSpacingModeCustomItem" Tag="Custom" Content="Custom" />
                    </ComboBox>
                </ui:SettingsExpander.Footer>

                <ui:SettingsExpanderItem x:Name="StatusBarSpacingCustomPanel"
                                         Content="Custom spacing"
                                        IsVisible="False">
                     <ui:SettingsExpanderItem.Footer>
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <Slider x:Name="StatusBarSpacingSlider"
                                    Width="150"
                                    Minimum="0"
                                    Maximum="30"
                                    TickFrequency="1"
                                    Value="12" />
                             <ui:NumberBox x:Name="StatusBarSpacingNumberBox"
                                           Width="80"
                                           Minimum="0"
                                           Maximum="30"
                                           Value="12" />
                        </StackPanel>
                     </ui:SettingsExpanderItem.Footer>
                </ui:SettingsExpanderItem>
                
                <ui:SettingsExpanderItem>
                    <ui:SettingsExpanderItem.Footer>
                        <TextBlock x:Name="StatusBarSpacingComputedPxTextBlock"
                                   HorizontalAlignment="Right"
                                   Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                   Text=">= 0 px" />
                    </ui:SettingsExpanderItem.Footer>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>
        </Border>
    </StackPanel>
</UserControl>