Dynamic Height and Dynamic Icon Size

This commit is contained in:
Hongtao Zhang 2023-01-08 16:31:37 -06:00
parent c0f46f24de
commit a92ebf5756
No known key found for this signature in database
GPG key ID: 75F655B91C7AC9BB
5 changed files with 156 additions and 61 deletions

View file

@ -0,0 +1,25 @@
using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
namespace Flow.Launcher.Converters
{
public class DiameterToCenterPointConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double d)
{
return new Point(d / 2, d / 2);
}
return new Point(0, 0);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
}

View file

@ -0,0 +1,27 @@
using System;
using System.Globalization;
using System.Windows.Data;
using Windows.Devices.PointOfService;
namespace Flow.Launcher.Converters
{
public class IconRadiusConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values.Length != 2)
throw new ArgumentException("IconRadiusConverter must have 2 parameters");
return values[1] switch
{
true => (double)values[0] / 2,
false => (double)values[0],
_ => throw new ArgumentException("The second argument should be boolean", nameof(values))
};
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
}

View file

@ -1,5 +1,4 @@
<ListBox
x:Class="Flow.Launcher.ResultListBox"
<ListBox x:Class="Flow.Launcher.ResultListBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converter="clr-namespace:Flow.Launcher.Converters"
@ -31,6 +30,10 @@
mc:Ignorable="d">
<!-- IsSynchronizedWithCurrentItem: http://stackoverflow.com/a/7833798/2833083 -->
<ListBox.Resources>
<converter:IconRadiusConverter x:Key="IconRadiusConverter" />
<converter:DiameterToCenterPointConverter x:Key="DiameterToCenterPointConverter" />
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Button HorizontalAlignment="Stretch">
@ -40,8 +43,7 @@
</ControlTemplate>
</Button.Template>
<Button.Content>
<Grid
Margin="0"
<Grid Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Cursor="Hand"
@ -54,28 +56,30 @@
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="Auto" MinWidth="8" />
<ColumnDefinition Width="Auto"
MinWidth="8" />
</Grid.ColumnDefinitions>
<StackPanel
x:Name="HotkeyArea"
<StackPanel x:Name="HotkeyArea"
Grid.Column="2"
Margin="0,0,10,0"
VerticalAlignment="Center"
Visibility="{Binding ShowOpenResultHotkey}">
<TextBlock
x:Name="Hotkey"
<TextBlock x:Name="Hotkey"
Margin="12,0,12,0"
Padding="0,0,0,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Style="{DynamicResource ItemHotkeyStyle}">
<TextBlock.Visibility>
<Binding Converter="{StaticResource ResourceKey=OpenResultHotkeyVisibilityConverter}" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}" />
<Binding
Converter="{StaticResource ResourceKey=OpenResultHotkeyVisibilityConverter}"
RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}" />
</TextBlock.Visibility>
<TextBlock.Text>
<MultiBinding StringFormat="{}{0}+{1}">
<Binding Path="OpenResultModifiers" />
<Binding Converter="{StaticResource ResourceKey=OrdinalConverter}" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}" />
<Binding Converter="{StaticResource ResourceKey=OrdinalConverter}"
RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
@ -87,20 +91,16 @@
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
x:Name="Bullet"
<Border x:Name="Bullet"
Grid.Column="0"
Style="{DynamicResource BulletStyle}" />
<Border
Grid.Column="1"
<Border Grid.Column="1"
Margin="9,0,0,0"
BorderBrush="Transparent"
BorderThickness="1">
<Image
x:Name="ImageIcon"
Width="{Binding IconXY}"
Height="{Binding IconXY}"
<Image x:Name="ImageIcon"
Style="{DynamicResource ImageIconStyle}"
Margin="0,0,0,0"
HorizontalAlignment="Center"
IsHitTestVisible="False"
@ -110,19 +110,30 @@
Visibility="{Binding ShowIcon}">
<Image.Clip>
<EllipseGeometry
Center="16 16"
RadiusX="{Binding IconRadius}"
RadiusY="{Binding IconRadius}" />
Center="{Binding ElementName=ImageIcon, Path=ActualWidth, Converter={StaticResource DiameterToCenterPointConverter}}">
<EllipseGeometry.RadiusX>
<MultiBinding Converter="{StaticResource IconRadiusConverter}">
<Binding ElementName="ImageIcon"
Path="ActualWidth" />
<Binding Path="Result.RoundedIcon" />
</MultiBinding>
</EllipseGeometry.RadiusX>
<EllipseGeometry.RadiusY>
<MultiBinding Converter="{StaticResource IconRadiusConverter}">
<Binding ElementName="ImageIcon"
Path="ActualWidth" />
<Binding Path="Result.RoundedIcon" />
</MultiBinding>
</EllipseGeometry.RadiusY>
</EllipseGeometry>
</Image.Clip>
</Image>
</Border>
<Border
Grid.Column="1"
<Border Grid.Column="1"
Margin="9,0,0,0"
BorderBrush="Transparent"
BorderThickness="0">
<TextBlock
x:Name="GlyphIcon"
<TextBlock x:Name="GlyphIcon"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="{Binding Glyph.FontFamily}"
@ -132,33 +143,35 @@
</Border>
</Grid>
<Grid
Grid.Column="1"
<Grid Grid.Column="1"
Margin="6,0,10,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition x:Name="SubTitleRowDefinition" Height="Auto" />
<RowDefinition x:Name="SubTitleRowDefinition"
Height="Auto" />
</Grid.RowDefinitions>
<ProgressBar
x:Name="progressbarResult"
<ProgressBar x:Name="progressbarResult"
Grid.Row="0"
Foreground="{Binding Result.ProgressBarColor}"
Value="{Binding ResultProgress, Mode=OneWay}">
<ProgressBar.Style>
<Style BasedOn="{StaticResource ProgressBarResult}" TargetType="ProgressBar">
<Setter Property="Visibility" Value="Visible" />
<Style BasedOn="{StaticResource ProgressBarResult}"
TargetType="ProgressBar">
<Setter Property="Visibility"
Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Result.ProgressBar}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
<DataTrigger Binding="{Binding Result.ProgressBar}"
Value="{x:Null}">
<Setter Property="Visibility"
Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</ProgressBar.Style>
</ProgressBar>
<TextBlock
x:Name="Title"
<TextBlock x:Name="Title"
Grid.Row="0"
VerticalAlignment="Center"
DockPanel.Dock="Left"
@ -175,8 +188,7 @@
</MultiBinding>
</vm:ResultsViewModel.FormattedText>
</TextBlock>
<TextBlock
x:Name="SubTitle"
<TextBlock x:Name="SubTitle"
Grid.Row="1"
IsEnabled="False"
Style="{DynamicResource ItemSubTitleStyle}"
@ -191,13 +203,27 @@
</Button>
<!-- a result item height is 52 including margin -->
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
<Setter TargetName="Bullet" Property="Style" Value="{DynamicResource ItemBulletSelectedStyle}" />
<Setter TargetName="Title" Property="Style" Value="{DynamicResource ItemTitleSelectedStyle}" />
<Setter TargetName="SubTitle" Property="Style" Value="{DynamicResource ItemSubTitleSelectedStyle}" />
<Setter TargetName="Hotkey" Property="Style" Value="{DynamicResource ItemHotkeySelectedStyle}" />
<Setter TargetName="ImageIcon" Property="Style" Value="{DynamicResource ItemImageSelectedStyle}" />
<Setter TargetName="GlyphIcon" Property="Style" Value="{DynamicResource ItemGlyphSelectedStyle}" />
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
Value="True">
<Setter TargetName="Bullet"
Property="Style"
Value="{DynamicResource ItemBulletSelectedStyle}" />
<Setter TargetName="Title"
Property="Style"
Value="{DynamicResource ItemTitleSelectedStyle}" />
<Setter TargetName="SubTitle"
Property="Style"
Value="{DynamicResource ItemSubTitleSelectedStyle}" />
<Setter TargetName="Hotkey"
Property="Style"
Value="{DynamicResource ItemHotkeySelectedStyle}" />
<Setter TargetName="ImageIcon"
Property="Style"
Value="{DynamicResource ItemImageSelectedStyle}" />
<Setter TargetName="GlyphIcon"
Property="Style"
Value="{DynamicResource ItemGlyphSelectedStyle}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
@ -205,24 +231,28 @@
<!-- http://stackoverflow.com/questions/16819577/setting-background-color-or-wpf-4-0-listbox-windows-8/#16820062 -->
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="MouseEnter" Handler="OnMouseEnter" />
<EventSetter Event="MouseMove" Handler="OnMouseMove" />
<Setter Property="Height" Value="52" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<EventSetter Event="MouseEnter"
Handler="OnMouseEnter" />
<EventSetter Event="MouseMove"
Handler="OnMouseMove" />
<Setter Property="Height"
Value="{DynamicResource ResultItemHeight}" />
<Setter Property="Margin"
Value="0" />
<Setter Property="Padding"
Value="0" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
x:Name="Bd"
<Border x:Name="Bd"
Margin="{DynamicResource ItemMargin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{DynamicResource ItemRadius}"
SnapsToDevicePixels="True">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
@ -230,9 +260,14 @@
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource ItemSelectedBackgroundColor}" />
<Setter TargetName="Bd" Property="BorderBrush" Value="{DynamicResource ItemSelectedBackgroundColor}" />
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource ItemSelectedBackgroundColor}" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="{DynamicResource ItemSelectedBackgroundColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
@ -240,4 +275,4 @@
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</ListBox>

View file

@ -8,6 +8,8 @@
<Thickness x:Key="ResultMargin">0</Thickness>
<!-- Further font customisations are dynamically loaded in Theme.cs -->
<system:Double x:Key="ResultItemHeight">52</system:Double>
<Style x:Key="BaseBulletStyle" TargetType="{x:Type Border}" />
<Style
x:Key="BulletStyle"
@ -17,6 +19,12 @@
x:Key="ItemBulletSelectedStyle"
BasedOn="{StaticResource BaseBulletStyle}"
TargetType="{x:Type Border}" />
<Style
x:Key="ImageIconStyle"
TargetType="{x:Type Image}">
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="32"/>
</Style>
<Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="0" />

View file

@ -43,7 +43,7 @@ namespace Flow.Launcher.ViewModel
#region Properties
public int MaxHeight => MaxResults * 52;
public double MaxHeight => MaxResults * (double)Application.Current.FindResource("ResultItemHeight")!;
public int SelectedIndex { get; set; }