LanMountainDesktop/LanMountainDesktop/Views/SettingsPages/WeatherSettingsPage.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:LanMountainDesktop.ViewModels"
             xmlns:models="using:LanMountainDesktop.Models"
             xmlns:controls="using:LanMountainDesktop.Controls"
             xmlns:ui="using:FluentAvalonia.UI.Controls"
             xmlns:fi="using:FluentIcons.Avalonia"
             x:Class="LanMountainDesktop.Views.SettingsPages.WeatherSettingsPage"
             x:DataType="vm:WeatherSettingsPageViewModel">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Classes="settings-page-container settings-page-animated">

            <Border Classes="settings-section-card">
                <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="18">
                    <Border Classes="settings-section-card-icon-host"
                            Width="72"
                            Height="72"
                            Padding="10">
                        <Image Source="{Binding PreviewIcon}"
                               Stretch="Uniform" />
                    </Border>

                    <StackPanel Grid.Column="1"
                                Spacing="4"
                                VerticalAlignment="Center">
                        <TextBlock Classes="settings-card-header"
                                   Text="{Binding PreviewHeader}" />
                        <TextBlock Classes="settings-card-description"
                                   Text="{Binding PreviewDescription}" />
                        <TextBlock Classes="settings-section-title"
                                   FontSize="24"
                                   Margin="0,10,0,0"
                                   Text="{Binding PreviewTemperature}" />
                        <TextBlock Classes="settings-item-label"
                                   Text="{Binding PreviewLocation}" />
                        <TextBlock Classes="settings-item-description"
                                   Text="{Binding PreviewCondition}" />
                        <TextBlock Classes="settings-item-description"
                                   Text="{Binding PreviewUpdated}" />
                        <TextBlock Classes="settings-item-description"
                                   Text="{Binding PreviewStatus}" />
                    </StackPanel>

                    <StackPanel Grid.Column="2"
                                Spacing="12"
                                VerticalAlignment="Center">
                        <Button Classes="settings-accent-button"
                                Command="{Binding RefreshPreviewCommand}"
                                Content="{Binding RefreshButtonText}" />
                        <ui:FAProgressRing IsIndeterminate="True"
                                         IsVisible="{Binding IsRefreshingPreview}"
                                         Width="28"
                                         Height="28"
                                         HorizontalAlignment="Center" />
                    </StackPanel>
                </Grid>
            </Border>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding LocationSourceHeader}"
                                 Description="{Binding LocationSourceDescription}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF0504;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <ComboBox Width="220"
                              ItemsSource="{Binding LocationModes}"
                              SelectedItem="{Binding SelectedLocationMode}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate x:DataType="vm:SelectionOption">
                                <TextBlock Text="{Binding Label}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </ui:FASettingsExpander.Footer>
                <ui:FASettingsExpanderItem>
                    <TextBlock Classes="settings-item-description"
                               Text="{Binding CurrentLocationSummary}"
                               TextWrapping="Wrap" />
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding CitySearchHeader}"
                                 Description="{Binding CitySearchDescription}"
                                 IsVisible="{Binding IsCitySearchMode}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF03F4;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <Button Classes="settings-accent-button"
                            Command="{Binding ApplyCitySelectionCommand}"
                            Content="{Binding ApplyCityButtonText}" />
                </ui:FASettingsExpander.Footer>
                <ui:FASettingsExpanderItem>
                    <StackPanel Spacing="14">
                        <Grid ColumnDefinitions="*,Auto"
                              ColumnSpacing="12">
                            <TextBox x:Name="SearchKeywordTextBox"
                                     Text="{Binding SearchKeyword}"
                                     PlaceholderText="{Binding SearchPlaceholder}"
                                     Focusable="True"
                                     IsTabStop="True" />
                            <Button Grid.Column="1"
                                    Command="{Binding SearchCommand}"
                                    Content="{Binding SearchButtonText}" />
                        </Grid>

                        <ui:FAProgressRing IsIndeterminate="True"
                                         IsVisible="{Binding IsSearching}"
                                         Width="24"
                                         Height="24"
                                         HorizontalAlignment="Left" />

                        <TextBlock Classes="settings-item-description"
                                   Text="{Binding SearchStatus}"
                                   TextWrapping="Wrap" />

                        <ListBox Classes="weather-settings-search-results"
                                 ItemsSource="{Binding SearchResults}"
                                 SelectedItem="{Binding SelectedSearchResult}">
                            <ListBox.ItemTemplate>
                                <DataTemplate x:DataType="models:WeatherLocation">
                                    <Grid ColumnDefinitions="Auto,*"
                                          ColumnSpacing="12">
                                        <ui:FAFontIcon Classes="icon-s"
                                                       Margin="0,2,0,0"
                                                       Glyph="&#xF02BC;"
                                                       FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                                        <StackPanel Grid.Column="1"
                                                    Spacing="4">
                                            <TextBlock Classes="settings-item-label"
                                                       Text="{Binding Name}" />
                                            <TextBlock Classes="settings-item-description"
                                                       Text="{Binding Affiliation}" />
                                            <TextBlock Classes="settings-item-description"
                                                       Text="{Binding LocationKey}" />
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding CoordinatesHeader}"
                                 Description="{Binding CoordinatesDescription}"
                                 IsVisible="{Binding IsCoordinatesMode}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF02BC;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <Button Classes="settings-accent-button"
                            Command="{Binding ApplyCoordinatesCommand}"
                            Content="{Binding ApplyCoordinatesButtonText}" />
                </ui:FASettingsExpander.Footer>
                <ui:FASettingsExpanderItem>
                    <Grid ColumnDefinitions="*,*"
                          Classes="settings-inline-pair">
                        <StackPanel Classes="settings-item">
                            <TextBlock Classes="settings-item-label"
                                       Text="{Binding LatitudeLabel}" />
                            <NumericUpDown Minimum="-90"
                                           Maximum="90"
                                           Increment="0.0001"
                                           FormatString="F4"
                                           Value="{Binding Latitude}" />
                        </StackPanel>

                        <StackPanel Grid.Column="1"
                                    Classes="settings-item">
                            <TextBlock Classes="settings-item-label"
                                       Text="{Binding LongitudeLabel}" />
                            <NumericUpDown Minimum="-180"
                                           Maximum="180"
                                           Increment="0.0001"
                                           FormatString="F4"
                                           Value="{Binding Longitude}" />
                        </StackPanel>
                    </Grid>
                </ui:FASettingsExpanderItem>
                <ui:FASettingsExpanderItem>
                    <TextBox x:Name="LocationKeyTextBox"
                             Text="{Binding LocationKey}"
                             PlaceholderText="{Binding LocationKeyPlaceholder}"
                             Focusable="True"
                             IsTabStop="True" />
                </ui:FASettingsExpanderItem>
                <ui:FASettingsExpanderItem>
                    <TextBox x:Name="LocationNameTextBox"
                             Text="{Binding LocationName}"
                             PlaceholderText="{Binding LocationNamePlaceholder}"
                             Focusable="True"
                             IsTabStop="True" />
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding LocationServicesHeader}"
                                 Description="{Binding LocationServicesDescription}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF02BC;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <Button Classes="settings-accent-button"
                            Command="{Binding UseCurrentLocationCommand}"
                            Content="{Binding UseCurrentLocationButtonText}"
                            IsVisible="{Binding IsLocationSupported}" />
                </ui:FASettingsExpander.Footer>
                <ui:FASettingsExpanderItem>
                    <Grid ColumnDefinitions="*,Auto"
                          ColumnSpacing="16">
                        <StackPanel Classes="settings-item">
                            <TextBlock Classes="settings-item-label"
                                       Text="{Binding AutoRefreshLabel}" />
                            <TextBlock Classes="settings-item-description"
                                       Text="{Binding LocationActionStatus}"
                                       TextWrapping="Wrap" />
                        </StackPanel>
                        <ToggleSwitch Grid.Column="1"
                                      IsChecked="{Binding AutoRefreshLocation}"
                                      IsEnabled="{Binding IsLocationSupported}" />
                    </Grid>
                </ui:FASettingsExpanderItem>
                <ui:FASettingsExpanderItem IsVisible="{Binding IsRefreshingLocation}">
                    <ui:FAProgressRing IsIndeterminate="True"
                                     IsVisible="{Binding IsRefreshingLocation}"
                                     Width="28"
                                     Height="28"
                                     HorizontalAlignment="Left" />
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding AlertFilterHeader}"
                                 Description="{Binding AlertFilterDescription}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF04E8;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <TextBox x:Name="ExcludedAlertsTextBox"
                             Width="360"
                             MinHeight="120"
                             AcceptsReturn="True"
                             TextWrapping="Wrap"
                             Text="{Binding ExcludedAlerts}"
                             Focusable="True"
                             IsTabStop="True" />
                </ui:FASettingsExpander.Footer>
            </ui:FASettingsExpander>

            <ui:FASettingsExpander Classes="settings-expander-card"
                                 Header="{Binding RequestHeader}"
                                 Description="{Binding RequestDescription}">
                <ui:FASettingsExpander.IconSource>
                    <ui:FAFontIconSource Glyph="&#xF0BC4;" FontFamily="avares://fluenticons.resources.avalonia/Assets#Seagull Fluent Icons" />
                </ui:FASettingsExpander.IconSource>
                <ui:FASettingsExpander.Footer>
                    <ToggleSwitch IsChecked="{Binding NoTlsRequests}" />
                </ui:FASettingsExpander.Footer>
                <ui:FASettingsExpanderItem>
                    <TextBlock Classes="settings-item-description"
                               Text="{Binding NoTlsToggleText}"
                               TextWrapping="Wrap" />
                </ui:FASettingsExpanderItem>
            </ui:FASettingsExpander>

            <TextBlock Classes="settings-item-description"
                       Margin="0,8,0,0"
                       Text="{Binding FooterHint}"
                       TextWrapping="Wrap" />
        </StackPanel>
    </ScrollViewer>
</UserControl>