PowerToys/src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/AppearancePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="Microsoft.CmdPal.UI.Settings.AppearancePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ptControls="using:Microsoft.CmdPal.UI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="1">
            <Grid Padding="16">
                <StackPanel
                    MaxWidth="1000"
                    HorizontalAlignment="Stretch"
                    Spacing="{StaticResource SettingsCardSpacing}">

                    <StackPanel
                        Margin="0,0,0,16"
                        HorizontalAlignment="Left"
                        Orientation="Horizontal"
                        Spacing="16">
                        <ptControls:ScreenPreview>
                            <ptControls:CommandPalettePreview
                                PreviewBackdropStyle="{x:Bind ViewModel.Appearance.EffectiveBackdropStyle, Mode=OneWay}"
                                PreviewBackgroundColor="{x:Bind ViewModel.Appearance.EffectiveBackdrop.TintColor, Mode=OneWay}"
                                PreviewBackgroundImageBlurAmount="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBlurAmount, Mode=OneWay}"
                                PreviewBackgroundImageBrightness="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBrightness, Mode=OneWay}"
                                PreviewBackgroundImageFit="{x:Bind ViewModel.Appearance.BackgroundImageFit, Mode=OneWay}"
                                PreviewBackgroundImageOpacity="{x:Bind ViewModel.Appearance.EffectiveImageOpacity, Mode=OneWay}"
                                PreviewBackgroundImageSource="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageSource, Mode=OneWay}"
                                PreviewBackgroundImageTint="{x:Bind ViewModel.Appearance.EffectiveThemeColor, Mode=OneWay}"
                                PreviewBackgroundImageTintIntensity="{x:Bind ViewModel.Appearance.EffectiveTintIntensity, Mode=OneWay}"
                                PreviewEffectiveOpacity="{x:Bind ViewModel.Appearance.EffectiveBackdrop.EffectiveOpacity, Mode=OneWay}"
                                RequestedTheme="{x:Bind ViewModel.Appearance.EffectiveTheme, Mode=OneWay}" />
                        </ptControls:ScreenPreview>
                        <StackPanel VerticalAlignment="Bottom" Spacing="8">
                            <Button
                                x:Uid="Settings_AppearancePage_OpenCommandPaletteButton"
                                MinWidth="200"
                                HorizontalContentAlignment="Left"
                                Click="OpenCommandPalette_Click"
                                Style="{StaticResource SubtleButtonStyle}">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon FontSize="16" Glyph="&#xE8A7;" />
                                    <TextBlock x:Uid="Settings_AppearancePage_OpenCommandPaletteButton_Text" />
                                </StackPanel>
                            </Button>
                            <Button
                                x:Uid="Settings_AppearancePage_ResetAppearanceButton"
                                MinWidth="200"
                                HorizontalContentAlignment="Left"
                                Command="{x:Bind ViewModel.Appearance.ResetAppearanceSettingsCommand}"
                                Style="{StaticResource SubtleButtonStyle}">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon FontSize="16" Glyph="&#xE72C;" />
                                    <TextBlock x:Uid="Settings_AppearancePage_ResetAppearanceButton_Text" />
                                </StackPanel>
                            </Button>
                        </StackPanel>
                    </StackPanel>

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_AppTheme_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE793;}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.Appearance.ThemeIndex, Mode=TwoWay}">

                            <ComboBoxItem x:Uid="Settings_GeneralPage_AppTheme_Mode_System_Automation" Tag="Default">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon FontSize="16" Glyph="&#xE770;" />
                                    <TextBlock x:Uid="Settings_GeneralPage_AppTheme_Mode_System" />
                                </StackPanel>
                            </ComboBoxItem>

                            <ComboBoxItem x:Uid="Settings_GeneralPage_AppTheme_Mode_Light_Automation" Tag="Light">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon FontSize="16" Glyph="&#xE706;" />
                                    <TextBlock x:Uid="Settings_GeneralPage_AppTheme_Mode_Light" />
                                </StackPanel>
                            </ComboBoxItem>

                            <ComboBoxItem x:Uid="Settings_GeneralPage_AppTheme_Mode_Dark_Automation" Tag="Dark">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon FontSize="16" Glyph="&#xE708;" />
                                    <TextBlock x:Uid="Settings_GeneralPage_AppTheme_Mode_Dark" />
                                </StackPanel>
                            </ComboBoxItem>

                        </ComboBox>
                    </controls:SettingsCard>

                    <controls:SettingsExpander
                        x:Uid="Settings_GeneralPage_BackdropStyle_SettingsCard"
                        HeaderIcon="{ui:FontIcon Glyph=&#xF5EF;}"
                        IsExpanded="{x:Bind ViewModel.Appearance.IsBackdropOpacityVisible, Mode=OneWay}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.Appearance.BackdropStyleIndex, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Acrylic" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Transparent" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Mica" />
                            <!--  Hidden: preview not working well, kept to preserve index mapping  -->
                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_AcrylicThin" Visibility="Collapsed" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_MicaAlt" />
                        </ComboBox>
                        <controls:SettingsExpander.Items>
                            <!--  Mica description (no opacity control)  -->
                            <controls:SettingsCard
                                x:Uid="Settings_GeneralPage_MicaBackdrop_SettingsCard"
                                HorizontalContentAlignment="Stretch"
                                ContentAlignment="Vertical"
                                Visibility="{x:Bind ViewModel.Appearance.IsMicaBackdropDescriptionVisible, Mode=OneWay}">
                                <TextBlock
                                    x:Uid="Settings_GeneralPage_MicaBackdrop_DescriptionTextBlock"
                                    Margin="24"
                                    HorizontalAlignment="Stretch"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    HorizontalTextAlignment="Center"
                                    TextAlignment="Center"
                                    TextWrapping="WrapWholeWords" />
                            </controls:SettingsCard>
                            <!--  Opacity slider (for non-Mica styles)  -->
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackdropOpacity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackdropOpacityVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="0"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.BackdropOpacity, Mode=TwoWay}" />
                            </controls:SettingsCard>
                        </controls:SettingsExpander.Items>
                    </controls:SettingsExpander>

                    <controls:SettingsExpander
                        x:Uid="Settings_GeneralPage_Background_SettingsExpander"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE790;}"
                        IsEnabled="{x:Bind ViewModel.Appearance.IsBackgroundSettingsEnabled, Mode=OneWay}"
                        IsExpanded="{x:Bind ViewModel.Appearance.IsColorizationDetailsExpanded, Mode=TwoWay}">
                        <Grid>
                            <ComboBox
                                x:Uid="Settings_GeneralPage_ColorizationMode"
                                MinWidth="{StaticResource SettingActionControlMinWidth}"
                                SelectedIndex="{x:Bind ViewModel.Appearance.ColorizationModeIndex, Mode=TwoWay}"
                                Visibility="{x:Bind ViewModel.Appearance.IsBackgroundSettingsEnabled, Mode=OneWay}">
                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_None" />
                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_WindowsAccent" />
                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_CustomColor" />
                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_Image" />
                            </ComboBox>
                            <TextBlock
                                x:Uid="Settings_GeneralPage_Background_NotAvailable"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Visibility="{x:Bind ViewModel.Appearance.IsBackgroundNotAvailableVisible, Mode=OneWay}" />
                        </Grid>
                        <controls:SettingsExpander.Items>
                            <!--  none  -->
                            <controls:SettingsCard
                                x:Uid="Settings_GeneralPage_NoBackground_SettingsCard"
                                HorizontalContentAlignment="Stretch"
                                ContentAlignment="Vertical"
                                Visibility="{x:Bind ViewModel.Appearance.IsNoBackgroundVisible, Mode=OneWay}">
                                <TextBlock
                                    x:Uid="Settings_GeneralPage_NoBackground_DescriptionTextBlock"
                                    Margin="24"
                                    HorizontalAlignment="Stretch"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    HorizontalTextAlignment="Center"
                                    TextAlignment="Center"
                                    TextWrapping="WrapWholeWords" />
                            </controls:SettingsCard>

                            <!--  system accent color  -->
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_WindowsAccentColor_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsAccentColorControlsVisible, Mode=OneWay}">
                                <controls:SettingsCard.Description>
                                    <TextBlock>
                                        <Run x:Uid="Settings_GeneralPage_WindowsAccentColor_SettingsCard_Description1" />
                                        <Hyperlink
                                            Click="OpenWindowsColorsSettings_Click"
                                            TextDecorations="None"
                                            UnderlineStyle="None">
                                            <Run x:Uid="Settings_GeneralPage_WindowsAccentColor_OpenWindowsColorsLinkText" />
                                        </Hyperlink>
                                    </TextBlock>
                                </controls:SettingsCard.Description>
                                <controls:SettingsCard.Content>
                                    <Border
                                        MinWidth="32"
                                        MinHeight="32"
                                        CornerRadius="{ThemeResource ControlCornerRadius}">
                                        <Border.Background>
                                            <SolidColorBrush Color="{x:Bind ViewModel.Appearance.EffectiveThemeColor, Mode=OneWay}" />
                                        </Border.Background>
                                    </Border>
                                </controls:SettingsCard.Content>
                            </controls:SettingsCard>

                            <!--  background  -->
                            <controls:SettingsCard
                                x:Uid="Settings_GeneralPage_BackgroundImage_SettingsCard"
                                Description="{x:Bind ViewModel.Appearance.BackgroundImagePath, Mode=OneWay}"
                                Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Button x:Uid="Settings_GeneralPage_BackgroundImage_ChooseImageButton" Click="PickBackgroundImage_Click" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImageBrightness_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="-100"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.BackgroundImageBrightness, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImageBlur_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="50"
                                    Minimum="0"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.BackgroundImageBlurAmount, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImageFit_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <ComboBox SelectedIndex="{x:Bind ViewModel.Appearance.BackgroundImageFitIndex, Mode=TwoWay}">
                                    <ComboBoxItem x:Uid="BackgroundImageFit_ComboBoxItem_Fill" />
                                    <ComboBoxItem x:Uid="BackgroundImageFit_ComboBoxItem_Stretch" />
                                </ComboBox>
                            </controls:SettingsCard>

                            <!--  Background tint color and intensity  -->
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundTint_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsCustomTintVisible, Mode=OneWay}">
                                <ptControls:ColorPickerButton
                                    HasSelectedColor="True"
                                    IsAlphaEnabled="False"
                                    PaletteColors="{x:Bind ViewModel.Appearance.Swatches}"
                                    SelectedColor="{x:Bind ViewModel.Appearance.ThemeColor, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsColorIntensityVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="1"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.ColorIntensity, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_ImageTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsImageTintIntensityVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="0"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.BackgroundImageTintIntensity, Mode=TwoWay}" />
                            </controls:SettingsCard>

                            <!--  Reset appearance properties  -->
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImage_ResetProperties_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsResetButtonVisible, Mode=OneWay}">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <Button x:Uid="Settings_GeneralPage_Background_ResetImagePropertiesButton" Command="{x:Bind ViewModel.Appearance.ResetBackgroundImagePropertiesCommand}" />
                                </StackPanel>
                            </controls:SettingsCard>

                        </controls:SettingsExpander.Items>
                    </controls:SettingsExpander>

                    <!--  'Behavior' section  -->

                    <TextBlock x:Uid="BehaviorSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_ShowAppDetails_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE8A0;}">
                        <ToggleSwitch IsOn="{x:Bind ViewModel.ShowAppDetails, Mode=TwoWay}" />
                    </controls:SettingsCard>

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_BackspaceGoesBack_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE750;}">
                        <ToggleSwitch IsOn="{x:Bind ViewModel.BackspaceGoesBack, Mode=TwoWay}" />
                    </controls:SettingsCard>

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_EscapeKeyBehavior_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE845;}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.EscapeKeyBehaviorIndex, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="Settings_GeneralPage_EscapeKeyBehavior_Option_DismissEmptySearchOrGoBack" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_EscapeKeyBehavior_Option_AlwaysGoBack" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_EscapeKeyBehavior_Option_AlwaysDismiss" />
                            <ComboBoxItem x:Uid="Settings_GeneralPage_EscapeKeyBehavior_Option_AlwaysHide" />
                        </ComboBox>
                    </controls:SettingsCard>

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_SingleClickActivation_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE962;}">
                        <ToggleSwitch IsOn="{x:Bind ViewModel.SingleClickActivates, Mode=TwoWay}" />
                    </controls:SettingsCard>

                    <controls:SettingsCard x:Uid="Settings_GeneralPage_DisableAnimations_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE945;}">
                        <ToggleSwitch IsOn="{x:Bind ViewModel.DisableAnimations, Mode=TwoWay}" />
                    </controls:SettingsCard>
                </StackPanel>
            </Grid>
        </ScrollViewer>
    </Grid>
</Page>