PowerToys/src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml

<local:NavigablePage
    x:Class="Microsoft.PowerToys.Settings.UI.Views.CmdPalPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <Grid>
        <ScrollViewer AutomationProperties.AutomationId="PageScrollViewer">
            <Grid
                MaxWidth="1000"
                Padding="16,0,16,0"
                VerticalAlignment="Top"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="16"
                RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <tkcontrols:OpacityMaskView
                    Margin="-16,0,-16,0"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch">
                    <tkcontrols:OpacityMaskView.OpacityMask>
                        <Rectangle>
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="0.50" Color="Black" />
                                    <GradientStop Offset="0.75" Color="#80000000" />
                                    <GradientStop Offset="0.95" Color="Transparent" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </tkcontrols:OpacityMaskView.OpacityMask>
                    <Grid MaxHeight="560">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <!--  Top-left: light cyan/blue  -->
                                <GradientStop Offset="0.0" Color="#5FAFC9" />

                                <!--  Mid transition  -->
                                <GradientStop Offset="0.45" Color="#3E7FB0" />

                                <!--  Bottom-right: deep blue  -->
                                <GradientStop Offset="1.0" Color="#2C3E8F" />
                            </LinearGradientBrush>
                        </Grid.Background>
                        <TextBlock
                            x:Uid="CmdPal_HeroTitle"
                            Margin="0,24,0,12"
                            HorizontalAlignment="Center"
                            FontSize="36"
                            FontWeight="Bold">
                            <TextBlock.Foreground>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Offset="0.0" Color="#FFB9EBFF" />
                                    <GradientStop Offset="0.49" Color="#FF86CBFF" />
                                    <GradientStop Offset="1.0" Color="#FFA1E7FF" />
                                </LinearGradientBrush>
                            </TextBlock.Foreground>
                        </TextBlock>
                        <TextBlock
                            Grid.Row="1"
                            HorizontalAlignment="Center"
                            Foreground="White"
                            TextAlignment="Center"
                            TextWrapping="Wrap">
                            <Run x:Uid="CmdPal_Description" />
                            <Hyperlink NavigateUri="">
                                <Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
                            </Hyperlink>
                        </TextBlock>
                        <Image
                            Grid.Row="2"
                            Margin="0,16,0,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Top"
                            Source="/Assets/Settings/Modules/CmdPal.png"
                            Stretch="Uniform" />
                    </Grid>
                </tkcontrols:OpacityMaskView>

                <Grid
                    Grid.Row="1"
                    Margin="0,-12,0,24"
                    ColumnSpacing="32"
                    RowSpacing="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <FontIcon
                        HorizontalAlignment="Center"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Glyph="&#xEB3B;" />
                    <TextBlock
                        Grid.Row="1"
                        HorizontalAlignment="Center"
                        TextAlignment="Center"
                        TextWrapping="Wrap">
                        <Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
                        <Run
                            x:Uid="CmdPal_ExtensibleDescription"
                            FontSize="12"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </TextBlock>

                    <FontIcon
                        Grid.Column="1"
                        HorizontalAlignment="Center"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Glyph="&#xE945;" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        HorizontalAlignment="Center"
                        TextAlignment="Center"
                        TextWrapping="Wrap">
                        <Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
                        <Run
                            x:Uid="CmdPal_FastDescription"
                            FontSize="12"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </TextBlock>

                    <FontIcon
                        Grid.Column="2"
                        HorizontalAlignment="Center"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Glyph="&#xE790;" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="2"
                        HorizontalAlignment="Center"
                        TextAlignment="Center"
                        TextWrapping="Wrap">
                        <Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
                        <Run
                            x:Uid="CmdPal_ModernDescription"
                            FontSize="12"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </TextBlock>
                </Grid>
                <StackPanel
                    Grid.Row="2"
                    Margin="0,8,0,0"
                    Orientation="Vertical"
                    Spacing="{StaticResource SettingsCardSpacing}">
                    <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
                        <tkcontrols:SettingsCard
                            Name="CmdPalEnableCmdPal"
                            x:Uid="CmdPal_Enable_CmdPal"
                            HorizontalAlignment="Stretch"
                            HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                        </tkcontrols:SettingsCard>
                    </controls:GPOInfoControl>
                    <tkcontrols:SettingsCard
                        x:Uid="CmdPal_Launch"
                        Grid.Row="3"
                        ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
                        Click="LaunchCard_Click"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
                        IsClickEnabled="True"
                        IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                        <ItemsControl
                            AutomationProperties.AccessibilityView="Raw"
                            IsTabStop="False"
                            ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" Spacing="4" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <controls:KeyVisual
                                        Padding="8,8,8,8"
                                        VerticalAlignment="Center"
                                        AutomationProperties.AccessibilityView="Raw"
                                        Content="{Binding}"
                                        Style="{StaticResource AccentKeyVisualStyle}" />
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </tkcontrols:SettingsCard>
                    <tkcontrols:SettingsCard
                        x:Uid="CmdPal_Settings"
                        Grid.Row="4"
                        ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
                        Click="SettingsCard_Click"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
                        IsClickEnabled="True"
                        IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
                </StackPanel>
            </Grid>
        </ScrollViewer>
    </Grid>
</local:NavigablePage>