Fluent TextBox Template

[danwalmsley]

What does the pull request do?

What is the current behavior?

What is the updated/expected behavior with this PR?

How was the solution implemented (if it's not obvious)?

Checklist

• Added unit tests (if possible)?
• Added XML documentation to any related classes?
• Consider submitting a PR to https://github.com/AvaloniaUI/Avaloniaui.net with user documentation

Breaking changes

Fixed issues

[danwalmsley]

Control Porting Guide:

Step1:
find resources not located in the WinUI repo for the template your porting, by running the XAML controls gallery and using a color picker.

step 2 is: find the winui template...

and copy the control specific resources for light and dark
i.e. https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L10-L59

you copy that to FluentControlResourcesLight /Dark.xaml
in its own sections using a xml comment

step 3:
you make a copy if template specific resources... (non theme dependent) i.e.

i.e.
https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L165-L174

and copy that to the top of our template
inside <Styles.Resources> (Styles plural) v. important

Step 4: find the default style...

i.e.
https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L178

copy all of the Setters

https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L179-L188
and replace the ones we already have... completely delete the avalonia ones...
(Except the one setting the template)

Step 5:
ignoring sections with visualstate groups
copy the structure of the control as best you can

Step 6: replace the word "ThemeResource" with "DynamicResource"

Step 7:
for each of the VisualStateGroups
i.e.
https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L215

each set of those should match our pseudo classes.
so create a commented section for each one...
i.e.

https://github.com/AvaloniaUI/Avalonia/blob/feature/fluent-textbox-template/src/Avalonia.Themes.Fluent/TextBox.xaml#L114

idea is we can refer back to winui code and it will be easier... hence the comment.

then simply convert the storyboards to styles...

so this
https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/Slider/Slider_themeresources.xaml#L218-L220

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
                                       </ObjectAnimationUsingKeyFrames>

dont let the word animation put you off, they are generally not, they are just applying styles.

would become

<Style Selector="...:pressed /Template/ HorizontalTrackRect"> something like that make sure it compiles but please dont start randomly adjusting values to make stuff fit.. if it doesnt layout properly we need to compare it to winui and find out why so if you get to that point and have issues then stop also check all the DynamicResources exist in the codebase as this could be why if 1 is missing

[danwalmsley]

@jmacato this is what the slider should look like

[Deadpikle]

Obtain a copy of Generic.xaml from UWP.

What's the license on the UWP Generic.xaml file? I opened up one locally, and I don't see a license in there. This license? I know microsoft-ui-xaml is MIT.

[danwalmsley]

Obtain a copy of Generic.xaml from UWP.

What's the license on the UWP Generic.xaml file? I opened up one locally, and I don't see a license in there. This license? I know microsoft-ui-xaml is MIT.

The microsoft-ui-xaml all depends on that Generic.xaml... and we are not copying the generic file... maybe we could use it as a reference. Might be safer to use a color picker though.