PowerToys/src/modules/launcher/PowerLauncher/LauncherControl.xaml

<UserControl
    x:Class="PowerLauncher.LauncherControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:p="clr-namespace:PowerLauncher.Properties"
    xmlns:local="clr-namespace:PowerLauncher"
    xmlns:ui="http://schemas.modernwpf.com/2019"
             xmlns:converters="clr-namespace:PowerLauncher.Converters"
             mc:Ignorable="d" 
    d:DesignHeight="300"
    d:DesignWidth="720">
    <UserControl.Resources>
        <converters:EmptyStringToVisibilityConverter x:Key="emptyStringToVisibilityConverter" />
        <Style x:Key="QueryTextBoxStyle" TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Foreground" Value="{DynamicResource ControlTextBrushKey}"/>
            <Setter Property="CaretBrush" Value="{DynamicResource ControlTextBrushKey}"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ContextMenu" Value="{DynamicResource TextControlContextMenu}" />
            <Setter Property="ui:TextContextMenu.UsingTextContextMenu" Value="True" />
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Padding" Value="0,0,0,0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <TextBlock Margin="0, 0, 0, 0"
                                       Text="{TemplateBinding Tag}">
                                <TextBlock.Style>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Setter Property="Foreground" Value="Transparent"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                                <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                            <Border x:Name="border"
                                    Background="Transparent"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    SnapsToDevicePixels="True">
                                <ScrollViewer x:Name="PART_ContentHost"
                                              Background="{TemplateBinding Background}"
                                              Focusable="false"
                                              HorizontalScrollBarVisibility="Hidden"
                                              VerticalScrollBarVisibility="Hidden">
                                    <ScrollViewer.ContentTemplate>
                                        <DataTemplate>
                                            <Grid
                                                Background="{Binding Background, ElementName=PART_ContentHost}">
                                                <ContentPresenter Content="{Binding Path=Content, ElementName=PART_ContentHost}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </ScrollViewer.ContentTemplate>
                                </ScrollViewer>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource InactiveSelectionHighlightBrushKey}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>


    <Grid>


        <StackPanel Orientation="Vertical">
            <Grid Height="72"
                  Margin="1 "
                  Background="{DynamicResource PrimaryBackgroundBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="72" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!--
            for adding on placeholder, look at the style with 90 votes
            https://stackoverflow.com/questions/11873378/adding-placeholder-text-to-textbox
        -->
                <TextBlock AutomationProperties.Name="{x:Static p:Resources.SearchIcon}"
                           Text="&#xE721;"
                           FontFamily="Segoe MDL2 Assets"
                           FontSize="26"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Foreground="{DynamicResource TextControlPlaceholderForeground}"
                           SnapsToDevicePixels="True" />


                <TextBlock x:Name="AutoCompleteTextBlock"
                           x:FieldModifier="public"
                           Opacity="0.6"
                           Grid.Column="1"
                           Canvas.ZIndex="-1"
                           Margin="1, 0, 14, 0"
                           VerticalAlignment="Center"
                           FontSize="24"
                           Foreground="{DynamicResource TextControlPlaceholderForeground}"
                           Background="Transparent" />
                <local:CustomSearchBox AutomationProperties.Name="{x:Static p:Resources.Query}"
                                       x:Name="QueryTextBox"
                                       x:FieldModifier="public"
                                       Canvas.ZIndex="0"
                                       Margin="0, 0, 0, 0"
                                       Grid.Column="1"
                                       VerticalAlignment="Center"
                                       FontSize="24"
                                       Style="{StaticResource QueryTextBoxStyle}"
                                       Tag="{x:Static p:Resources.startTyping}" />

            </Grid>
            <Rectangle Height="1"
                       Opacity="0.4"
                       Margin="1,0,1,0"
                       Fill="{DynamicResource SecondaryTextForeground}" />
            <ui:ListView x:Name="CheatSheetControl"
                         Visibility="{Binding ElementName=QueryTextBox, Path=Text, Converter={StaticResource emptyStringToVisibilityConverter}}"
                         Margin="0,16,0,12"
                         MinWidth="0"
                         Padding="0"
                         Grid.ColumnSpan="2">
                <ui:ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border Background="{DynamicResource PrimaryBackgroundBrush}"
                                    Width="32"
                                    Margin="8,8,0,8"
                                    Height="32"
                                    HorizontalAlignment="Left"
                                    Padding="4"
                                    CornerRadius="4">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="2"
                                                      Opacity="0.32"
                                                      ShadowDepth="1" />
                                </Border.Effect>
                                <TextBlock Grid.RowSpan="2"
                                           FontWeight="SemiBold"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="15"
                                           Margin="0,-2,0,0"
                                           Foreground="{DynamicResource PrimaryTextForeground}"
                                           Text="{Binding Metadata.ActionKeyword}" />
                            </Border>
                            <TextBlock Grid.Column="1"
                                       Grid.Row="1"
                                       VerticalAlignment="Center"
                                       Margin="22,0,0,0"
                                       FontSize="12"
                                       Text="{Binding Plugin.Description}"
                                       Foreground="{DynamicResource SecondaryTextForeground}" />
                        </Grid>
                    </DataTemplate>
                </ui:ListView.ItemTemplate>
            </ui:ListView>

        </StackPanel>
    </Grid>
</UserControl>