How to round the corners of the popup calendar in DatePicker?

Question

I need to change the design of the DatePicker component without creating a new element since I'm working on an application in Fluent design.

I have already edited the default template of the DatePicker. I managed to change the design of the DatePicker's field and button. I was able to round the field and button corners. However, I couldn't modify the template of the popup calendar in the DatePicker. When editing the default DatePicker template, I didn't see the calendar there, although it should be present.

Is there a way to change the design of the popup calendar in DatePicker only by editing the default DatePicker template, without creating a new custom element?

Question in Screenshot

Answer 1

You could add Border with CornerRadius (and Margin on StackPanel and for CalendarItem set Background to White), but I am not sure if it's enough. How it looks: DatePicker with CornerRadius

How it's done: Use Resources and Template from this site: Calendar ControlTemplate Example

like this: <Window.Resources>a lot of code...<Style x:Key="CalendarItemStyle" TargetType="{x:Type CalendarItem}">... and use DatePicker like this:

<DatePicker>
        <DatePicker.CalendarStyle>
            <Style TargetType="{x:Type Calendar}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Calendar}">
                            <Border
                                CornerRadius="10"
                                BorderThickness="1.5"
                                BorderBrush="Black"
                                >
                                <StackPanel x:Name="PART_Root"
                HorizontalAlignment="Center"
                                            Margin="1"
                >
                                    <CalendarItem x:Name="PART_CalendarItem"
                    Background="White"
                    Style="{TemplateBinding CalendarItemStyle}"/>
                                </StackPanel>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DatePicker.CalendarStyle>
    </DatePicker>