From 134c8a087894c5dd32499eb3271bc9b5ab00b997 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 24 Jan 2023 15:00:35 +0800
Subject: [PATCH 1/2] feat: add tooltip. arrow is not supported as there is not
 indicator of placement on tooltip control itself.

---
 .../Pages/ToolTipDemo.axaml                   | 93 +++++++++++++++++++
 .../Pages/ToolTipDemo.axaml.cs                | 18 ++++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |  3 +
 src/Semi.Avalonia/Controls/Controls.axaml     |  1 +
 src/Semi.Avalonia/Controls/Tooltip.axaml      | 41 ++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |  2 +
 src/Semi.Avalonia/Themes/Light/Tooltip.axaml  | 14 +++
 7 files changed, 172 insertions(+)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/Tooltip.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/Tooltip.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml
new file mode 100644
index 0000000..86080c4
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml
@@ -0,0 +1,93 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ToolTipDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Tip="This is a ToolTip">
+            <TextBlock>Hover Here</TextBlock>
+        </Border>
+        <ToggleSwitch
+            Margin="5"
+            Content="ToolTip Open"
+            IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}" />
+        <Border
+            Name="Border"
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            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>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Top"
+            ToolTip.Tip="Hello">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation IterationCount="Infinite" Duration="0:0:2">
+                            <KeyFrame KeyTime="0:0:0">
+                                <Setter Property="ToolTip.HorizontalOffset" Value="0" />
+                                <Setter Property="ToolTip.VerticalOffset" Value="-50" />
+                            </KeyFrame>
+                            <KeyFrame KeyTime="0:0:2">
+                                <Setter Property="ToolTip.HorizontalOffset" Value="100" />
+                                <Setter Property="ToolTip.VerticalOffset" Value="50" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <TextBlock>Moving offset</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Top"
+            ToolTip.Tip="Hello">
+            <TextBlock>Top</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Left"
+            ToolTip.Tip="Hello">
+            <TextBlock>Left</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Right"
+            ToolTip.Tip="Hello">
+            <TextBlock>Right</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Bottom"
+            ToolTip.Tip="Hello">
+            <TextBlock>Bottom</TextBlock>
+        </Border>
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml.cs
new file mode 100644
index 0000000..0b3a0c7
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ToolTipDemo : UserControl
+{
+    public ToolTipDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index aaa69f0..e526ef6 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -78,6 +78,9 @@
         <TabItem Header="ToggleSwitch">
             <pages:ToggleSwitchDemo />
         </TabItem>
+        <TabItem Header="ToolTip">
+            <pages:ToolTipDemo />
+        </TabItem>
         <TabItem Header="TreeView">
             <pages:TreeViewDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index adce855..e9deabf 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -31,6 +31,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Tooltip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
diff --git a/src/Semi.Avalonia/Controls/Tooltip.axaml b/src/Semi.Avalonia/Controls/Tooltip.axaml
new file mode 100644
index 0000000..a0809d5
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/Tooltip.axaml
@@ -0,0 +1,41 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type ToolTip}" TargetType="ToolTip">
+        <Setter Property="Foreground" Value="{DynamicResource ToolTipForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ToolTipBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThickness}" />
+        <Setter Property="Padding" Value="{DynamicResource ToolTipPadding}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource ToolTipMaxWidth}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ToolTipCornerRadius}" />
+        <Setter Property="Opacity" Value="0" />
+        <Setter Property="Transitions">
+            <Transitions>
+                <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+            </Transitions>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToolTip">
+                <Border
+                    Name="PART_LayoutRoot"
+                    Margin="0,-1,0,0"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        MaxWidth="{TemplateBinding MaxWidth}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        TextBlock.TextWrapping="Wrap" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:open">
+            <Setter Property="Opacity" Value="1" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index c9f723b..1716221 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -23,8 +23,10 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Tooltip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />
+
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Tooltip.axaml b/src/Semi.Avalonia/Themes/Light/Tooltip.axaml
new file mode 100644
index 0000000..895ccee
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Tooltip.axaml
@@ -0,0 +1,14 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <!--  Add Resources Here  -->
+    <PathGeometry x:Key="ToolTipTriangleGlyph">M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z</PathGeometry>
+    <SolidColorBrush x:Key="ToolTipBackground" Color="#41464C" />
+    <SolidColorBrush x:Key="ToolTipForeground" Color="White" />
+    <SolidColorBrush x:Key="ToolTipBorderBrush" Color="Transparent" />
+    <CornerRadius x:Key="ToolTipCornerRadius">6</CornerRadius>
+    <Thickness x:Key="ToolTipPadding">12 8</Thickness>
+    <sys:Double x:Key="ToolTipMaxWidth">320</sys:Double>
+    <Thickness x:Key="ToolTipBorderThickness">0</Thickness>
+</ResourceDictionary>

From 4dc153303ff97962e95b22036526ad5083a5bc83 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 24 Jan 2023 15:05:11 +0800
Subject: [PATCH 2/2] fix: remove unnecessary margin.

---
 src/Semi.Avalonia/Controls/Tooltip.axaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Semi.Avalonia/Controls/Tooltip.axaml b/src/Semi.Avalonia/Controls/Tooltip.axaml
index a0809d5..d884026 100644
--- a/src/Semi.Avalonia/Controls/Tooltip.axaml
+++ b/src/Semi.Avalonia/Controls/Tooltip.axaml
@@ -18,7 +18,6 @@
             <ControlTemplate TargetType="ToolTip">
                 <Border
                     Name="PART_LayoutRoot"
-                    Margin="0,-1,0,0"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"