[Material] TextBox & PasswordBox Size Issue

[Soap-141]

Current behavior

When a TextBox or a PasswordBox using the Material OutlinedStyle and has content receives focus, it probably changes some of its template sizes and it makes the content move to the right by a couple pixels.

Expected behavior

The content should not be moved when those controls receive focus.

How to reproduce it (as minimally and precisely as possible)

1. Download SampTextAndPassBox.zip
2. Open the solution
3. Start the application
4. Fill the PasswordBox and the TextBox
5. Click on both of them
6. Notice that the content seems to be moving to the right

Environment

Nuget Package: Uno.Material.WinUI

Package Version(s): 2.3.0-dev.6

Affected platform(s):

• iOS
• Android
• WebAssembly
• UWP
• WinUI
• MacOS

Anything else we need to know?

N/A

[Xiaoy312]

reason being the focused visual-state make the border thickness bolder (1->2)
this in turn shrink the inner contents (icon, text, delete button ...) space by that much

<Border x:Name=RootBorder 
		BorderBrush=TemplateBinding BorderThickness=TemplateBinding 
		CornerRadius=TemplateBinding
		Padding=1> <!-- !!! -->
    <Grid Padding=TemplateBinding>
         <!- rest of stuff ... -->
         

<VisualState x:Name="PointerOver">
	  <VisualState.Setters>
		    <Setter Target="RootBorder.BorderThickness" Value="2" />
		    <Setter Target="RootBorder.Padding" Value="0" /> <!-- !!! -->
		    <!-- ... -->
	  </VisualState.Setters>
</VisualState>

^ so long as we balance the total shrinkage (border-thickness+corner-radius+padding=const) the inner contents should not move