Microsoft-ui-xaml: [Bug] Button CharacterSpacing is not working

[BrayanKhosravian]

Describe the bug
The CharacterSpacing property does nothing for a Button.
I was actually trying to fix a bug in Xamarin.Forms.
After not being able to fix the issue, I created a new UWP app and reproduced the issue.

Steps to reproduce the bug
Repro:
uwptemp.zip

1.) create a blank uwp app
2.) add the following content to the content of the MainPage:

    <StackPanel Orientation="Vertical">
        <Button Content="Character spacing 8" CharacterSpacing="800"/>
        <TextBlock Text="Character spacing 8" CharacterSpacing="800"/>
        <TextBox Text="Character spacing 8" CharacterSpacing="800"/>
    </StackPanel>

3.) Run the app

Expected behavior
The text of the button should also have a character spacing as the textbox and textblock does.

Screenshots

Version Info

NuGet package version:
Microsoft.NETCore.UniversalWindowsPlatform 6.2.10

Windows app type:
| UWP | Win32 |
| :--------------- | :--------------- |
| | |

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2020 Update (19041) | |
| November 2019 Update (18363) | Yes |
| May 2019 Update (18362) | |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :----------------- | :--------------- |
| Desktop | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context
This is the link of the reported xamarin forms issue: https://github.com/xamarin/Xamarin.Forms/issues/9291

[ranjeshj]

Looks like CharacterSpacing is not template bound to the content presenter in the Button's template.

[chingucoding]

I would like to work on this.

[BrayanKhosravian]

Is it possible to solve it by my own?
I mean is the repo with the issue open source?

[chingucoding]

Yes, sure. The template of the Button control is open source on this repository, you can find it here: https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/CommonStyles/Button_themeresources.xaml

[BrayanKhosravian]

Ok thanks a lot. I didn't know that it's open source tbh. I'll investigate this.
This would be my fist fix for uwp.
It's OK for me when you want to pick this up as I might need a bit longer fixing it and you were faster then me. @chingucoding 🙂

[chingucoding]

If you want to work on this, go for it, even if it takes some time. In case you have any questions with setting up the repo or getting started, feel free to ask!

[mdtauk]

I have noticed a few of these "forgotten to bind to the template" issues.

I wonder if there ought to be some kind of UI property test, to iterate through inherited UI Element/Control properties, and flag them up if they have no impact on the visual rendering of the control.

Then whatever properties get flagged, someone can compare the visuals and see which properties should create a visual change, and then go and fix them - or somehow mark those properties as "not applicable".

[BrayanKhosravian]

@chingucoding Thanks a lot. I will ask here when having any questions.

[BrayanKhosravian]

I can see that everything is very good documented.
https://github.com/microsoft/microsoft-ui-xaml/blob/master/README.md
https://github.com/microsoft/microsoft-ui-xaml/blob/master/CONTRIBUTING.md
https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/developer_guide.md#Prerequisites

[BrayanKhosravian]

Does this mean that my request has to be approved?
And does that also count for the first contribution?

[chingucoding]

If you request a new feature or API, yes it has to be approved. In this case however, this is a big which does not need API review and approval, so it is good to go.

You can ask the WinUI team to assign the issue to you, though I think it is clear for others that you want to work on this issue, so I think that it's not needed to assign it to you.

[BrayanKhosravian]

I want to share my investigation.

When looking into the TextBox_themeresources.xaml then I can't see a templetebinding for CharacterSpacing.
But the spacing works for the TextBox because of some reason.
https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/CommonStyles/TextBox_themeresources.xaml

Adding a templetebinding for the buttons resource dosnt solve the issue.
But maybe I am lacking something.

A screenshot:

[BrayanKhosravian]

Is it possible to debug the unmanaged code which is located in the Button class?
It seems like everything in DLLInjected

[mdtauk]

Both Button and ContentPresenter have CharacterSpacing properties, so this is odd.

[chingucoding]

It seems that something strange is going on with the templatebinding, according to the live property view, templatebinding to CharacterSpacing does not result in a binding for some reason.

Using the following binding CharacterSpacing="{Binding Path=CharacterSpacing,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}" I get the following strange behavior:

[BrayanKhosravian]

That is interesting.
I just wonder why it works for the textbox as there is clearly no binding for CharacterSpacing visible in the resources files.

[mdtauk]

That is interesting.
I just wonder why it works for the textbox as there is clearly no binding for CharacterSpacing visible in the resources files.

That could just be inheritance, that is implicit. Without access to the Button or TextBox code, its hard to know for sure. Guess that will be when the WinUI 3.0 code drops.

[BrayanKhosravian]

I think the characterspacing for the button should be implemented the same way as it is for the textbox and textblock