[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.
This commit is contained in:
Niels Laute 2020-04-28 02:35:33 +02:00 committed by GitHub
parent a047ff2228
commit 371926b202
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 11 deletions

View File

@ -13,12 +13,41 @@
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
<ListView
x:Name="SuggestionsList"
x:FieldModifier="public"
MaxHeight="{Binding Results.MaxHeight}"
@ -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}" />
<TextBlock x:Name="Title" Grid.Column="1" Text="{Binding Result.Title}" FontWeight="SemiBold" FontSize="20" VerticalAlignment="Bottom"/>
<TextBlock x:Name="Path" Grid.Column="1" Text= "{Binding Result.SubTitle}" Grid.Row="1" Opacity="0.6" VerticalAlignment="Top"/>
<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" Margin="0,0,0,-2" VerticalAlignment="Bottom"/>
<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"
Margin="0,0,42,0"
Grid.Column="2"
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>

View File

@ -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"