From 2c14d1b9e89fea7ac3eb4d382044986585c19c33 Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Sat, 18 Jan 2025 16:56:44 +0800
Subject: [PATCH] feat: polish list theme.

---
 demo/Ursa.Demo/Pages/PathPickerDemo.axaml     | 213 ++++++++++--------
 .../Controls/PathPicker.axaml                 | 102 +++++++--
 2 files changed, 198 insertions(+), 117 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/PathPickerDemo.axaml b/demo/Ursa.Demo/Pages/PathPickerDemo.axaml
index fc6fc0f..599bf08 100644
--- a/demo/Ursa.Demo/Pages/PathPickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/PathPickerDemo.axaml
@@ -1,114 +1,137 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:u="https://irihi.tech/ursa"
-             xmlns:vm="using:Ursa.Demo.ViewModels"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.PathPickerDemo"
-             x:DataType="vm:PathPickerDemoViewModel">
-    <Grid ColumnDefinitions="*,*"
-          RowDefinitions="7*,3*">
-        <ScrollViewer Grid.Column="0" Grid.Row="0">
+<UserControl
+    x:Class="Ursa.Demo.Pages.PathPickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:PathPickerDemoViewModel"
+    mc:Ignorable="d">
+    <Grid ColumnDefinitions="*,*" RowDefinitions="7*,3*">
+        <ScrollViewer Grid.Row="0" Grid.Column="0">
             <StackPanel>
-                <HeaderedContentControl Theme="{DynamicResource GroupBox}"
-                                        Header="Functionality and Usage"
-                                        Content="PathPicker aggregates a file selector and provides a Command property. The Command is triggered solely after opening the file selector and selecting a file, whereupon the Command receives an IReadOnlyList&lt;string&gt; parameter.">
-                </HeaderedContentControl>
-                <u:Form LabelAlignment="Left" LabelPosition="Left" LabelWidth="*" HorizontalAlignment="Stretch">
-                    <TextBox Name="Title" u:FormItem.Label="Title" Text="选择文件"></TextBox>
-                    <TextBox Name="SuggestedFileName" u:FormItem.Label="SuggestedFileName"
-                             Watermark="filename(not have file extension)">
-                    </TextBox>
-                    <TextBox Name="SuggestedStartPath" u:FormItem.Label="SuggestedStartPath"
-                             Watermark="D:\Win7 Help\win-x64">
-                    </TextBox>
-                    <TextBox Name="FileFilter" u:FormItem.Label="FileFilter"
-                             Watermark="[Name,Pattern] like this [123,*.exe,*.pdb] or [All][ImageAll][11,*.txt]">
-                    </TextBox>
-                    <TextBox Name="DefaultFileExtension" u:FormItem.Label="DefaultFileExtension"
-                             Watermark="json">
-                    </TextBox>
-                    <CheckBox Name="AllowMultiple" Content="AllowMultiple" u:FormItem.NoLabel="True"
-                                  >
-                    </CheckBox>
-                    <CheckBox Name="IsOmitCommandOnCancel" Content="Do not trigger the command after unselecting."
-                              u:FormItem.NoLabel="True"
-                    >
-                    </CheckBox>
-                    <CheckBox Name="IsClearSelectionOnCancel" Content="Clear the selection when unselecting."
-                              u:FormItem.NoLabel="True"
-                    >
-                    </CheckBox>
-                    <u:EnumSelector Name="UsePickerType" EnumType="u:UsePickerTypes" u:FormItem.Label="UsePickerType"></u:EnumSelector>
-                    <u:ControlClassesInput Name="ClassInput" u:FormItem.Label="Style Class" HorizontalAlignment="Left"></u:ControlClassesInput>
+                <HeaderedContentControl
+                    Content="PathPicker aggregates a file selector and provides a Command property. The Command is triggered solely after opening the file selector and selecting a file, whereupon the Command receives an IReadOnlyList&lt;string&gt; parameter."
+                    Header="Functionality and Usage"
+                    Theme="{DynamicResource GroupBox}" />
+                <u:Form
+                    HorizontalAlignment="Stretch"
+                    LabelAlignment="Left"
+                    LabelPosition="Left"
+                    LabelWidth="*">
+                    <TextBox
+                        Name="Title"
+                        u:FormItem.Label="Title"
+                        Text="选择文件" />
+                    <TextBox
+                        Name="SuggestedFileName"
+                        u:FormItem.Label="SuggestedFileName"
+                        Watermark="filename(not have file extension)" />
+                    <TextBox
+                        Name="SuggestedStartPath"
+                        u:FormItem.Label="SuggestedStartPath"
+                        Watermark="D:\Win7 Help\win-x64" />
+                    <TextBox
+                        Name="FileFilter"
+                        u:FormItem.Label="FileFilter"
+                        Watermark="[Name,Pattern] like this [123,*.exe,*.pdb] or [All][ImageAll][11,*.txt]" />
+                    <TextBox
+                        Name="DefaultFileExtension"
+                        u:FormItem.Label="DefaultFileExtension"
+                        Watermark="json" />
+                    <CheckBox
+                        Name="AllowMultiple"
+                        u:FormItem.NoLabel="True"
+                        Content="AllowMultiple" />
+                    <CheckBox
+                        Name="IsOmitCommandOnCancel"
+                        u:FormItem.NoLabel="True"
+                        Content="Do not trigger the command after unselecting." />
+                    <CheckBox
+                        Name="IsClearSelectionOnCancel"
+                        u:FormItem.NoLabel="True"
+                        Content="Clear the selection when unselecting." />
+                    <u:EnumSelector
+                        Name="UsePickerType"
+                        u:FormItem.Label="UsePickerType"
+                        EnumType="u:UsePickerTypes" />
+                    <u:ControlClassesInput
+                        Name="ClassInput"
+                        HorizontalAlignment="Left"
+                        u:FormItem.Label="Style Class" />
                 </u:Form>
             </StackPanel>
         </ScrollViewer>
