Fluent ToolTip style

src/Avalonia.Themes.Fluent/ToolTip.xaml

@@ -1,17 +1,74 @@
-<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
+          <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.2"/>
+      </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">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
+
+  <Style Selector="ToolTip:open">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
+</Styles>