Fix clipping of SmartHint when FloatingScale > 1 (#3544)

* Update demo app with better options to test the issue

* Fix the hint container margin issue

* Fix hint clipping issue

Author: nicolaihenriksen

src/MainDemo.Wpf/Domain/SmartHintViewModel.cs

@@ -45,8 +45,8 @@ internal class SmartHintViewModel : ViewModelBase
     private Thickness _outlineStyleActiveBorderThickness = new(2);
 
     public IEnumerable<FloatingHintHorizontalAlignment> HorizontalAlignmentOptions { get; } = Enum.GetValues(typeof(FloatingHintHorizontalAlignment)).OfType<FloatingHintHorizontalAlignment>();
-    public IEnumerable<double> FloatingScaleOptions { get; } = [0.25, 0.5, 0.75, 1.0];
-    public IEnumerable<Point> FloatingOffsetOptions { get; } = [DefaultFloatingOffset, new Point(0, -25), new Point(0, -16), new Point(16, -16), new Point(-16, -16), new Point(0, -50)];
+    public IEnumerable<double> FloatingScaleOptions { get; } = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+    public IEnumerable<Point> FloatingOffsetOptions { get; } = [DefaultFloatingOffset, new Point(0, -25), new Point(0, -16), new Point(16, -16), new Point(-16, -16), new Point(0, -50), new Point(-50, -50), new Point(50, -50)];
     public IEnumerable<string> ComboBoxOptions { get; } = ["Option 1", "Option 2", "Option 3"];
     public IEnumerable<Thickness> CustomPaddingOptions { get; } = [new Thickness(0), new Thickness(5), new Thickness(10), new Thickness(15)];
     public IEnumerable<double> CustomHeightOptions { get; } = [double.NaN, 50, 75, 100, 150];

src/MaterialDesignThemes.Wpf/Converters/FloatingHintClippingGridConverter.cs

@@ -0,0 +1,18 @@
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace MaterialDesignThemes.Wpf.Converters;
+
+public class FloatingHintClippingGridConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture) =>
+        value switch
+        {
+            double actualWidth => new RectangleGeometry(new Rect(new Point(0, 0), new Size(actualWidth, double.MaxValue))),
+            _ => null
+        };
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => throw new NotImplementedException();
+}

src/MaterialDesignThemes.Wpf/Converters/FloatingHintContainerMarginConverter.cs

@@ -9,14 +9,14 @@ public class FloatingHintContainerMarginConverter : IMultiValueConverter
 
     public object? Convert(object?[]? values, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (values is [double scale, Thickness floatingMargin])
+        if (values is [double scale, Thickness floatingMargin, double floatingScale])
         {
             return floatingMargin with
             {
-                Left = floatingMargin.Left * scale,
-                Top = floatingMargin.Top * scale,
-                Right = floatingMargin.Right * scale,
-                Bottom = floatingMargin.Bottom * scale,
+                Left = (floatingMargin.Left * scale) / floatingScale,
+                Top = (floatingMargin.Top * scale) / floatingScale,
+                Right = (floatingMargin.Right * scale) / floatingScale,
+                Bottom = (floatingMargin.Bottom * scale) / floatingScale
             };
         }
         return EmptyThickness;

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.SmartHint.xaml

@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters"
                     xmlns:system="clr-namespace:System;assembly=mscorlib"
@@ -16,6 +16,7 @@
       <converters:FloatingHintScaleTransformConverter x:Key="FloatingHintScaleTransformConverter" />
       <converters:FloatingHintContainerMarginConverter x:Key="FloatingHintContainerMarginConverter" />
       <converters:FloatingHintTextBlockMarginConverter x:Key="FloatingHintTextBlockMarginConverter" />
+      <converters:FloatingHintClippingGridConverter x:Key="FloatingHintClippingGridConverter" />
     </Style.Resources>
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="HorizontalContentAlignment" Value="Left" />
@@ -142,8 +143,7 @@
                   </VisualStateGroup>
                 </VisualStateManager.VisualStateGroups>
                 <wpf:ScaleHost x:Name="ScaleHost" />
-                <Grid x:Name="HintClippingGrid"
-                      ClipToBounds="True">
+                <Grid Clip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth, Converter={StaticResource FloatingHintClippingGridConverter}}">
                   <Grid.RenderTransform>
                     <MultiBinding Converter="{StaticResource FloatingHintTranslateTransformConverter}">
                       <Binding ElementName="ScaleHost" Path="Scale" />
@@ -200,6 +200,7 @@
                             <MultiBinding Converter="{StaticResource FloatingHintContainerMarginConverter}">
                               <Binding ElementName="ScaleHost" Path="Scale" />
                               <Binding Path="FloatingMargin" RelativeSource="{RelativeSource TemplatedParent}" />
+                              <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                           </ContentControl.Margin>
                         </ContentControl>