-        <ScrollViewer Grid.Column="0" Grid.Row="1">
+        <ScrollViewer Grid.Row="1" Grid.Column="0">
             <StackPanel Spacing="2">
                 <HeaderedContentControl Header="Default">
-                    <u:PathPicker Title="{Binding #Title.Text}"
-                                  u:ControlClassesInput.Source="{Binding #ClassInput}"
-                                  SuggestedFileName="{Binding #SuggestedFileName.Text}"
-                                  SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
-                                  FileFilter="{Binding #FileFilter.Text}"
-                                  DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
-                                  AllowMultiple="{Binding #AllowMultiple.IsChecked, Mode=TwoWay}"
-                                  UsePickerType="{Binding #UsePickerType.Value}"
-                                  SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
-                                  SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
-                                  Command="{Binding SelectedCommand}"
-                                  IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
-                                  IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
-                    </u:PathPicker>
+                    <u:PathPicker
+                        Title="{Binding #Title.Text}"
+                        u:ControlClassesInput.Source="{Binding #ClassInput}"
+                        AllowMultiple="{Binding #AllowMultiple.IsChecked, Mode=TwoWay}"
+                        Command="{Binding SelectedCommand}"
+                        DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
+                        FileFilter="{Binding #FileFilter.Text}"
+                        IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
+                        IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
+                        SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
+                        SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
+                        SuggestedFileName="{Binding #SuggestedFileName.Text}"
+                        SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
+                        UsePickerType="{Binding #UsePickerType.Value}" />
                 </HeaderedContentControl>
                 <HeaderedContentControl Header="ButtonPathPicker">
-                    <u:PathPicker Theme="{DynamicResource ButtonPathPicker}"
-                                  Title="{Binding #Title.Text}"
-                                  SuggestedFileName="{Binding #SuggestedFileName.Text}"
-                                  SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
-                                  FileFilter="{Binding #FileFilter.Text}"
-                                  DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
-                                  AllowMultiple="{Binding #AllowMultiple.IsChecked}"
-                                  UsePickerType="{Binding #UsePickerType.Value}"
-                                  SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
-                                  SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
-                                  Command="{Binding SelectedCommand}"
-                                  IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
-                                  IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
-                    </u:PathPicker>
+                    <u:PathPicker
+                        Title="{Binding #Title.Text}"
+                        AllowMultiple="{Binding #AllowMultiple.IsChecked}"
+                        Command="{Binding SelectedCommand}"
+                        DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
+                        FileFilter="{Binding #FileFilter.Text}"
+                        IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
+                        IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
+                        SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
+                        SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
+                        SuggestedFileName="{Binding #SuggestedFileName.Text}"
+                        SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
+                        Theme="{DynamicResource ButtonPathPicker}"
+                        UsePickerType="{Binding #UsePickerType.Value}" />
                 </HeaderedContentControl>
