Merge pull request #4033 from AvaloniaUI/feature/fluent-autocompletebox

Feature/fluent autocompletebox

src/Avalonia.Themes.Fluent/Accents/BaseDark.xaml

@@ -139,6 +139,7 @@
     <SolidColorBrush x:Key="SystemControlErrorTextForegroundBrush" Color="{StaticResource SystemErrorTextColor}" />
     <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.36" />
     <!--<AcrylicBrush x:Key="SystemControlTransientBackgroundBrush" BackgroundSource="HostBackdrop" TintColor="{StaticResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{StaticResource SystemChromeMediumLowColor}" />-->
+    <SolidColorBrush x:Key="SystemControlTransientBackgroundBrush" Color="{StaticResource SystemChromeMediumLowColor}" />
     <StaticResource x:Key="SystemControlDescriptionTextForegroundBrush" ResourceKey="SystemControlPageTextBaseMediumBrush" />
     <x:Boolean x:Key="IsApplicationFocusVisualKindReveal">False</x:Boolean>
 
@@ -159,8 +160,7 @@
     <x:Double x:Key="AppBarThemeMinimalHeight">24</x:Double>
     <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
     <x:Double x:Key="AppBarExpandButtonCircleDiameter">3</x:Double>
-    <x:Double x:Key="AutoSuggestListMaxHeight">374</x:Double>
+    <x:Double x:Key="AutoCompleteListBorderOpacity">0</x:Double>
-    <x:Double x:Key="AutoSuggestListBorderOpacity">0</x:Double>
     <Thickness x:Key="CheckBoxBorderThemeThickness">2</Thickness>
     <Thickness x:Key="CheckBoxCheckedStrokeThickness">0</Thickness>
     <x:Double x:Key="ComboBoxArrowThemeFontSize">21</x:Double>
@@ -258,10 +258,10 @@
     <Thickness x:Key="AppBarTopBorderThemeThickness">0,0,0,0</Thickness>
     <Thickness x:Key="AppBarTopThemePadding">0,0,0,0</Thickness>
     <Thickness x:Key="AppBarExpandButtonCircleInnerPadding">3,0,3,0</Thickness>
-    <Thickness x:Key="AutoSuggestListBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="AutoCompleteListBorderThemeThickness">1</Thickness>
-    <Thickness x:Key="AutoSuggestListMargin">0,2,0,2</Thickness>
+    <Thickness x:Key="AutoCompleteListMargin">0,2,0,2</Thickness>
-    <Thickness x:Key="AutoSuggestListPadding">-1,0,-1,0</Thickness>
+    <Thickness x:Key="AutoCompleteListPadding">-1,0,-1,0</Thickness>
-    <Thickness x:Key="AutoSuggestListViewItemMargin">12,11,0,13</Thickness>
+    <Thickness x:Key="AutoCompleteListViewItemMargin">12,11,0,13</Thickness>
     <Thickness x:Key="ButtonBorderThemeThickness">2</Thickness>
     <Thickness x:Key="CalendarDatePickerBorderThemeThickness">2</Thickness>
     <Thickness x:Key="ComboBoxBorderThemeThickness">2</Thickness>

src/Avalonia.Themes.Fluent/Accents/BaseLight.xaml

@@ -139,6 +139,7 @@
     <SolidColorBrush x:Key="SystemControlErrorTextForegroundBrush" Color="{StaticResource SystemErrorTextColor}" />
     <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.14" />
     <!--<AcrylicBrush x:Key="SystemControlTransientBackgroundBrush" BackgroundSource="HostBackdrop" TintColor="{StaticResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{StaticResource SystemChromeMediumLowColor}" />-->
+    <SolidColorBrush x:Key="SystemControlTransientBackgroundBrush" Color="{StaticResource SystemChromeMediumLowColor}" />
     <StaticResource x:Key="SystemControlDescriptionTextForegroundBrush" ResourceKey="SystemControlPageTextBaseMediumBrush" />
     <x:Boolean x:Key="IsApplicationFocusVisualKindReveal">False</x:Boolean>
 
@@ -158,8 +159,7 @@
     <x:Double x:Key="AppBarThemeMinimalHeight">24</x:Double>
     <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
     <x:Double x:Key="AppBarExpandButtonCircleDiameter">3</x:Double>
