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

<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="Microsoft.CmdPal.UI.Settings.DockSettingsPage"
    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:converters="using:CommunityToolkit.WinUI.Converters"
    xmlns:cpControls="using:Microsoft.CmdPal.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dockVm="using:Microsoft.CmdPal.UI.ViewModels.Dock"
    xmlns:helpers="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:local="using:Microsoft.CmdPal.UI.Settings"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ptcontrols="using:Microsoft.PowerToys.Common.UI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
    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}">

                    <!--
                        I got these from the samples, but they break XAML hot-reloading,
                        so I commented them out.
                    -->

                    <!--<StackPanel.ChildrenTransitions>
                  <EntranceThemeTransition FromVerticalOffset="50" />
                  <RepositionThemeTransition IsStaggeringEnabled="False" />
              </StackPanel.ChildrenTransitions>-->

                    <!--  Enable Dock  -->
                    <controls:SettingsCard x:Uid="Settings_GeneralPage_EnableDock_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xF596;}">
                        <ToggleSwitch IsOn="{x:Bind ViewModel.EnableDock, Mode=TwoWay}" />
                    </controls:SettingsCard>

                    <!--  Appearance Section  -->
                    <TextBlock x:Uid="DockAppearanceSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <!--  Dock Position  -->
                    <controls:SettingsCard x:Uid="DockAppearance_DockPosition_SettingsCard">
                        <controls:SettingsCard.HeaderIcon>
                            <SymbolIcon Symbol="MoveToFolder" />
                        </controls:SettingsCard.HeaderIcon>
                        <ComboBox
                            x:Name="DockPositionComboBox"
                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                            SelectedIndex="{x:Bind SelectedSideIndex, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="DockAppearance_DockPosition_Left" />
                            <ComboBoxItem x:Uid="DockAppearance_DockPosition_Top" />
                            <ComboBoxItem x:Uid="DockAppearance_DockPosition_Right" />
                            <ComboBoxItem x:Uid="DockAppearance_DockPosition_Bottom" />
                        </ComboBox>
                    </controls:SettingsCard>

                    <controls:SettingsCard x:Uid="DockAppearance_AppTheme_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE793;}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.DockAppearance.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>

                    <!--  Backdrop Style  -->
                    <controls:SettingsCard x:Uid="DockAppearance_Backdrop_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xF5EF;}">
                        <ComboBox
                            x:Name="BackdropComboBox"
                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                            SelectedIndex="{x:Bind ViewModel.DockAppearance.BackdropIndex, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="DockAppearance_Backdrop_Transparent" />
                            <ComboBoxItem x:Uid="DockAppearance_Backdrop_Acrylic" />
                        </ComboBox>
                    </controls:SettingsCard>

                    <!--  Background / Colorization Section  -->
                    <controls:SettingsExpander
                        x:Uid="DockAppearance_Background_SettingsExpander"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE790;}"
                        IsExpanded="{x:Bind ViewModel.DockAppearance.IsColorizationDetailsExpanded, Mode=TwoWay}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.DockAppearance.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="DockAppearance_NoBackground_SettingsCard"
                                HorizontalContentAlignment="Stretch"
                                ContentAlignment="Vertical"
                                Visibility="{x:Bind ViewModel.DockAppearance.IsNoBackgroundVisible, Mode=OneWay}">
                                <TextBlock
                                    x:Uid="DockAppearance_NoBackground_DescriptionTextBlock"
                                    Margin="24"
                                    HorizontalAlignment="Stretch"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    HorizontalTextAlignment="Center"
                                    TextAlignment="Center"
                                    TextWrapping="WrapWholeWords" />
                            </controls:SettingsCard>

                            <!--  system accent color  -->
                            <controls:SettingsCard x:Uid="DockAppearance_WindowsAccentColor_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.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.DockAppearance.EffectiveThemeColor, Mode=OneWay}" />
                                        </Border.Background>
                                    </Border>
                                </controls:SettingsCard.Content>
                            </controls:SettingsCard>

                            <!--  background image  -->
                            <controls:SettingsCard
                                x:Uid="DockAppearance_BackgroundImage_SettingsCard"
                                Description="{x:Bind ViewModel.DockAppearance.BackgroundImagePath, Mode=OneWay}"
                                Visibility="{x:Bind ViewModel.DockAppearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Button x:Uid="Settings_GeneralPage_BackgroundImage_ChooseImageButton" Click="PickBackgroundImage_Click" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="DockAppearance_BackgroundImageBrightness_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="-100"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.DockAppearance.BackgroundImageBrightness, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="DockAppearance_BackgroundImageBlur_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="50"
                                    Minimum="0"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.DockAppearance.BackgroundImageBlurAmount, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="DockAppearance_BackgroundImageFit_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <ComboBox SelectedIndex="{x:Bind ViewModel.DockAppearance.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="DockAppearance_BackgroundTint_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsCustomTintVisible, Mode=OneWay}">
                                <cpControls:ColorPickerButton
                                    HasSelectedColor="True"
                                    IsAlphaEnabled="False"
                                    PaletteColors="{x:Bind ViewModel.DockAppearance.Swatches}"
                                    SelectedColor="{x:Bind ViewModel.DockAppearance.ThemeColor, Mode=TwoWay}" />
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="DockAppearance_BackgroundTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsCustomTintIntensityVisible, Mode=OneWay}">
                                <Slider
                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
                                    Maximum="100"
                                    Minimum="1"
                                    StepFrequency="1"
                                    Value="{x:Bind ViewModel.DockAppearance.ColorIntensity, Mode=TwoWay}" />
                            </controls:SettingsCard>

                            <!--  Reset background image properties  -->
                            <controls:SettingsCard x:Uid="DockAppearance_BackgroundImage_ResetProperties_SettingsCard" Visibility="{x:Bind ViewModel.DockAppearance.IsBackgroundControlsVisible, Mode=OneWay}">
                                <Button x:Uid="Settings_GeneralPage_Background_ResetImagePropertiesButton" Command="{x:Bind ViewModel.DockAppearance.ResetBackgroundImagePropertiesCommand}" />
                            </controls:SettingsCard>

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

                    <!--  Bands Section  -->
                    <TextBlock x:Uid="DockBandsSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <ItemsRepeater ItemsSource="{x:Bind AllDockBandItems}">
                        <ItemsRepeater.Layout>
                            <StackLayout Spacing="{StaticResource SettingsCardSpacing}" />
                        </ItemsRepeater.Layout>
                        <ItemsRepeater.ItemTemplate>
                            <DataTemplate x:DataType="dockVm:DockBandSettingsViewModel">
                                <controls:SettingsCard
                                    Description="{x:Bind Description, Mode=OneWay}"
                                    Header="{x:Bind Title, Mode=OneWay}"
                                    IsClickEnabled="False">
                                    <controls:SettingsCard.HeaderIcon>
                                        <cpControls:ContentIcon>
                                            <cpControls:ContentIcon.Content>
                                                <cpControls:IconBox
                                                    Width="20"
                                                    Height="20"
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    SourceKey="{x:Bind Icon, Mode=OneWay}"
                                                    SourceRequested="{x:Bind helpers:IconCacheProvider.SourceRequested20}" />
                                            </cpControls:ContentIcon.Content>
                                        </cpControls:ContentIcon>
                                    </controls:SettingsCard.HeaderIcon>
                                    <ToggleSwitch IsOn="{x:Bind IsPinned, Mode=TwoWay}" />
                                </controls:SettingsCard>
                            </DataTemplate>
                        </ItemsRepeater.ItemTemplate>
                    </ItemsRepeater>
                </StackPanel>
            </Grid>
        </ScrollViewer>
    </Grid>
</Page>