Merge pull request #4071 from maxkatz6/feature/fluent-tooltip

Feature/Fluent ToolTip

src/Avalonia.Controls/ToolTip.cs

@@ -204,13 +204,15 @@ namespace Avalonia.Controls
         private static void IsOpenChanged(AvaloniaPropertyChangedEventArgs e)
         {
             var control = (Control)e.Sender;
+            var newValue = (bool)e.NewValue;
+            ToolTip toolTip;
 
-            if ((bool)e.NewValue)
+            if (newValue)
             {
                 var tip = GetTip(control);
                 if (tip == null) return;
 
-                var toolTip = control.GetValue(ToolTipProperty);
+                toolTip = control.GetValue(ToolTipProperty);
                 if (toolTip == null || (tip != toolTip && tip != toolTip.Content))
                 {
                     toolTip?.Close();
@@ -223,9 +225,11 @@ namespace Avalonia.Controls
             }
             else
             {
-                var toolTip = control.GetValue(ToolTipProperty);
+                toolTip = control.GetValue(ToolTipProperty);
                 toolTip?.Close();
             }
+
+            toolTip?.UpdatePseudoClasses(newValue);
         }
 
         private void Open(Control control)
@@ -238,6 +242,9 @@ namespace Avalonia.Controls
             
             _popup.ConfigurePosition(control, GetPlacement(control), 
                 new Point(GetHorizontalOffset(control), GetVerticalOffset(control)));
+
+            WindowManagerAddShadowHintChanged(_popup, false);
+
             _popup.Show();
         }
 
@@ -250,5 +257,18 @@ namespace Avalonia.Controls
                 _popup = null;
             }
         }
+
+        private void WindowManagerAddShadowHintChanged(IPopupHost host, bool hint)
+        {
+            if (host is PopupRoot pr)
+            {
+                pr.PlatformImpl.SetWindowManagerAddShadowHint(hint);
+            }
+        }
+
+        private void UpdatePseudoClasses(bool newValue)
+        {
+            PseudoClasses.Set(":open", newValue);
+        }
     }
 }

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

@@ -312,5 +312,15 @@
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePointerOver" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
+
+    <!-- Resources for ToolTip.xaml -->
+    <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
+    <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>
+    <StaticResource x:Key="ToolTipForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToolTipBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
+    <SolidColorBrush x:Key="ToolTipBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
+    <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
   </Style.Resources>
 </Style>

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

@@ -313,5 +313,15 @@
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePointerOver" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
+
+    <!-- Resources for ToolTip.xaml -->
+    <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
+    <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>
+    <StaticResource x:Key="ToolTipForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToolTipBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
+    <SolidColorBrush x:Key="ToolTipBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
+    <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
   </Style.Resources>
 </Style>

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

@@ -343,5 +343,16 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
+
+    <!-- Resources for ToolTip.xaml -->
+    <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
+    <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>
+    <StaticResource x:Key="ToolTipForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToolTipBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <SolidColorBrush x:Key="ToolTipBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
+    <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
+    <Thickness x:Key="ToolTipBorderThemePadding">8,5,8,7</Thickness>
   </Style.Resources>
 </Style>

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

@@ -343,5 +343,16 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
+
+    <!-- Resources for ToolTip.xaml -->
+    <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
+    <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>
+    <StaticResource x:Key="ToolTipForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToolTipBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+    <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <SolidColorBrush x:Key="ToolTipBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
+    <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
+    <Thickness x:Key="ToolTipBorderThemePadding">8,5,8,7</Thickness>
   </Style.Resources>
 </Style>

src/Avalonia.Themes.Fluent/ToolTip.xaml

