Microsoft-ui-xaml: CalendarDatePicker loses rounded corners applying a custom style

[asierpn]

Describe the bug
If you set a custom style to the CalendarDatePicker it loses the rounded corners.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Try this XAML code:

  <Page.Resources>
    <Style x:Key="CalendarStyle"
           TargetType="CalendarDatePicker">
      <Setter Property="FirstDayOfWeek"
              Value="Monday" />
    </Style>
  </Page.Resources>
  <Grid HorizontalAlignment="Center"
        VerticalAlignment="Center">
    <StackPanel Orientation="Horizontal">
      <CalendarDatePicker Header="Correct" />
      <CalendarDatePicker Header="Wrong"
                          Margin="8,0,0,0"
                          Style="{StaticResource CalendarStyle}" />
    </StackPanel>
  </Grid>

Expected behavior
The CalendarDatePicker should be rendered with rounded corners, but they are squared.

Screenshots

Version Info

NuGet package version: 2.3.191211002

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| 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 | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context

[asierpn]

The same issue happens with CheckBox

[robloo]

Why not just have a BasedOn defined in your style? (assuming there is a key for the default generic style). Also, you could try adding a CornerRadius setting in the style you defined (I haven't tried it).

If you are overriding the default generic style that has rounded corners you should add them back I think. It doesn't really matter that the control renders the corners square when you don't define a corner radius in the style -- actually that's probably preferred.

[asierpn]

I supposed that doing this way I was overriding only the FirstDayOfWeek property value of the default style, not the whole style. The goal is to change this property for all the calendardatepicker controls in our app without having to apply a style to each one.

[robloo]

I think the reason this happens is because the CornerRadius was only added to the styles/templates in the WinUI library. The Windows default templates still have the square corners. This means the default is being overridden by WinUI to add the CornerRadius. However, you are then defining a new style which will fallback to use the Windows default as base instead of the WinUI style with corner radius. I believe this will go away with WinUI 3 when all styles/templates are integrated together.

Anyway, that's just my guess.

Also, the WinUI library style defines a key. That means you can change your code to what is below and it should work:

    <Style x:Key="CalendarStyle"
           TargetType="CalendarDatePicker"
           BasedOn="{StaticResource DefaultCalendarDatePicker}">
      <Setter Property="FirstDayOfWeek"
              Value="Monday" />
    </Style>

[StephenLPeters]

@robloo 's suggestion should work. The root "issue" is that we don't merge styles, which is by design but maybe that design is bad.

[robloo]

@StephenLPeters As I understand it, not merging styles is not a bad design. We certainly want a clean hierarchy or tracking down style issues will be a nightmare. WPF did it correctly for styles here.

The complication is just that we have two different what I'll call "base" styles -- one in Windows and the other in WinUI library. If my comment above is correct I would close this or add needs winUI 3.0 to be closed when the Windows and WinUI styles will become one. Then everything will work as expected -- as it did in WPF.

[asierpn]

The BasedOn workarround works fine and I will use it. Thinking more about the CalendarDatePicker's FirstDayOfWeek property, why not to default it depending the current culture of the app?

FirstDayOfWeek = CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek;

[chrisglein]

The evaluation above is correct. The styles are applied by WinUI 2, not the default styles from inbox XAML. I believe those also will receive the fix, but it depends on your OS version. Also if your app switches to WinUI3 I believe this will just be fixed naturally by the styles being baked instead of applied on top.

Given that BasedOn workaround exists, I don't think we need to take action here.

[Thomas1664]

@chrisglein Given that I spent 2 hours figuring out why rounded corners of a TextBox aren't displayed when I add custom styles to it, I think you should at least fix it in WinUI 3!