LanMountainDesktop/LanMountainDesktop/Views/SettingsPages/StatusBarSettingsPage.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.Fluent"
             x:Class="LanMountainDesktop.Views.SettingsPages.StatusBarSettingsPage"
             x:DataType="vm:StatusBarSettingsPageViewModel">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Classes="settings-page-container settings-page-animated">
            <controls:IconText Icon="Apps"
                               Text="{Binding ComponentsHeader}"
                               Margin="0,0,0,4" />

            <ui:SettingsExpander Header="{Binding ClockHeader}"
                                 Description="{Binding ClockDescription}">
                <ui:SettingsExpander.IconSource>
                    <fi:SymbolIconSource Symbol="Clock" />
                </ui:SettingsExpander.IconSource>
                <ui:SettingsExpander.Footer>
                    <ToggleSwitch IsChecked="{Binding ShowClock}" />
                </ui:SettingsExpander.Footer>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding ClockFormatLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowClock}"
                                  ItemsSource="{Binding ClockFormats}"
                                  SelectedItem="{Binding SelectedClockFormat}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="*,Auto"
                          ColumnSpacing="16">
                        <StackPanel Spacing="2">
                            <TextBlock Text="{Binding ClockTransparentBackgroundLabel}" />
                            <TextBlock Text="{Binding ClockTransparentBackgroundDescription}"
                                       Opacity="0.75"
                                       TextWrapping="Wrap" />
                        </StackPanel>
                        <ToggleSwitch Grid.Column="1"
                                      IsChecked="{Binding ClockTransparentBackground}"
                                      VerticalAlignment="Center" />
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding ClockPositionLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowClock}"
                                  ItemsSource="{Binding ClockPositions}"
                                  SelectedItem="{Binding SelectedClockPosition}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding ClockFontSizeLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowClock}"
                                  ItemsSource="{Binding ClockFontSizes}"
                                  SelectedItem="{Binding SelectedClockFontSize}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>

            <ui:SettingsExpander Header="{Binding TextCapsuleHeader}"
                                 Description="{Binding TextCapsuleDescription}">
                <ui:SettingsExpander.IconSource>
                    <fi:SymbolIconSource Symbol="TextQuote" />
                </ui:SettingsExpander.IconSource>
                <ui:SettingsExpander.Footer>
                    <ToggleSwitch IsChecked="{Binding ShowTextCapsule}" />
                </ui:SettingsExpander.Footer>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding TextCapsuleContentLabel}"
                                   VerticalAlignment="Top"
                                   Margin="0,8,0,0" />
                        <TextBox Grid.Column="1"
                                 AcceptsReturn="True"
                                 TextWrapping="Wrap"
                                 Height="100"
                                 IsEnabled="{Binding ShowTextCapsule}"
                                 Text="{Binding TextCapsuleContent}"
                                 Watermark="Enter Markdown text..." />
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding TextCapsulePositionLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowTextCapsule}"
                                  ItemsSource="{Binding TextCapsulePositions}"
                                  SelectedItem="{Binding SelectedTextCapsulePosition}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="*,Auto"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding TextCapsuleTransparentBackgroundLabel}"
                                   VerticalAlignment="Center" />
                        <ToggleSwitch Grid.Column="1"
                                      IsChecked="{Binding TextCapsuleTransparentBackground}"
                                      IsEnabled="{Binding ShowTextCapsule}"
                                      VerticalAlignment="Center" />
                    </Grid>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>

            <ui:SettingsExpander Header="{Binding NetworkSpeedHeader}"
                                 Description="{Binding NetworkSpeedDescription}">
                <ui:SettingsExpander.IconSource>
                    <fi:SymbolIconSource Symbol="ArrowBidirectionalUpDown" />
                </ui:SettingsExpander.IconSource>
                <ui:SettingsExpander.Footer>
                    <ToggleSwitch IsChecked="{Binding ShowNetworkSpeed}" />
                </ui:SettingsExpander.Footer>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding NetworkSpeedPositionLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowNetworkSpeed}"
                                  ItemsSource="{Binding NetworkSpeedPositions}"
                                  SelectedItem="{Binding SelectedNetworkSpeedPosition}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding NetworkSpeedDisplayModeLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowNetworkSpeed}"
                                  ItemsSource="{Binding NetworkSpeedDisplayModes}"
                                  SelectedItem="{Binding SelectedNetworkSpeedDisplayMode}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="*,Auto"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding NetworkSpeedTransparentBackgroundLabel}"
                                   VerticalAlignment="Center" />
                        <ToggleSwitch Grid.Column="1"
                                      IsChecked="{Binding NetworkSpeedTransparentBackground}"
                                      IsEnabled="{Binding ShowNetworkSpeed}"
                                      VerticalAlignment="Center" />
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="*,Auto"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding ShowNetworkTypeIconLabel}"
                                   VerticalAlignment="Center" />
                        <ToggleSwitch Grid.Column="1"
                                      IsChecked="{Binding ShowNetworkTypeIcon}"
                                      IsEnabled="{Binding ShowNetworkSpeed}"
                                      VerticalAlignment="Center" />
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding NetworkSpeedFontSizeLabel}"
                                   VerticalAlignment="Center" />
                        <ComboBox Grid.Column="1"
                                  Width="220"
                                  IsEnabled="{Binding ShowNetworkSpeed}"
                                  ItemsSource="{Binding NetworkSpeedFontSizes}"
                                  SelectedItem="{Binding SelectedNetworkSpeedFontSize}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="vm:SelectionOption">
                                    <TextBlock Text="{Binding Label}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </Grid>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>

            <Separator Classes="settings-separator" />

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

            <ui:SettingsExpander Header="{Binding SpacingHeader}"
                                 Description="{Binding SpacingDescription}">
                <ui:SettingsExpander.IconSource>
                    <fi:SymbolIconSource Symbol="Apps" />
                </ui:SettingsExpander.IconSource>
                <ui:SettingsExpander.Footer>
                    <ComboBox Width="180"
                              ItemsSource="{Binding SpacingModes}"
                              SelectedItem="{Binding SelectedSpacingMode}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate x:DataType="vm:SelectionOption">
                                <TextBlock Text="{Binding Label}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </ui:SettingsExpander.Footer>
                <ui:SettingsExpanderItem IsVisible="{Binding IsCustomSpacingVisible}">
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding CustomSpacingLabel}"
                                   VerticalAlignment="Center" />
                        <ui:NumberBox Grid.Column="1"
                                      Width="160"
                                      Minimum="0"
                                      Maximum="30"
                                      SmallChange="1"
                                      LargeChange="4"
                                      SpinButtonPlacementMode="Inline"
                                      Value="{Binding CustomSpacingPercent}" />
                    </Grid>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>

            <Separator Classes="settings-separator" />

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

            <ui:SettingsExpander Header="{Binding StatusBarShadowHeader}"
                                 Description="{Binding StatusBarShadowDescription}">
                <ui:SettingsExpander.IconSource>
                    <fi:SymbolIconSource Symbol="Square" />
                </ui:SettingsExpander.IconSource>
                <ui:SettingsExpander.Footer>
                    <ToggleSwitch IsChecked="{Binding StatusBarShadowEnabled}" />
                </ui:SettingsExpander.Footer>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding StatusBarShadowColorLabel}"
                                   VerticalAlignment="Center" />
                        <Button Grid.Column="1"
                                HorizontalAlignment="Right"
                                IsEnabled="{Binding StatusBarShadowEnabled}">
                            <Border Width="32"
                                    Height="32"
                                    CornerRadius="4"
                                    Background="{Binding StatusBarShadowColorBrush}" />
                            <Button.Flyout>
                                <Flyout Placement="BottomEdgeAlignedRight">
                                    <ColorPicker Color="{Binding StatusBarShadowColor}" />
                                </Flyout>
                            </Button.Flyout>
                        </Button>
                    </Grid>
                </ui:SettingsExpanderItem>
                <ui:SettingsExpanderItem>
                    <Grid ColumnDefinitions="Auto,*"
                          ColumnSpacing="16">
                        <TextBlock Text="{Binding StatusBarShadowOpacityLabel}"
                                   VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="100"
                                TickFrequency="10"
                                IsEnabled="{Binding StatusBarShadowEnabled}"
                                Value="{Binding StatusBarShadowOpacity}" />
                    </Grid>
                </ui:SettingsExpanderItem>
            </ui:SettingsExpander>
        </StackPanel>
    </ScrollViewer>
</UserControl>