LanMountainDesktop/LanMountainDesktop/Views/SettingsWindow.axaml

<faWindowing:FAAppWindow xmlns="https://github.com/avaloniaui"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:local="using:LanMountainDesktop.Views"
                         xmlns:vm="using:LanMountainDesktop.ViewModels"
                         xmlns:services="using:LanMountainDesktop.Services"
                         xmlns:ui="using:FluentAvalonia.UI.Controls"
                         xmlns:fi="using:FluentIcons.Avalonia"
                         xmlns:faWindowing="using:FluentAvalonia.UI.Windowing"
                         x:Class="LanMountainDesktop.Views.SettingsWindow"
                         x:DataType="vm:SettingsWindowViewModel"
                         Width="1120"
                         Height="760"
                         MinWidth="560"
                         MinHeight="480"
                         CanResize="True"
                         WindowStartupLocation="Manual"
                         FontFamily="{DynamicResource AppFontFamily}"
                         Background="Transparent"
                         Title="{Binding Title}">

    <faWindowing:FAAppWindow.Resources>
        <x:Double x:Key="SettingsContainerMaxWidth">960</x:Double>
    </faWindowing:FAAppWindow.Resources>

    <faWindowing:FAAppWindow.Styles>
        <Style Selector="Grid.page-title-container">
            <Setter Property="Margin" Value="0,16,0,0" />
            <Setter Property="MaxWidth" Value="{DynamicResource SettingsContainerMaxWidth}" />
        </Style>

        <Style Selector="TextBlock.page-title-text">
            <Setter Property="FontSize" Value="28" />
            <Setter Property="FontWeight" Value="SemiBold" />
        </Style>

        <Style Selector="TextBlock.page-title-text:narrow">
            <Setter Property="FontSize" Value="24" />
        </Style>

        <Style Selector="Button.titlebar-icon-button">
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="MinWidth" Value="40" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusSm}" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

        <Style Selector="Button.titlebar-icon-button:pointerover">
            <Setter Property="Background" Value="{DynamicResource AdaptiveButtonHoverBackgroundBrush}" />
        </Style>

        <Style Selector="Button.titlebar-icon-button:pressed">
            <Setter Property="Background" Value="{DynamicResource AdaptiveButtonPressedBackgroundBrush}" />
        </Style>

        <Style Selector="AutoCompleteBox.settings-search-box">
            <Setter Property="MaxWidth" Value="440" />
            <Setter Property="MinWidth" Value="240" />
            <Setter Property="Height" Value="34" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </faWindowing:FAAppWindow.Styles>

    <Grid x:Name="RootGrid"
          Classes="settings-scope"
          Background="Transparent"
          RowDefinitions="Auto,*">

        <Border Grid.RowSpan="2"
                Background="{DynamicResource AdaptiveSettingsWindowBackgroundBrush}"
                IsHitTestVisible="False" />

        <Border Grid.RowSpan="2"
                Background="{DynamicResource AdaptiveSettingsWindowTintBrush}"
                IsHitTestVisible="False" />

        <ui:FANavigationView x:Name="RootNavigationView"
                             Grid.Row="1"
                             Classes="settings-navigation-view"
                             Margin="0"
                             Background="Transparent"
                             PaneDisplayMode="Auto"
                             OpenPaneLength="283"
                             IsSettingsVisible="False"
                             IsBackButtonVisible="False"
                             IsPaneToggleButtonVisible="False"
                             SelectionChanged="OnNavigationSelectionChanged"
                             ItemInvoked="OnNavigationItemInvoked">
            <ui:FANavigationView.Styles>
                <Style Selector="ui|FANavigationView#RootNavigationView:minimal">
                    <Setter Property="IsPaneToggleButtonVisible" Value="False" />
                </Style>
            </ui:FANavigationView.Styles>

            <ui:FANavigationView.Resources>
                <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewContentGridBorderBrush" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewMinimalPaneBackground" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewPaneBackground" Color="Transparent" />
                <SolidColorBrush x:Key="NavigationViewTopPaneBackground" Color="Transparent" />
            </ui:FANavigationView.Resources>

            <Grid x:Name="SettingsContentGrid"
                  ColumnDefinitions="*,Auto"
                  ColumnSpacing="20"
                  Margin="12,0,16,16">
                <Grid Grid.Column="0"
                      RowDefinitions="Auto,*">
                    <Grid x:Name="PageTitleContainer"
                          Grid.Row="0"
                          Classes="page-title-container"
                          IsVisible="{Binding IsPageTitleVisible}">
                        <TextBlock x:Name="PageTitleTextBlock"
                                   Classes="page-title-text"
                                   Text="{Binding CurrentPageTitle}" />
                    </Grid>

                    <ui:FAFrame x:Name="ContentFrame"
                                Grid.Row="1" />

                    <Canvas x:Name="SearchHighlightOverlay"
                            Grid.Row="1"
                            IsHitTestVisible="False"
                            ZIndex="1000" />
                </Grid>

                <Border x:Name="DrawerBorder"
                        Grid.Column="1"
                        Width="296"
                        Background="{DynamicResource AdaptiveSurfaceRaisedBrush}"
                        BorderBrush="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                        BorderThickness="1"
                        CornerRadius="{DynamicResource DesignCornerRadiusMd}"
                        Padding="20"
                        BoxShadow="0 8 24 #14000000"
                        IsVisible="{Binding IsDrawerOpen}">
                    <Grid RowDefinitions="Auto,*"
                          RowSpacing="16">
                        <Grid ColumnDefinitions="*,Auto">
                            <TextBlock x:Name="DrawerTitleTextBlock"
                                       FontSize="16"
                                       FontWeight="SemiBold"
                                       Text="{Binding DrawerTitle}" />
                            <Button Grid.Column="1"
                                    Width="32"
                                    Height="32"
                                    Padding="0"
                                    Background="Transparent"
                                    BorderThickness="0"
                                    Click="OnCloseDrawerClick">
                                <fi:FluentIcon Icon="Dismiss"
                                               IconVariant="Regular" />
                            </Button>
                        </Grid>

                        <ContentControl x:Name="DrawerContentHost"
                                        Grid.Row="1" />
                    </Grid>
                </Border>
            </Grid>
        </ui:FANavigationView>

        <Border x:Name="WindowTitleBarHost"
                Grid.Row="0"
                Height="48"
                Background="Transparent"
                BorderBrush="Transparent"
                BorderThickness="0"
                PointerPressed="OnTitleBarDragZonePointerPressed">
            <Grid ColumnDefinitions="Auto,*,Auto"
                  VerticalAlignment="Stretch">
                <StackPanel Grid.Column="0"
                            Orientation="Horizontal"
                            Margin="0,0,12,0"
                            Spacing="0"
                            VerticalAlignment="Center">
                    <Button x:Name="BackButton"
                            Classes="titlebar-icon-button"
                            Width="48"
                            Height="48"
                            Margin="0,-8,0,-8"
                            IsVisible="{Binding CanGoBack}"
                            ToolTip.Tip="{Binding BackTooltip}"
                            Click="OnBackButtonClick">
                        <fi:FluentIcon Icon="ArrowLeft"
                                       IconVariant="Regular"
                                       FontSize="16"
                                       Foreground="{DynamicResource TextFillColorPrimaryBrush}" />
                    </Button>

                    <fi:FluentIcon x:Name="WindowBrandIcon"
                                   Icon="Settings"
                                   IconVariant="Filled"
                                   FontSize="18"
                                   Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                                   IsHitTestVisible="False"
                                   Margin="8,0,2,0"
                                   VerticalAlignment="Center" />

                    <TextBlock x:Name="WindowTitleTextBlock"
                               FontSize="12"
                               FontWeight="SemiBold"
                               Margin="2,0,0,0"
                               VerticalAlignment="Center"
                               Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                               IsHitTestVisible="False"
                               Text="{Binding Title}" />
                </StackPanel>

                <AutoCompleteBox x:Name="SettingsSearchBox"
                                 Grid.Column="1"
                                 Classes="settings-search-box"
                                 FilterMode="Custom"
                                 ItemFilter="{x:Static local:SettingsWindow.SettingsSearchFilter}"
                                 MaxDropDownHeight="480"
                                 ItemsSource="{Binding SearchResults}"
                                 SelectedItem="{Binding SelectedSearchResult, Mode=TwoWay}"
                                 PlaceholderText="{Binding SearchPlaceholderText}"
                                 KeyUp="OnSearchBoxKeyUp"
                                 SelectionChanged="OnSearchBoxSelectionChanged">
                    <AutoCompleteBox.InnerRightContent>
                        <fi:FluentIcon Icon="Search"
                                       IconVariant="Regular"
                                       Margin="6"
                                       FontSize="15"
                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}" />
                    </AutoCompleteBox.InnerRightContent>
                    <AutoCompleteBox.ItemTemplate>
                        <DataTemplate x:DataType="services:SettingsSearchResult">
                            <Grid RowDefinitions="Auto,Auto"
                                  RowSpacing="2"
                                  MinWidth="240">
                                <TextBlock Text="{Binding DisplayTitle}"
                                           FontWeight="SemiBold"
                                           TextTrimming="CharacterEllipsis" />
                                <TextBlock Grid.Row="1"
                                           Text="{Binding PageTitle}"
                                           FontSize="12"
                                           Opacity="0.72"
                                           TextTrimming="CharacterEllipsis" />
                            </Grid>
                        </DataTemplate>
                    </AutoCompleteBox.ItemTemplate>
                </AutoCompleteBox>

                <StackPanel Grid.Column="2"
                            Orientation="Horizontal"
                            Spacing="6"
                            VerticalAlignment="Center"
                            Margin="0,0,8,0">
                    <Button x:Name="RestartNowButton"
                            Padding="10,6"
                            Margin="0,-8,0,-8"
                            VerticalAlignment="Center"
                            Background="Transparent"
                            IsVisible="{Binding IsRestartRequested}"
                            Click="OnRestartNowClick">
                        <StackPanel Orientation="Horizontal"
                                    Spacing="6">
                            <fi:FluentIcon x:Name="RestartButtonIcon"
                                           Icon="ArrowSync"
                                           IconVariant="Regular" />
                            <TextBlock x:Name="RestartButtonTextBlock"
                                       Text="{Binding RestartButtonText}" />
                        </StackPanel>
                    </Button>

                    <Button x:Name="MoreOptionsButton"
                            Classes="titlebar-icon-button"
                            ToolTip.Tip="{Binding MoreOptionsText}">
                        <fi:FluentIcon Icon="MoreHorizontal"
                                       IconVariant="Regular"
                                       FontSize="17"
                                       Foreground="{DynamicResource TextFillColorPrimaryBrush}" />
                        <Button.Flyout>
                            <MenuFlyout>
                                <MenuItem Header="{Binding RestartMenuItemText}"
                                          Click="OnRestartMenuItemClick">
                                    <MenuItem.Icon>
                                        <fi:FluentIcon Icon="ArrowSync"
                                                       IconVariant="Regular" />
                                    </MenuItem.Icon>
                                </MenuItem>
                            </MenuFlyout>
                        </Button.Flyout>
                    </Button>

                    <Border Width="140"
                            Background="Transparent"
                            IsHitTestVisible="False"
                            IsVisible="{Binding IsWindowsOs}" />
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</faWindowing:FAAppWindow>