Corner radius not set for ContentDialog and its buttons in 1803

[harvinders]

Describe the bug

Rounded corner is not shown for the ContentDialog and the buttons (primary, secondary and close) inside.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create a blank UWP app using visual studio 2019
2. Set the target to 1903 and min target to 1803
3. Include the Microsoft.UI.Xaml prerelease package
4. Make the neccessary resource dictionary change in app.xaml
5. Invoke a ContentDialog
6. Run on 1803

Expected behavior
Corner radius for buttons and the dialog

Screenshots

Version Info

NuGet package version:
Microsoft.UI.Xaml 2.4.0-prerelease.191217001

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)	Yes
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Mobile
Xbox
Surface Hub
IoT

Additional context

[robloo]

Related to #1345 and #1405

[ranjeshj]

@kaiguo can you please check if this is resolved by your fix ?#1405

[kaiguo]

I think this should be fixed by #1405 as Ranjesh mentioned. I tested on 1803 vm with the same configurations and it looked fine.

@harvinders did you re-template the ContentDialog by any chance? Or were there any special configurations you did but not included in the repro steps ?

[ranjeshj]

Fixed by #1405

[harvinders]

@kaiguo I did a little bit more investigation and found the issue only comes when we create a derived ContentDialog. I should have explicitly mentioned it.

public sealed partial class CustomDialog : ContentDialog
{
}

<ContentDialog
    x:Class="MyViews.CustomDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    Title="Title"
    MinWidth="600"
    PrimaryButtonText="Primary"
    SecondaryButtonText="Secondary"
    CloseButtonText="Close">

    <Grid x:Name="ContentArea" >

        <Grid.RowDefinitions>
            <RowDefinition x:Name="TitleRow" Height="Auto" />
            <RowDefinition Height="10" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <AutoSuggestBox  QueryIcon="Find" />
        ...
    </Grid>
</ContentDialog>

var customDialog = new CustomDialog()
await customDialog.ShowAsync();

However, if we simply create a Dialog using following code, rounded corner shows up properly.

var simpleDialog = new ContentDialog()
{
  Title = "Hello",
  PrimaryButtonText = "Primary"
};
await simpleDialog.ShowAsync();

[harvinders]

@kaiguo
The work around is setting the Style for my CustomDialog

<ContentDialog.Resources>
  <Style TargetType="local:CustomDialog" BasedOn="{StaticResource DefaultContentDialogStyle}" />
</ContentDialog.Resources>

But I feel one should not have to do it.

[ranjeshj]

@kaiguo, Is this a ContentDialog specific issue or a more generic framework issue that affects all derived controls ? If it is not a more common issue, what in ContentDialog is causing this ?

[kaiguo]

Yeah I think you have to do the "BasedOn" trick, otherwise it will use styles from the hosting OS, which doesn't have rounded corners.