如何让UWP DatePicker拉伸至容器完整宽度？

DatePicker默认模板内置了MaxWidth限制，所以即便设置HorizontalAlignment="Stretch"，也无法让它完全适配父容器宽度。要实现分段按比例拉伸，需要重写它的ControlTemplate，具体步骤如下：

1. 提取默认ControlTemplate #

在Visual Studio中右键DatePicker控件，选择编辑模板 -> 编辑副本，系统会自动生成包含默认样式的XAML代码，你可将其放入资源字典或窗口的Resources节点中。

2. 修改模板中的宽度约束 #

找到模板内名为PART_Root的Grid容器，移除它的MaxWidth属性；然后调整Grid的ColumnDefinition，给年、月、日三个分段设置按比例分配的宽度：

• 若要三个分段等宽，设置所有ColumnDefinition.Width="*"
• 若要中间的月份分段占比更大，可设置为Width="2*"，其余两段设为Width="*"

示例修改后的关键代码片段：

<ControlTemplate TargetType="{x:Type DatePicker}">
    <Grid x:Name="PART_Root" Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <!-- 移除原有的MaxWidth属性 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/> <!-- 年份选择列 -->
            <ColumnDefinition Width="2*"/> <!-- 月份选择列，占2倍宽度 -->
            <ColumnDefinition Width="*"/> <!-- 日期选择列 -->
        </Grid.ColumnDefinitions>
        
        <!-- 适配拉伸的DatePicker输入框 -->
        <DatePickerTextBox x:Name="PART_TextBox" Grid.ColumnSpan="3" 
                          HorizontalAlignment="Stretch" VerticalContentAlignment="Center"/>
        
        <!-- 下拉日历按钮，保持固定位置 -->
        <Button x:Name="PART_Button" Grid.Column="2" 
                HorizontalAlignment="Right" VerticalAlignment="Center"
                Focusable="False" Style="{StaticResource DatePickerButtonStyle}"/>
    </Grid>
    <!-- 模板其余部分保持不变 -->
</ControlTemplate>

3. 额外注意事项 #

• 确保DatePickerTextBox的HorizontalAlignment设为Stretch，且未设置固定宽度或MaxWidth；
• 下拉按钮需单独设置位置（比如HorizontalAlignment="Right"），避免被拉伸的输入区域挤压；
• 若使用拆分式的年月日选择器（而非单个输入框），需将每个选择控件放入对应列，并设置HorizontalAlignment="Stretch"。

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