@@ -1,17 +1,78 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ToolTip">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
+  <Design.PreviewWith>
-  <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
+    <Grid RowDefinitions="Auto,Auto"
-  <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
+          ColumnDefinitions="Auto,Auto"
-  <Setter Property="Padding" Value="4,2"/>
+          HorizontalAlignment="Center">
-  <Setter Property="Template">
+      <Border Grid.Column="0"
-    <ControlTemplate>
+              Grid.Row="1"
-      <ContentPresenter Name="PART_ContentPresenter"
+              Background="{DynamicResource ThemeAccentBrush}"
-                        Background="{TemplateBinding Background}"
+              Margin="5"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+              Padding="50"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+              ToolTip.Tip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
+        <TextBlock>Hover Here</TextBlock>
-                        Content="{TemplateBinding Content}" 
+      </Border>
-                        Padding="{TemplateBinding Padding}"/>
+      <CheckBox Grid.Column="1"
-    </ControlTemplate>
+                Margin="5"
-  </Setter>
+                Grid.Row="0"
-</Style>
+                IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}"
+                Content="ToolTip Open" />
+      <Border Name="Border"
+              Grid.Column="1"
+              Grid.Row="1"
+              Background="{DynamicResource ThemeAccentBrush}"
+              Margin="5"
+              Padding="50"
+              ToolTip.Placement="Bottom">
+        <ToolTip.Tip>
+          <StackPanel>
+            <TextBlock Classes="h1">ToolTip</TextBlock>
+            <TextBlock Classes="h2">A control which pops up a hint when a control is hovered</TextBlock>
+          </StackPanel>
+        </ToolTip.Tip>
+        <TextBlock>ToolTip bottom placement</TextBlock>
+      </Border>
+    </Grid>
+  </Design.PreviewWith>
+
+  <Style Selector="ToolTip">
+    <Setter Property="Foreground" Value="{DynamicResource ToolTipForeground}" />
+    <Setter Property="Background" Value="{DynamicResource ToolTipBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThemeThickness}" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ToolTipContentThemeFontSize}" />
+    <Setter Property="Padding" Value="{DynamicResource ToolTipBorderThemePadding}" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.15" />
+      </Transitions>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="PART_LayoutRoot"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                Padding="{TemplateBinding Padding}"
+                CornerRadius="{DynamicResource OverlayCornerRadius}">
+          <ContentPresenter Name="PART_ContentPresenter"
+                            MaxWidth="320"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="ToolTip > TextBlock">
+    <Setter Property="TextWrapping" Value="Wrap" />
+  </Style>
+
+  <Style Selector="ToolTip">
+    <Setter Property="Opacity" Value="0" />
+  </Style>
+
+  <Style Selector="ToolTip:open">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+</Styles>

tests/Avalonia.Controls.UnitTests/ToolTipTests.cs

@@ -102,5 +102,76 @@ namespace Avalonia.Controls.UnitTests
                 Assert.True(ToolTip.GetIsOpen(target));
             }
         }
+
+        [Fact]
+        public void Open_Class_Should_Not_Initially_Be_Added()
+        {
+            using (UnitTestApplication.Start(TestServices.StyledWindow))
+            {
+                var toolTip = new ToolTip();
+                var window = new Window();
+
+                var decorator = new Decorator()
+                {
+                    [ToolTip.TipProperty] = toolTip
+                };
+
+                window.Content = decorator;
+
+                window.ApplyTemplate();
+                window.Presenter.ApplyTemplate();
+
+                Assert.Empty(toolTip.Classes);
+            }
+        }
+
+        [Fact]
+        public void Setting_IsOpen_Should_Add_Open_Class()
+        {
+            using (UnitTestApplication.Start(TestServices.StyledWindow))
+            {
+                var toolTip = new ToolTip();
+                var window = new Window();
+
+                var decorator = new Decorator()
+                {
+                    [ToolTip.TipProperty] = toolTip
+                };
+
+                window.Content = decorator;
+
+                window.ApplyTemplate();
+                window.Presenter.ApplyTemplate();
+
+                ToolTip.SetIsOpen(decorator, true);
+
+                Assert.Equal(new[] { ":open" }, toolTip.Classes);
+            }
+        }
+
+        [Fact]
+        public void Clearing_IsOpen_Should_Remove_Open_Class()
+        {
+            using (UnitTestApplication.Start(TestServices.StyledWindow))
+            {
+                var toolTip = new ToolTip();
+                var window = new Window();
+
+                var decorator = new Decorator()
+                {
+                    [ToolTip.TipProperty] = toolTip
+                };
+
+                window.Content = decorator;
+
+                window.ApplyTemplate();
+                window.Presenter.ApplyTemplate();
+
+                ToolTip.SetIsOpen(decorator, true);
+                ToolTip.SetIsOpen(decorator, false);
+
+                Assert.Empty(toolTip.Classes);
+            }
+        }
     }
 }