-                <HeaderedContentControl Header="PathPickerForListView">
-                    <u:PathPicker Theme="{DynamicResource PathPickerForListView}"
-                                  Title="{Binding #Title.Text}"
-                                  SuggestedFileName="{Binding #SuggestedFileName.Text}"
-                                  SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
-                                  FileFilter="{Binding #FileFilter.Text}"
-                                  DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
-                                  AllowMultiple="{Binding #AllowMultiple.IsChecked}"
-                                  UsePickerType="{Binding #UsePickerType.Value}"
-                                  SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
-                                  SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
-                                  Command="{Binding SelectedCommand}"
-                                  IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
-                                  IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
-                    </u:PathPicker>
+                <HeaderedContentControl Header="ListPathPicker">
+                    <u:PathPicker
+                        Title="{Binding #Title.Text}"
+                        AllowMultiple="{Binding #AllowMultiple.IsChecked}"
+                        Command="{Binding SelectedCommand}"
+                        DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
+                        FileFilter="{Binding #FileFilter.Text}"
+                        IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
+                        IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
+                        SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
+                        SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
+                        SuggestedFileName="{Binding #SuggestedFileName.Text}"
+                        SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
+                        Theme="{DynamicResource ListPathPicker}"
+                        UsePickerType="{Binding #UsePickerType.Value}" />
                 </HeaderedContentControl>
             </StackPanel>
         </ScrollViewer>
-        <ScrollViewer Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
+        <ScrollViewer
+            Grid.Row="0"
+            Grid.RowSpan="2"
+            Grid.Column="1">
             <StackPanel Spacing="1">
-                <TextBlock Text="{Binding CommandTriggerCount,StringFormat='Command Trigger Count:{0}'}"></TextBlock>
+                <TextBlock Text="{Binding CommandTriggerCount, StringFormat='Command Trigger Count:{0}'}" />
                 <HeaderedContentControl Header="SelectedPathsText">
-                    <TextBox Name="SelectedPath" u:FormItem.Label="SelectedPath" IsReadOnly="True"
-                             Text="{Binding Path}">
-                    </TextBox>
+                    <TextBox
+                        Name="SelectedPath"
+                        u:FormItem.Label="SelectedPath"
+                        IsReadOnly="True"
+                        Text="{Binding Path}" />
                 </HeaderedContentControl>
                 <HeaderedContentControl Header="SelectedPaths">
-                    <ListBox Name="SelectedPaths"
-                             ItemsSource="{Binding Paths}">
-                    </ListBox>
+                    <ListBox Name="SelectedPaths" ItemsSource="{Binding Paths}" />
                 </HeaderedContentControl>
             </StackPanel>
         </ScrollViewer>
diff --git a/src/Ursa.Themes.Semi/Controls/PathPicker.axaml b/src/Ursa.Themes.Semi/Controls/PathPicker.axaml
index 7786ca6..391e4ca 100644
--- a/src/Ursa.Themes.Semi/Controls/PathPicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/PathPicker.axaml
@@ -15,15 +15,16 @@
                 <DockPanel>
                     <Button
                         Name="{x:Static u:PathPicker.PART_Button}"
-                        Content="{TemplateBinding Title}"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
+                        Content="{TemplateBinding Title}"
                         DockPanel.Dock="Right" />
                     <TextBox
                         Name="PART_TextBox"
                         AcceptsReturn="{TemplateBinding AllowMultiple}"
                         DockPanel.Dock="Left"
-                        Text="{TemplateBinding SelectedPathsText, Mode=TwoWay}" />
+                        Text="{TemplateBinding SelectedPathsText,
+                                               Mode=TwoWay}" />
                 </DockPanel>
             </ControlTemplate>
         </Setter>
@@ -34,9 +35,9 @@
 
         <Style Selector="^ /template/ Button#PART_Button">
             <Setter Property="DockPanel.Dock" Value="Right" />
