JetBrains Rider中自定义Avalonia CalendarDatePicker：移除弹出日历右侧空白

你看到的右侧空白是Calendar控件默认样式的遗留布局——默认模板里包含了用于切换年份、月份的侧边容器，即便你设置了DisplayMode="Month"，这些容器仍会占用空间。

直接修改Calendar的模板就能解决，以下是整合后的完整样式代码：

<!-- CalendarDatePicker 自定义样式 -->
<Style Selector="CalendarDatePicker">
    <Setter Property="Template">
        <ControlTemplate>
            <Grid>
                <Border Background="{DynamicResource Vana}"
                        BorderBrush="{DynamicResource Vatika}"
                        BorderThickness="0,0,0,1"
                        CornerRadius="0">
                </Border>
                <Grid ColumnDefinitions="4*,Auto" VerticalAlignment="Center">
                    <TextBox x:Name="PART_TextBox"
                             CornerRadius="0"
                             FontFamily="Verdana"
                             FontSize="14"
                             Foreground="{DynamicResource Dhumra}"
                             Grid.Column="0">
                    </TextBox>
                    <Button x:Name="PART_Button"
                            BorderBrush="{DynamicResource Vatika}"
                            BorderThickness="0,0,0,1"
                            Content="📅"
                            CornerRadius="0"
                            Grid.Column="1"
                            Width="50">
                    </Button>
                </Grid>
                <Popup x:Name="PART_Popup"
                       Placement="Bottom"
                       IsLightDismissEnabled="True"
                       IsOpen="{TemplateBinding IsDropDownOpen}">
                    <Border Background="{DynamicResource Vana}"
                            Padding="0"
                            CornerRadius="4">
                        <!-- 应用自定义样式的Calendar -->
                        <Calendar x:Name="PART_Calendar"
                                  Background="{DynamicResource Vana}"
                                  BorderThickness="1" 
                                  Foreground="{DynamicResource Rajat}"
                                  DisplayMode="Month"/>
                    </Border>
                </Popup>
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

<!-- 移除Calendar右侧空白的自定义样式 -->
<Style Selector="Calendar">
    <Setter Property="Template">
        <ControlTemplate>
            <Grid Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}">
                <!-- 仅保留月份视图，移除默认的侧边切换控件 -->
                <CalendarMonthView x:Name="PART_MonthView"
                                   Foreground="{TemplateBinding Foreground}"
                                   Background="{TemplateBinding Background}"/>
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

原理说明：

• 自定义Calendar模板时，直接去掉了默认模板中用于显示年份选择器、月份切换按钮的侧边布局元素，只保留核心的PART_MonthView月份视图组件
• 这样Calendar就只会渲染月份日历部分，不会预留右侧的空白空间

内容的提问来源于stack exchange，提问作者Athang Tikekar