-    <x:Double x:Key="AutoSuggestListMaxHeight">374</x:Double>
+    <x:Double x:Key="AutoCompleteListBorderOpacity">0</x:Double>
-    <x:Double x:Key="AutoSuggestListBorderOpacity">0</x:Double>
     <Thickness x:Key="CheckBoxBorderThemeThickness">2</Thickness>
     <Thickness x:Key="CheckBoxCheckedStrokeThickness">0</Thickness>
     <x:Double x:Key="ComboBoxArrowThemeFontSize">21</x:Double>
@@ -257,10 +257,10 @@
     <Thickness x:Key="AppBarTopBorderThemeThickness">0,0,0,0</Thickness>
     <Thickness x:Key="AppBarTopThemePadding">0,0,0,0</Thickness>
     <Thickness x:Key="AppBarExpandButtonCircleInnerPadding">3,0,3,0</Thickness>
-    <Thickness x:Key="AutoSuggestListBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="AutoCompleteListBorderThemeThickness">1</Thickness>
-    <Thickness x:Key="AutoSuggestListMargin">0,2,0,2</Thickness>
+    <Thickness x:Key="AutoCompleteListMargin">0,2,0,2</Thickness>
-    <Thickness x:Key="AutoSuggestListPadding">-1,0,-1,0</Thickness>
+    <Thickness x:Key="AutoCompleteListPadding">-1,0,-1,0</Thickness>
-    <Thickness x:Key="AutoSuggestListViewItemMargin">12,11,0,13</Thickness>
+    <Thickness x:Key="AutoCompleteListViewItemMargin">12,11,0,13</Thickness>
     <Thickness x:Key="ButtonBorderThemeThickness">2</Thickness>
     <Thickness x:Key="CalendarDatePickerBorderThemeThickness">2</Thickness>
     <Thickness x:Key="ComboBoxBorderThemeThickness">2</Thickness>

src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml

@@ -135,7 +135,13 @@
     <StaticResource x:Key="TextControlButtonForegroundPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
     <StaticResource x:Key="ContentLinkForegroundColor" ResourceKey="SystemControlHyperlinkTextBrush" />
     <StaticResource x:Key="ContentLinkBackgroundColor" ResourceKey="SystemControlPageBackgroundChromeLowBrush" />
-    
+
+    <!-- Resources for AutoCompleteBox.xaml -->
+    <StaticResource x:Key="AutoCompleteBoxLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
+    <x:Double x:Key="AutoCompleteBoxIconFontSize">12</x:Double>
+
     <!-- BaseResources for CheckBox.xaml -->
     <StaticResource x:Key="CheckBoxForegroundUnchecked" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="CheckBoxForegroundUncheckedPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />

src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml

@@ -135,7 +135,13 @@
     <StaticResource x:Key="TextControlButtonForegroundPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
     <StaticResource x:Key="ContentLinkForegroundColor" ResourceKey="SystemControlHyperlinkTextBrush" />
     <StaticResource x:Key="ContentLinkBackgroundColor" ResourceKey="SystemControlPageBackgroundChromeLowBrush" />
-    
+
+    <!-- Resources for AutoCompleteBox.xaml -->
+    <StaticResource x:Key="AutoCompleteBoxLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
+    <x:Double x:Key="AutoCompleteBoxIconFontSize">12</x:Double>
+
     <!-- BaseResources for CheckBox.xaml -->
     <StaticResource x:Key="CheckBoxForegroundUnchecked" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="CheckBoxForegroundUncheckedPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -82,6 +82,12 @@
     <StaticResource x:Key="TextControlForegroundFocused" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="TextControlPlaceholderForegroundFocused" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
 
+    <!-- Resources for AutoCompleteBox.xaml -->
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="AutoCompleteBoxLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <x:Double x:Key="AutoCompleteBoxIconFontSize">12</x:Double>
+
     <!-- Resources for Checkbox.xaml -->
     <Thickness x:Key="CheckBoxBorderThemeThickness">1</Thickness>
     <Thickness x:Key="CheckBoxCheckedStrokeThickness">0</Thickness>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml

@@ -82,6 +82,12 @@
     <StaticResource x:Key="TextControlForegroundFocused" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="TextControlPlaceholderForegroundFocused" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
 
+    <!-- Resources for AutoCompleteBox.xaml -->
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="AutoCompleteBoxSuggestionsListBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="AutoCompleteBoxLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <x:Double x:Key="AutoCompleteBoxIconFontSize">12</x:Double>
+
     <!-- Resources for CheckBox.xaml -->
     <x:Double x:Key="CheckBoxBorderThemeThickness">1</x:Double>
     <x:Double x:Key="CheckBoxCheckedStrokeThickness">0</x:Double>

