[Launcher] Fluent UX fixes for the results list (#2427)

* Fixed right margin

* Fixed issue where the background of the gridview would light up on pointerover.

* Fixed issue where application title/path run through command buttons. Centrally aligned image/icon.

* Updated the shadow so it looks more like a UWP ThemeShadow.

src/modules/launcher/PowerLauncher.UI/ResultList.xaml

@@ -13,11 +13,40 @@
     d:DesignWidth="720">
     <UserControl.Resources>
         <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed"/>
+        <Style x:Key="CommandButtonGridViewItemContainerStyle" TargetType="GridViewItem">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Margin" Value="0,0,0,0"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="GridViewItem">
+                        <ListViewItemPresenter x:Name="Root" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal"/>
+                                    <VisualState x:Name="Selected"/>
+                                    <VisualState x:Name="PointerOver"/>
+                                    <VisualState x:Name="PointerOverSelected"/>
+                                    <VisualState x:Name="PointerOverPressed"/>
+                                    <VisualState x:Name="Pressed"/>
+                                    <VisualState x:Name="PressedSelected"/>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="DisabledStates">
+                                    <VisualState x:Name="Enabled"/>
+                                    <VisualState x:Name="Disabled"/>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </ListViewItemPresenter>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
     </UserControl.Resources>
+    
     <Grid 
         x:Name="PowerBar"
         Background="{ThemeResource BackdropAcrylicBrush}"        
         VerticalAlignment="Top">
+
         <ListView
             x:Name="SuggestionsList"
             x:FieldModifier="public"
@@ -46,21 +75,23 @@
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="64" />
                             <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <Grid.RowDefinitions >
                             <RowDefinition Height="*"/>
                             <RowDefinition Height="*"/>
                         </Grid.RowDefinitions>
-                        <Image x:Name="AppIcon" Height="36" Margin="8,0,0,0" Grid.RowSpan="2" HorizontalAlignment="Left" Source="{Binding Image}" />
+                        <Image x:Name="AppIcon" Height="36" Grid.RowSpan="2" Margin="-8,0,0,0" HorizontalAlignment="Center" Source="{Binding Image}" />
-                        <TextBlock x:Name="Title" Grid.Column="1" Text="{Binding Result.Title}" FontWeight="SemiBold" FontSize="20" VerticalAlignment="Bottom"/>
+                        <TextBlock x:Name="Title" Grid.Column="1" Text="{Binding Result.Title}" FontWeight="SemiBold" FontSize="20" Margin="0,0,0,-2" VerticalAlignment="Bottom"/>
-                        <TextBlock x:Name="Path" Grid.Column="1" Text= "{Binding Result.SubTitle}" Grid.Row="1" Opacity="0.6" VerticalAlignment="Top"/>
+                        <TextBlock x:Name="Path" Grid.Column="1" Text= "{Binding Result.SubTitle}" Grid.Row="1" Opacity="0.6" Margin="0,2,0,0" VerticalAlignment="Top"/>
                         <GridView 
+                                   ItemContainerStyle="{StaticResource CommandButtonGridViewItemContainerStyle}"
                                    HorizontalAlignment="Right" 
                                    VerticalAlignment="Center"
                                    CornerRadius="4"
                                    Grid.RowSpan="2" 
-                                   Grid.Column="1"
+                                   Grid.Column="2"
-                                   Margin="0,0,42,0"
+                                   Margin="8,0,17,0"
                                    Height="46"
                                    Visibility="{Binding AreContextButtonsActive, Converter={StaticResource BoolToVisibilityConverter}}"
                                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
@@ -70,7 +101,7 @@
                                    SelectedIndex="{Binding ContextMenuSelectedIndex}">
                             <GridView.ItemTemplate>
                                 <DataTemplate>
-                                    <Button Command="{Binding Command}" VerticalAlignment="Center" CornerRadius="4" Height="42" Width="42" BorderThickness="1" Style="{ThemeResource ButtonRevealStyle}">
+                                    <Button Command="{Binding Command}" VerticalAlignment="Center" CornerRadius="4" Height="42" Width="42" BorderThickness="1" Style="{ThemeResource IconOnlyButton}">
                                         <ToolTipService.ToolTip>
                                             <TextBlock Text="{Binding Title}"/>
                                         </ToolTipService.ToolTip>

src/modules/launcher/PowerLauncher/MainWindow.xaml

@@ -33,11 +33,11 @@
         <Border 
             x:Name="SearchBoxBorder" 
             Grid.Row="0" 
-            Margin="8" 
+            Margin="24,24,24,8"  
             BorderThickness="4" 
             CornerRadius="4">
             <Border.Effect>
-                <DropShadowEffect BlurRadius="12" Opacity="0.4" ShadowDepth="4" />
+                <DropShadowEffect BlurRadius="12" Opacity="0.4" ShadowDepth="0" />
             </Border.Effect>
             <xaml:WindowsXamlHost 
                 InitialTypeName="PowerLauncher.UI.LauncherControl" 
@@ -46,12 +46,12 @@
         <Border 
             x:Name="ListBoxBorder"
             Grid.Row="1" 
-            Margin="8" 
+            Margin="24,8,24,24" 
             BorderThickness="4"
             CornerRadius="4" 
             Visibility="{Binding Results.Visbility}">
             <Border.Effect>
-                <DropShadowEffect BlurRadius="12" Opacity="0.4" ShadowDepth="4" />
+                <DropShadowEffect BlurRadius="12" Opacity="0.4" ShadowDepth="0" />
             </Border.Effect>
             <xaml:WindowsXamlHost 
                 InitialTypeName="PowerLauncher.UI.ResultList"