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}">

                    <ptControls:ScreenPreview Margin="0,0,0,16" HorizontalAlignment="Left">
                        <ptControls:CommandPalettePreview
                            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}"
                            PreviewBackgroundImageSource="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageSource, Mode=OneWay}"
                            PreviewBackgroundImageTint="{x:Bind ViewModel.Appearance.EffectiveThemeColor, Mode=OneWay}"
                            PreviewBackgroundImageTintIntensity="{x:Bind ViewModel.Appearance.ColorIntensity, Mode=OneWay}"
                            PreviewBackgroundOpacity="{x:Bind ViewModel.Appearance.EffectiveBackdrop.TintOpacity, Mode=OneWay}"
                            RequestedTheme="{x:Bind ViewModel.Appearance.EffectiveTheme, Mode=OneWay}" />
                    </ptControls:ScreenPreview>

                    <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_Background_SettingsExpander"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE790;}"
                        IsExpanded="{x:Bind ViewModel.Appearance.IsColorizationDetailsExpanded, Mode=TwoWay}">
                        <ComboBox
                            x:Uid="Settings_GeneralPage_ColorizationMode"
                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                            SelectedIndex="{x:Bind ViewModel.Appearance.ColorizationModeIndex, Mode=TwoWay}">
                            <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>
                        <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.IsCustomTintIntensityVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="1"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.Appearance.ColorIntensity, Mode=TwoWay}" />
                            </controls:SettingsCard>

                            <!--  Reset background image properties  -->
                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImage_ResetProperties_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, 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>