Merge pull request #345 from garstenauer/fix-completionlist-style

Fix: CompletionList style is broken.

src/AvaloniaEdit.Demo/App.xaml

@@ -1,31 +1,11 @@
 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:cc="clr-namespace:AvaloniaEdit.CodeCompletion;assembly=AvaloniaEdit"
              x:Class="AvaloniaEdit.Demo.App"
              RequestedThemeVariant="Dark">
   <Application.Styles>
     <FluentTheme />
     <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
 
-    <!--Code completion-->
-    <Style Selector="cc|CompletionList">
-      <Setter Property="Template">
-        <ControlTemplate>
-          <cc:CompletionListBox Name="PART_ListBox" Background="Gray" BorderThickness="1" BorderBrush="LightGray" >
-            <cc:CompletionListBox.ItemTemplate>
-              <DataTemplate x:DataType="cc:ICompletionData">
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Height="18">
-                  <Image Source="{Binding Image}"
-                         Width="15"
-                         Height="15"                          />
-                  <TextBlock VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding Content}" FontSize="15" FontFamily="Consolas" Foreground="#eeeeee"/>
-                </StackPanel>
-              </DataTemplate>
-            </cc:CompletionListBox.ItemTemplate>
-          </cc:CompletionListBox>
-        </ControlTemplate>
-      </Setter>
-    </Style>
     <!--
     <Style Selector="TextBlock.h1">
       <Setter Property="Foreground"

src/AvaloniaEdit/CodeCompletion/CompletionList.xaml

@@ -1,13 +1,11 @@
 <Styles xmlns="https://github.com/avaloniaui"
-
         xmlns:cc="clr-namespace:AvaloniaEdit.CodeCompletion;assembly=AvaloniaEdit"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="False">
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <Style Selector="cc|CompletionList">
         <Setter Property="Template">
             <ControlTemplate>
-                <cc:CompletionListBox Name="PART_ListBox" FontSize="11">
+                <cc:CompletionListBox Name="PART_ListBox">
                     <cc:CompletionListBox.ItemTemplate>
                         <DataTemplate x:DataType="cc:ICompletionData">
                             <StackPanel Orientation="Horizontal" Margin="0">
@@ -24,26 +22,25 @@
         </Setter>
     </Style>
 
-  <Style Selector="cc|CompletionList > ListBox">
-    <Setter Property="Padding" Value="0"/>
-
-  </Style>
+    <Style Selector="cc|CompletionList > ListBox">
+        <Setter Property="Padding" Value="0" />
+    </Style>
+
+    <Style Selector="cc|CompletionList > ListBox > ListBoxItem">
+        <Setter Property="Padding" Value="4,2" />
+    </Style>
 
-  <Style Selector="cc|CompletionList > ListBox > ListBoxItem">
-    <Setter Property="Padding" Value="4, 0, 0, 0"/>
-    <Setter Property="Height" Value="20"/>
-  </Style>
-
     <Style Selector="ContentControl.ToolTip">
-      <Setter Property="MinHeight" Value="22"/>
-        <Setter Property="BorderThickness"
-                Value="1" />
+        <Setter Property="BorderThickness" 
+                Value="{DynamicResource CompletionToolTipBorderThickness}" />
         <Setter Property="BorderBrush"
-                Value="Black" />
+                Value="{DynamicResource CompletionToolTipBorderBrush}" />
         <Setter Property="Background"
-                Value="#eeeeee" />
+                Value="{DynamicResource CompletionToolTipBackground}" />
+        <Setter Property="Foreground"
+                Value="{DynamicResource CompletionToolTipForeground}" />
         <Setter Property="Padding"
-                Value="2" />
+                Value="4,2" />
     </Style>
 
 </Styles>

src/AvaloniaEdit/CodeCompletion/CompletionWindow.cs

@@ -53,7 +53,7 @@ public CompletionWindow(TextArea textArea) : base(textArea)
             Child = CompletionList;
             // prevent user from resizing window to 0x0
             MinHeight = 15;
-            MinWidth = 30;          
+            MinWidth = 30;
 
             _toolTipContent = new ContentControl();
             _toolTipContent.Classes.Add("ToolTip");
@@ -62,7 +62,7 @@ public CompletionWindow(TextArea textArea) : base(textArea)
             {
                 IsLightDismissEnabled = true,
                 PlacementTarget = this,
-                Placement = PlacementMode.Right,
+                Placement = PlacementMode.RightEdgeAlignedTop,
                 Child = _toolTipContent,
             };
 
@@ -104,25 +104,30 @@ private void CompletionList_SelectionChanged(object sender, SelectionChangedEven
                     };
                 }
                 else
