ContentDialog doesn't use WinUI Styling in runtime but does in the designer

[WashingtonARamos]

Describe the bug
When designing a ContentDialog it shows rounded corners but in runtime it shows square corners. Some child controls receive rounded corners but others remain with square corners.

Steps to reproduce the bug
Have Microsoft.UI.XAML v2.4.3 installed, create a new ContentDialog and show in application.

Expected behavior
ContentDialog and child controls receive WinUI styling, specially rounded corners.

Screenshots
Designer shows rounded corners for ContentDialog and it's child controls (A PasswordBox and a Button)

In runtime only the PasswordBox receives rounded corners, both ContentDialog and Button remain with square corners

For some reason settings the PrimaryButton's style to AccentButtonStyle gives it rounded corners:

And the same thing happens if I manually set SecondaryButton's style to DefaultButtonStyle: it receives rounded corners:

The issue can also be observed in the "XAML Controls Gallery" app, where the ContentDialog and some buttons (with exception of the one that receives AccentButtonStyle as style) have square corners:

Version Info
v2.4.3

NuGet package version:

Package	Version
Microsoft.NETCore.UniversalWindowsPlatform	6.2.10
Microsoft.Toolkit.Uwp	6.1.1
Microsoft.Toolkit.Uwp.UI	6.1.1
Microsoft.Toolkit.Uwp.UI.Animations	6.1.1
Microsoft.Toolkit.Uwp.UI.Controls	6.1.1
Microsoft.Toolkit.Uwp.UI.Controls.DataGrid	6.1.1
Microsoft.UI.Xaml	2.4.3

Windows 10 version	Saw the problem?
May 2020 Update (19041.572)	Yes

Device form factor	Saw the problem?
Desktop	Yes

Additional context
None.

[shaheedmalik]

Wasn't this a glitch that the Shell team needed to fix? I remember seeing something like this before?

[shaheedmalik]

Check #1405

Additional reading #1486

[ranjeshj]

@WashingtonARamos are you seeing this issue with latest pre-release bits ?

[WashingtonARamos]

@WashingtonARamos are you seeing this issue with latest pre-release bits ?

No, this is the 2.4.3 version of Microsoft.UI.Xaml. Are you asking me to install the pre-release build and see if it happens there too?

[ranjeshj]

Yes. That was the request. Thanks

[WashingtonARamos]

@ranjeshj updating Microsoft.UI.XAML to version 2.5.0-prerelease.200923002 (current latest) did not solve the issue. I also tried updating all Microsoft.Toolkit.* packages to the latest 7.0.0-preview3 version and it didn't help either.

[WashingtonARamos]

I've come around this problem again in another project and instead of settings manually button styles to DefaultButtonStyle as I was doing, I decided to test something and set the ContentDialog style to DefaultContentDialogStyle, and it turns out to work as expected: the content style not only gets it's rounded corners (as shown in the designer) but it also overrides the styles of it's child controls, giving them rounded corners aswell.
Another weird behaviour is that if I create a ContentDialog directly via code it receives the rounded corners style:

// Rounded style
var warn = new ContentDialog()
{
    Title = "Warning",
    Content = "My message",
    PrimaryButtonText = "OK",
};
await warn.ShowAsync();

But if I create a class that extends ContentDialog, create an instance from it and show it, it receives the square corners style:

// Square style
var warn = new MyWarningDialogThatExtendsContentDialog();
await warn.ShowAsync();

TL;DR:
To get the WinUI style for ContentDialogs ("rounded corners style"), just add:
Style="{StaticResource DefaultContentDialogStyle}"
...to your ContentDialog's XAML. I believe anything missing it will follow the same pattern: Default[Control name]Style.

[shaheedmalik]

ContentDialog, if I recall correctly, is handled by the Shell team and not WinUI.

[WashingtonARamos]

ContentDialog, if I recall correctly, is handled by the Shell team and not WinUI.

Could you clarify for me, please? Did I post this in the wrong place? There are so many UI-things right now related to Microsoft (MAUI, WinUI, ProjectReunion, "Shell team"?) that I genuinely don't know.

[shaheedmalik]

ContentDialog, if I recall correctly, is handled by the Shell team and not WinUI.

Could you clarify for me, please? Did I post this in the wrong place? There are so many UI-things right now related to Microsoft (MAUI, WinUI, ProjectReunion, "Shell team"?) that I genuinely don't know.

I forgot I actually replied to this issue before.
I think your problem was actually fixed in #1345 which has to do with #1405.

[WashingtonARamos]

ContentDialog, if I recall correctly, is handled by the Shell team and not WinUI.

Could you clarify for me, please? Did I post this in the wrong place? There are so many UI-things right now related to Microsoft (MAUI, WinUI, ProjectReunion, "Shell team"?) that I genuinely don't know.

I forgot I actually replied to this issue before.
I think your problem was actually fixed in #1345 which has to do with #1405.

From my understanding #1405 fixes the style to be applied not having rounded corners, while my problem is the style not being applied at all, forcing me to manually set it to DefaultContentDialogStyle for it to have the rounded corners style. After setting the ContentDialog's style to DefaultContentDialogStyle the rounded corners are correctly applied, but left unset it will have square corners.

[jingkecn]

Does the team have any plan to fix this ?

[LancerComet]

I've come around this problem again in another project and instead of settings manually button styles to DefaultButtonStyle as I was doing, I decided to test something and set the ContentDialog style to DefaultContentDialogStyle, and it turns out to work as expected: the content style not only gets it's rounded corners (as shown in the designer) but it also overrides the styles of it's child controls, giving them rounded corners aswell. Another weird behaviour is that if I create a ContentDialog directly via code it receives the rounded corners style:

// Rounded style
var warn = new ContentDialog()
{
    Title = "Warning",
    Content = "My message",
    PrimaryButtonText = "OK",
};
await warn.ShowAsync();

But if I create a class that extends ContentDialog, create an instance from it and show it, it receives the square corners style:

// Square style
var warn = new MyWarningDialogThatExtendsContentDialog();
await warn.ShowAsync();

TL;DR: To get the WinUI style for ContentDialogs ("rounded corners style"), just add: Style="{StaticResource DefaultContentDialogStyle}" ...to your ContentDialog's XAML. I believe anything missing it will follow the same pattern: Default[Control name]Style.

This problem is still there in latest WinUI 2.8.1
The new style won't be applied to the dialog which extends ContentDialog
And the workaround is still setting the style manually.

this.Style = Application.Current.Resources["DefaultContentDialogStyle"] as Style;

I think extending ContentDialog breaks Microsoft.UI.Xaml's behavior and only Windows.UI.Xaml thing left.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.