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

Feature/Fluent ToolTip
6 years ago · fa5bccc586
7 changed files with 214 additions and 20 deletions
--- a/src/Avalonia.Controls/ToolTip.cs
+++ b/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);
+        }
    }
 }
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/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>
--- a/src/Avalonia.Themes.Fluent/ToolTip.xaml
+++ b/src/Avalonia.Themes.Fluent/ToolTip.xaml
@ -1,17 +1,78 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ToolTip">
-  <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
-  <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-  <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
-  <Setter Property="Padding" Value="4,2"/>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <ContentPresenter Name="PART_ContentPresenter"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Content="{TemplateBinding Content}" 
-                        Padding="{TemplateBinding Padding}"/>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Grid RowDefinitions="Auto,Auto"
+          ColumnDefinitions="Auto,Auto"
+          HorizontalAlignment="Center">
+      <Border Grid.Column="0"
+              Grid.Row="1"
+              Background="{DynamicResource ThemeAccentBrush}"
+              Margin="5"
+              Padding="50"
+              ToolTip.Tip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
+        <TextBlock>Hover Here</TextBlock>
+      </Border>
+      <CheckBox Grid.Column="1"
+                Margin="5"
+                Grid.Row="0"
+                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>
--- a/tests/Avalonia.Controls.UnitTests/ToolTipTests.cs
+++ b/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);
+            }
+        }
    }
 }