如何正确格式化 DatePicker StyleTemplate答案

【问题标题】：How do I correctly format the DatePicker StyleTemplate如何正确格式化 DatePicker StyleTemplate
【发布时间】：2016-05-10 06:04:42
【问题描述】：

我需要格式化 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.HorizontalAlignment="Left" 时我的 DatePicker 没有填充其父控件：

设置 Style.Setter.Value.ControlTemplate.StackPanel.Button.HorizontalAlignment="Strech" 时，我的 DatePicker 与其父控件重叠：

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

据我了解，RootLayout-Control 应从包含 DatePicker 的 Grid 继承其大小，而 Button 应从 RootLayout 获取其大小，结果将适合我的 GridColumn。

编辑：

当仅将 DatePickers HorizontalAlignment 更改为 Strech（并且没有样式）时，它与父网格的重叠方式很远：

【问题讨论】：

标签： c# visual-studio xaml datepicker uwp

【解决方案1】：

实际上您不需要更改样式或Button 对齐方式。您只需在两个控件中将HorizontalAlignment 设置为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" />

【讨论】：

嗨贾斯汀，看我上面的编辑，它没有按预期工作。