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

Feature/fluent autocompletebox
6 years ago · f5c38cfa3d
8 changed files with 109 additions and 49 deletions
--- a/src/Avalonia.Themes.Fluent/Accents/BaseDark.xaml
+++ b/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="AutoSuggestListBorderOpacity">0</x:Double>
+    <x:Double x:Key="AutoCompleteListBorderOpacity">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="AutoSuggestListMargin">0,2,0,2</Thickness>
-    <Thickness x:Key="AutoSuggestListPadding">-1,0,-1,0</Thickness>
-    <Thickness x:Key="AutoSuggestListViewItemMargin">12,11,0,13</Thickness>
+    <Thickness x:Key="AutoCompleteListBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="AutoCompleteListMargin">0,2,0,2</Thickness>
+    <Thickness x:Key="AutoCompleteListPadding">-1,0,-1,0</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>
--- a/src/Avalonia.Themes.Fluent/Accents/BaseLight.xaml
+++ b/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="AutoSuggestListBorderOpacity">0</x:Double>
+    <x:Double x:Key="AutoCompleteListBorderOpacity">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="AutoSuggestListMargin">0,2,0,2</Thickness>
-    <Thickness x:Key="AutoSuggestListPadding">-1,0,-1,0</Thickness>
-    <Thickness x:Key="AutoSuggestListViewItemMargin">12,11,0,13</Thickness>
+    <Thickness x:Key="AutoCompleteListBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="AutoCompleteListMargin">0,2,0,2</Thickness>
+    <Thickness x:Key="AutoCompleteListPadding">-1,0,-1,0</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>
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/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" />
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/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" />
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/AutoCompleteBox.xaml
+++ b/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="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
-    <Setter Property="Padding" Value="4"/>
+    <Setter Property="VerticalAlignment" Value="Top" />
+    <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
+    <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
+    <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}" 
-                   BorderBrush="{TemplateBinding BorderBrush}" 
+                   Watermark="{TemplateBinding Watermark}"
+                   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">
-            <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}"
-                    BorderThickness="1">
+                 StaysOpen="False"                 
+                 PlacementTarget="{TemplateBinding}">            
+            <Border Name="PART_SuggestionsContainer"
+                    Padding="{DynamicResource AutoCompleteListMargin}"
+                    BorderThickness="{DynamicResource AutoCompleteListBorderThemeThickness}"
+                    BorderBrush="{DynamicResource AutoSuggestBoxSuggestionsListBorderBrush}"
+                    Background="{DynamicResource AutoCompleteBoxSuggestionsListBackground}"
+                    CornerRadius="{DynamicResource OverlayCornerRadius}">
              <ListBox Name="PART_SelectingItemsControl"
                       BorderThickness="0"
-                       Background="{TemplateBinding Background}"
-                       Foreground="{TemplateBinding Foreground}"
+                       Background="Transparent"
+                       Foreground="{DynamicResource AutoCompleteBoxSuggestionsListForeground}"
                       ItemTemplate="{TemplateBinding ItemTemplate}"
-                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                       ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                       Margin="{DynamicResource AutoCompleteListPadding}" />
            </Border>
          </Popup>
-        </Panel>
+        </Grid>
      </ControlTemplate>
    </Setter>
  </Style>
--- a/src/Avalonia.Themes.Fluent/PopupRoot.xaml
+++ b/src/Avalonia.Themes.Fluent/PopupRoot.xaml
@ -1,17 +1,21 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="PopupRoot">
-  <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Panel>
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-        <VisualLayerManager IsPopup="True">
-          <ContentPresenter Name="PART_ContentPresenter"
-                            Background="{TemplateBinding Background}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Content="{TemplateBinding Content}"
-                            Padding="{TemplateBinding Padding}"/>
-        </VisualLayerManager>
-      </Panel>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Style Selector="PopupRoot">
+    <Setter Property="TransparencyLevelHint" Value="Transparent" />
+    <Setter Property="Background" Value="{x:Null}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+          <VisualLayerManager IsPopup="True">
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Background="{TemplateBinding Background}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Padding="{TemplateBinding Padding}"/>
+          </VisualLayerManager>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>