src/Avalonia.Themes.Fluent/AutoCompleteBox.xaml

@@ -1,37 +1,69 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" 
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <AutoCompleteBox Width="200">
+        <AutoCompleteBox.Items>
+          Alabama
+          Alaska
+          Arizona
+          Arkansas
+          California
+          Colorado
+          Connecticut
+          Delaware
+        </AutoCompleteBox.Items>
+      </AutoCompleteBox>
+    </Border>
+  </Design.PreviewWith>
+
   <Style Selector="AutoCompleteBox">
-    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
+    <Setter Property="VerticalAlignment" Value="Top" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
+    <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
+    <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
-    <Setter Property="Padding" Value="4"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Panel>
+        <Grid Name="PART_LayoutRoot">
           <TextBox Name="PART_TextBox"
-                   Background="{TemplateBinding Background}" 
+                   Watermark="{TemplateBinding Watermark}"
-                   BorderBrush="{TemplateBinding BorderBrush}" 
+                   Width="{TemplateBinding Width}"
+                   Foreground="{TemplateBinding Foreground}"
+                   Background="{TemplateBinding Background}"
+                   BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
+                   FontSize="{TemplateBinding FontSize}"
+                   FontFamily="{TemplateBinding FontFamily}"
+                   FontWeight="{TemplateBinding FontWeight}"
                    Padding="{TemplateBinding Padding}"
-                   Watermark="{TemplateBinding Watermark}"
+                   Margin="0"
                    DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}" />
           
           <Popup Name="PART_Popup"
+                 WindowManagerAddShadowHint="False"
                  MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                  MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                 PlacementTarget="{TemplateBinding}"
+                 StaysOpen="False"                 
-                 StaysOpen="False">
+                 PlacementTarget="{TemplateBinding}">            
-            <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+            <Border Name="PART_SuggestionsContainer"
-                    BorderThickness="1">
+                    Padding="{DynamicResource AutoCompleteListMargin}"
+                    BorderThickness="{DynamicResource AutoCompleteListBorderThemeThickness}"
+                    BorderBrush="{DynamicResource AutoSuggestBoxSuggestionsListBorderBrush}"
+                    Background="{DynamicResource AutoCompleteBoxSuggestionsListBackground}"
+                    CornerRadius="{DynamicResource OverlayCornerRadius}">
               <ListBox Name="PART_SelectingItemsControl"
                        BorderThickness="0"
-                       Background="{TemplateBinding Background}"
+                       Background="Transparent"
-                       Foreground="{TemplateBinding Foreground}"
+                       Foreground="{DynamicResource AutoCompleteBoxSuggestionsListForeground}"
                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                       Margin="{DynamicResource AutoCompleteListPadding}" />
-                       ScrollViewer.VerticalScrollBarVisibility="Auto" />
             </Border>
           </Popup>
-        </Panel>
+        </Grid>
       </ControlTemplate>
     </Setter>
   </Style>

src/Avalonia.Themes.Fluent/PopupRoot.xaml

@@ -1,17 +1,21 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="PopupRoot">
+<Styles xmlns="https://github.com/avaloniaui"
-  <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Setter Property="Template">
+  <Style Selector="PopupRoot">
-    <ControlTemplate>
+    <Setter Property="TransparencyLevelHint" Value="Transparent" />
-      <Panel>
+    <Setter Property="Background" Value="{x:Null}" />
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+    <Setter Property="Template">
-        <VisualLayerManager IsPopup="True">
+      <ControlTemplate>
-          <ContentPresenter Name="PART_ContentPresenter"
+        <Panel>
-                            Background="{TemplateBinding Background}"
+          <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
+          <VisualLayerManager IsPopup="True">
-                            Content="{TemplateBinding Content}"
+            <ContentPresenter Name="PART_ContentPresenter"
-                            Padding="{TemplateBinding Padding}"/>
+                              Background="{TemplateBinding Background}"
-        </VisualLayerManager>
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
-      </Panel>
+                              Content="{TemplateBinding Content}"
-    </ControlTemplate>
+                              Padding="{TemplateBinding Padding}"/>
-  </Setter>
+          </VisualLayerManager>
-</Style>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>