-            <Setter Property="VerticalAlignment" Value="Center"></Setter>
+            <Setter Property="VerticalAlignment" Value="Center" />
             <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={x:Static converters:CornerRadiusTakeConverter.Right}}" />
-            <Setter Property="Margin" Value="1 0 0 0"></Setter>
+            <Setter Property="Margin" Value="1 0 0 0" />
         </Style>
         <Style Selector="^ /template/ TextBox#PART_TextBox">
             <Setter Property="DockPanel.Dock" Value="Left" />
@@ -46,7 +47,7 @@
             <Style Selector="^ /template/ Button#PART_Button">
                 <Setter Property="DockPanel.Dock" Value="Top" />
                 <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={x:Static converters:CornerRadiusTakeConverter.Top}}" />
-                <Setter Property="Margin" Value="0 0 0 1"></Setter>
+                <Setter Property="Margin" Value="0 0 0 1" />
             </Style>
             <Style Selector="^ /template/ TextBox#PART_TextBox">
                 <Setter Property="DockPanel.Dock" Value="Bottom" />
@@ -71,33 +72,90 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="PathPickerForListView" TargetType="u:PathPicker">
+    <ControlTheme x:Key="ListPathPicker" TargetType="u:PathPicker">
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Expander HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
+                <Expander
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Theme="{StaticResource INTERNAL_PathPickerExpander}">
                     <Expander.Header>
                         <Button
                             Name="PART_Button"
                             HorizontalAlignment="Stretch"
-                            Content="{TemplateBinding Title}">
-                            <Button.Theme>
-                                <ControlTheme TargetType="Button">
-                                    <Setter Property="Template">
-                                        <ControlTemplate>
-                                            <TextPresenter
-                                                HorizontalAlignment="Stretch"
-                                                VerticalAlignment="Stretch"
-                                                Background="Transparent"
-                                                Text="{TemplateBinding Content}" />
-                                        </ControlTemplate>
-                                    </Setter>
-                                </ControlTheme>
-                            </Button.Theme>
-                        </Button>
+                            Content="{TemplateBinding Title}"
+                            CornerRadius="{TemplateBinding CornerRadius,
+                                                           Converter={x:Static converters:CornerRadiusTakeConverter.Left}}" />
                     </Expander.Header>
                     <ListBox ItemsSource="{TemplateBinding SelectedPaths}" />
                 </Expander>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^ /template/ Button#PART_Button:pressed">
+            <Setter Property="RenderTransform" Value="{x:Null}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="INTERNAL_PathPickerExpander" TargetType="Expander">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <DockPanel>
+                    <DockPanel DockPanel.Dock="Top" LastChildFill="True">
+                        <ToggleButton
+                            Name="ExpanderHeader"
+                            Margin="1,0,0,0"
+                            Background="{DynamicResource ToggleButtonDefaultBackground}"
+                            CornerRadius="{TemplateBinding CornerRadius,
+                                                           Converter={x:Static converters:CornerRadiusTakeConverter.Right}}"
+                            DockPanel.Dock="Right"
+                            IsChecked="{TemplateBinding IsExpanded,
+                                                        Mode=TwoWay}"
+                            Theme="{DynamicResource INTERNAL_PathPickerExpanderHeaderToggleButtonTheme}">
+                            <PathIcon
+                                Name="PART_PathIcon"
+                                Data="{DynamicResource ExpanderIcon}"
+                                Theme="{DynamicResource InnerPathIcon}">
+                                <PathIcon.Transitions>
+                                    <Transitions>
+                                        <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                                    </Transitions>
+                                </PathIcon.Transitions>
+                            </PathIcon>
+                        </ToggleButton>
+                        <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
+                    </DockPanel>
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Margin="{DynamicResource ExpanderContentMargin}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        Foreground="{DynamicResource ExpanderContentForeground}"
+                        IsVisible="{TemplateBinding IsExpanded,
+                                                    Mode=TwoWay}" />
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:expanded /template/ PathIcon#PART_PathIcon">
+            <Setter Property="RenderTransform" Value="rotate(180deg)" />
+        </Style>
+
+    </ControlTheme>
+
+    <ControlTheme x:Key="INTERNAL_PathPickerExpanderHeaderToggleButtonTheme" TargetType="ToggleButton">
+        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleButton">
+                <ContentPresenter
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file