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:ptcontrols="using:Microsoft.PowerToys.Common.UI.Controls"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <Grid>
        <ScrollViewer AutomationProperties.AutomationId="PageScrollViewer">
            <!--  Wrapper Grid required to work around WinUI ScrollViewer + MaxWidth layout offset issue. Do not remove.  -->
            <Grid>
                <Grid
                    MaxWidth="{StaticResource PageMaxWidth}"
                    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>
                                        <ptcontrols: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>
            </Grid>
        </ScrollViewer>
    </Grid>
</local:NavigablePage>