SmartHint "hint text" should affect layout width of TextBox, PasswordBox, etc. (#3141)

* Add demo page showcasing the issues

* Just some thoughts feel free to revert

* Revert "Just some thoughts feel free to revert"

This reverts commit 4424bb3.

* Move ClipToBounds to a wrapping Grid

Also temporarily slows down the animations so it is easier to verify the floating animation.

* Move floating transform out of Canvas and into clipping Grid

* Add options in demo page for toggling "all the stuff"

* Revert demo page and animation changes.

---------

Co-authored-by: Kevin Bost <[email protected]>

Author: nicolaihenriksen

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.SmartHint.xaml

@@ -8,7 +8,7 @@
   <converters:BooleanToVisibilityConverter x:Key="InverseBoolToVisConverter"
                                            FalseValue="Visible"
                                            TrueValue="Collapsed" />
-  <converters:FloatingHintTransformConverter x:Key="FloatingHintCanvasTransformConverter" ApplyScaleTransform="False" />
+  <converters:FloatingHintTransformConverter x:Key="FloatingHintClippingGridTransformConverter" ApplyScaleTransform="False" />
   <converters:FloatingHintTransformConverter x:Key="FloatingHintTransformConverter" ApplyTranslateTransform="False" />
   <converters:FloatingHintTextBlockMarginConverter x:Key="FloatingHintTextBlockMarginConverter" />
   <system:Double x:Key="NoContentFloatingScale">1.0</system:Double>
@@ -140,16 +140,17 @@
                   </VisualStateGroup>
                 </VisualStateManager.VisualStateGroups>
                 <wpf:ScaleHost x:Name="ScaleHost" />
-                <Canvas ClipToBounds="True" HorizontalAlignment="Stretch" Height="{Binding ElementName=FloatingHintTextBlock, Path=ActualHeight}">
-                  <Canvas.RenderTransform>
-                    <MultiBinding Converter="{StaticResource FloatingHintCanvasTransformConverter}">
+                <Grid ClipToBounds="True">
+                  <Grid.RenderTransform>
+                    <MultiBinding Converter="{StaticResource FloatingHintClippingGridTransformConverter}">
                       <Binding ElementName="ScaleHost" Path="Scale" />
                       <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
                       <Binding Source="{StaticResource NoContentFloatingScale}" />
                       <Binding Path="FloatingOffset" RelativeSource="{RelativeSource TemplatedParent}" />
                     </MultiBinding>
-                  </Canvas.RenderTransform>
-                  <ContentControl x:Name="FloatingHintTextBlock"
+                  </Grid.RenderTransform>
+                  <Canvas HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="{Binding ElementName=FloatingHintTextBlock, Path= ActualWidth}" Height="{Binding ElementName=FloatingHintTextBlock, Path=ActualHeight}">
+                    <ContentControl x:Name="FloatingHintTextBlock"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   Content="{TemplateBinding Hint}"
@@ -160,30 +161,31 @@
                                   Opacity="{TemplateBinding HintOpacity}"
                                   RenderTransformOrigin="0,0"
                                   Visibility="{TemplateBinding UseFloating, Converter={StaticResource BoolToVisConverter}}">
-                    <ContentControl.Margin>
-                      <MultiBinding Converter="{StaticResource FloatingHintTextBlockMarginConverter}">
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:HintAssist.FloatingHintHorizontalAlignment)" />
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="HorizontalContentAlignment" />
-                        <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth" />
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth" />
-                        <Binding ElementName="ScaleHost" Path="Scale" />
-                        <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
-                        <Binding Source="{StaticResource NoContentFloatingScale}" />
-                      </MultiBinding>
-                    </ContentControl.Margin>
-                    <ContentControl.Tag>
-                      <system:Double>0.0</system:Double>
-                    </ContentControl.Tag>
-                    <ContentControl.RenderTransform>
-                      <MultiBinding Converter="{StaticResource FloatingHintTransformConverter}">
-                        <Binding ElementName="ScaleHost" Path="Scale" />
-                        <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
-                        <Binding Source="{StaticResource NoContentFloatingScale}" />
-                        <Binding Path="FloatingOffset" RelativeSource="{RelativeSource TemplatedParent}" />
-                      </MultiBinding>
-                    </ContentControl.RenderTransform>
-                  </ContentControl>
-                </Canvas>
+                      <ContentControl.Margin>
+                        <MultiBinding Converter="{StaticResource FloatingHintTextBlockMarginConverter}">
+                          <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:HintAssist.FloatingHintHorizontalAlignment)" />
+                          <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="HorizontalContentAlignment" />
+                          <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth" />
+                          <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth" />
+                          <Binding ElementName="ScaleHost" Path="Scale" />
+                          <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
+                          <Binding Source="{StaticResource NoContentFloatingScale}" />
+                        </MultiBinding>
+                      </ContentControl.Margin>
+                      <ContentControl.Tag>
+                        <system:Double>0.0</system:Double>
+                      </ContentControl.Tag>
+                      <ContentControl.RenderTransform>
+                        <MultiBinding Converter="{StaticResource FloatingHintTransformConverter}">
+                          <Binding ElementName="ScaleHost" Path="Scale" />
+                          <Binding Path="FloatingScale" RelativeSource="{RelativeSource TemplatedParent}" />
+                          <Binding Source="{StaticResource NoContentFloatingScale}" />
+                          <Binding Path="FloatingOffset" RelativeSource="{RelativeSource TemplatedParent}" />
+                        </MultiBinding>
+                      </ContentControl.RenderTransform>
+                    </ContentControl>
+                  </Canvas>
+                </Grid>
               </Grid>
             </ControlTemplate>
           </Setter.Value>