-                {                   
+                {
                     _toolTipContent.Content = description;
                 }
 
                 _toolTip.IsOpen = false; //Popup needs to be closed to change position
 
-                //Calculate offset for tooltip
+                // Calculate offset for tooltip
+                var popupRoot = Host as PopupRoot;
                 if (CompletionList.CurrentList != null)
                 {
-                    int index = CompletionList.CurrentList.IndexOf(item);
-                    int scrollIndex = (int)CompletionList.ListBox.Scroll.Offset.Y;
-                    int yoffset = index - scrollIndex;
-                    if (yoffset < 0) yoffset = 0;
-                    if ((yoffset+1) * 20 > MaxHeight) yoffset--;
-                    _toolTip.Offset = new PixelPoint(2, yoffset * 20); //Todo find way to measure item height
+                    double yOffset = 0;
+                    var itemContainer = CompletionList.ListBox.ContainerFromItem(item);
+                    if (popupRoot != null && itemContainer != null)
+                    {
+                        var position = itemContainer.TranslatePoint(new Point(0, 0), popupRoot);
+                        if (position.HasValue)
+                            yOffset = position.Value.Y;
+                    }
+
+                    _toolTip.Offset = new Point(2, yOffset);
                 }
 
-                _toolTip.PlacementTarget = this.Host as PopupRoot;
-                _toolTip.IsOpen = true;                    
+                _toolTip.PlacementTarget = popupRoot;
+                _toolTip.IsOpen = true;
             }
             else
             {

src/AvaloniaEdit/CodeCompletion/PopupWithCustomPosition.cs

@@ -5,14 +5,11 @@ namespace AvaloniaEdit.CodeCompletion
 {
     internal class PopupWithCustomPosition : Popup
     {
-        public static readonly AvaloniaProperty<Point> OffsetProperty =
-            AvaloniaProperty.Register<PopupWithCustomPosition, Point>(nameof(Offset));
-
-        public PixelPoint Offset
+        public Point Offset
         {
             get
             {
-                return new PixelPoint((int)HorizontalOffset, (int)VerticalOffset);
+                return new Point(HorizontalOffset, VerticalOffset);
             }
             set
             {
@@ -21,6 +18,6 @@ public PixelPoint Offset
 
                 //this.Revalidate(VerticalOffsetProperty);
             }
-        }            
+        }
     }
 }

src/AvaloniaEdit/Themes/Fluent/Base.xaml

@@ -1,14 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:sys="using:System">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <StaticResource x:Key="SearchPanelFontSize" ResourceKey="ControlContentThemeFontSize" />
   <StaticResource x:Key="SearchPanelFontFamily" ResourceKey="ContentControlThemeFontFamily" />
   <ResourceDictionary.ThemeDictionaries>
     <ResourceDictionary x:Key="Default">
+      <StaticResource x:Key="CompletionToolTipBackground" ResourceKey="ToolTipBackground" />
+      <StaticResource x:Key="CompletionToolTipForeground" ResourceKey="ToolTipForeground" />
+      <StaticResource x:Key="CompletionToolTipBorderBrush" ResourceKey="ToolTipBorderBrush" />
+      <StaticResource x:Key="CompletionToolTipBorderThickness" ResourceKey="ToolTipBorderThemeThickness" />
       <SolidColorBrush x:Key="SearchPanelBackgroundBrush" Color="{DynamicResource SystemChromeMediumColor}" />
       <SolidColorBrush x:Key="SearchPanelBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
     </ResourceDictionary>
     <ResourceDictionary x:Key="Dark">
+      <StaticResource x:Key="CompletionToolTipBackground" ResourceKey="ToolTipBackground" />
+      <StaticResource x:Key="CompletionToolTipForeground" ResourceKey="ToolTipForeground" />
+      <StaticResource x:Key="CompletionToolTipBorderBrush" ResourceKey="ToolTipBorderBrush" />
+      <StaticResource x:Key="CompletionToolTipBorderThickness" ResourceKey="ToolTipBorderThemeThickness" />
       <SolidColorBrush x:Key="SearchPanelBackgroundBrush" Color="{DynamicResource SystemChromeMediumColor}" />
       <SolidColorBrush x:Key="SearchPanelBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
     </ResourceDictionary>

src/AvaloniaEdit/Themes/Simple/Base.xaml

@@ -1,14 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:sys="using:System">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="SearchPanelFontSize" ResourceKey="FontSizeNormal" />
     <StaticResource x:Key="SearchPanelFontFamily" ResourceKey="ContentControlThemeFontFamily" />
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
+            <StaticResource x:Key="CompletionToolTipBackground" ResourceKey="ThemeBackgroundBrush" />
+            <StaticResource x:Key="CompletionToolTipForeground" ResourceKey="ThemeForegroundColor" />
+            <StaticResource x:Key="CompletionToolTipBorderBrush" ResourceKey="ThemeBorderMidBrush" />
+            <StaticResource x:Key="CompletionToolTipBorderThickness" ResourceKey="ThemeBorderThickness" />
             <SolidColorBrush x:Key="SearchPanelBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}" />
             <SolidColorBrush x:Key="SearchPanelBorderBrush" Color="{DynamicResource ThemeBorderLowColor}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Dark">
+            <StaticResource x:Key="CompletionToolTipBackground" ResourceKey="ThemeBackgroundBrush" />
+            <StaticResource x:Key="CompletionToolTipForeground" ResourceKey="ThemeForegroundColor" />
+            <StaticResource x:Key="CompletionToolTipBorderBrush" ResourceKey="ThemeBorderMidBrush" />
+            <StaticResource x:Key="CompletionToolTipBorderThickness" ResourceKey="ThemeBorderThickness" />
             <SolidColorBrush x:Key="SearchPanelBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}" />
             <SolidColorBrush x:Key="SearchPanelBorderBrush" Color="{DynamicResource ThemeBorderLowColor}" />
         </ResourceDictionary>