如何正确格式化DatePicker StyleTemplate

Question

我需要格式化UWP-DatePicker.我想得到的是一个常见的DatePicker,它适合在网格中.

以下是我在GridColumn中嵌入DatePicker的方法:

<Grid Grid.Row="1" Grid.Column="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <DatePicker Grid.Column="0"
                HorizontalAlignment="Left"
                MonthFormat="{}{month.abbreviated(3)}" 
                Date="{Binding AppointmentStartDateProxy, Mode=TwoWay}" 
                DateChanged="DatePicker_DateChanged" 
                Style="{StaticResource DatePickerStyle1}"> 
        <DatePicker.IsEnabled>
            <Binding Path="Closed" Converter="{StaticResource negationConverter}"/>
        </DatePicker.IsEnabled>
    </DatePicker>
</Grid>

以下是StyleTemplate的"关键"更改:

<Style x:Key="DatePickerStyle1" TargetType="DatePicker">
    <.../>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePicker">
                <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}" HorizontalAlignment="Stretch" >
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                      x:DeferLoadStrategy="Lazy"
                                      Visibility="Collapsed"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      Margin="0,0,0,8"
                                      Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                      AutomationProperties.AccessibilityView="Raw" />
                    <Button x:Name="FlyoutButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource DatePickerFlyoutButtonStyle}"
                            Foreground="{TemplateBinding Foreground}"
                            Background="{TemplateBinding Background}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            HorizontalContentAlignment="Stretch" />

设置Style.Setter.Value.ControlTemplate.StackPanel.Button.Horizo​​ntalAlignment ="Left"时,我的DatePicker不会填充其父控件:

设置Style.Setter.Value.ControlTemplate.StackPanel.Button.Horizo​​ntalAlignment ="Strech"时,我的DatePicker与其父控件重叠:

当我将StyleTemplates LayoutRoot从StackPanel更改为Grid时,此行为也保持不变.

根据我的理解,RootLayout-Control应该从包含DatePicker的Grid继承它的大小,而Button应该从RootLayout获得它的大小,结果是在我的GridColumn中.

编辑:

当仅将DatePickers Horizo​​ntalAlignment更改为Strech(并且在样式的abscense中)时,它将父网格方式重叠为远:

Answer 1

实际上,您无需更改样式或Button对齐方式.您只需在两个控件中设置HorizontalAlignmentto Stretch.请注意,它的默认值是Left.

<Grid x:Name="LayoutRoot">
    <Grid Width="800">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <DatePicker Grid.Column="0" MonthFormat="{}{month.abbreviated(3)}" HorizontalAlignment="Stretch" />
        <TimePicker Grid.Column="1" HorizontalAlignment="Stretch" />
    </Grid>
</Grid>

更新

还有一件事.DatePicker有一个默认MinWidth的296和TimePicker的242.所以如果你可以将它们设置为更小的值,就像这样 -

<DatePicker Grid.Column="0" MonthFormat="{}{month.abbreviated(3)}" HorizontalAlignment="Stretch" MinWidth="80" />
<TimePicker Grid.Column="1" HorizontalAlignment="Stretch" MinWidth="80" />