CODEWITHSUNDEEP
c#visual-studioxamldatepickeruwp
Raymond Osterbrink
Raymond Osterbrink

Reputation: 540

How do I correctly format the DatePicker StyleTemplate

I need to format an UWP-DatePicker. What I'd like to get would be a common DatePicker which fits inside a grid propperly.

Here is how I embedded the DatePicker inside my GridColumn:

<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>

Here are the "crucial" changes to the 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" />

When setting Style.Setter.Value.ControlTemplate.StackPanel.Button.HorizontalAlignment="Left" my DatePicker does not fill its parent control: Button to Small

When setting Style.Setter.Value.ControlTemplate.StackPanel.Button.HorizontalAlignment="Strech" my DatePicker is overlapping its parent control: Button overlapping

This behavior also stays the same when I'm changing the StyleTemplates LayoutRoot from StackPanel to Grid.

In my understanding, the RootLayout-Control should inherit its size from the Grid containing the DatePicker, and the Button should get its size from RootLayout with an result in fitting inside my GridColumn.

EDIT:

When changing only the DatePickers HorizontalAlignment to Strech (and in abscense of a style) it's overlapping the parent grid way to far: enter image description here

Upvotes: 3

Views: 909

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Actually you don't need to change the style or the Button alignments. All you need is to set the HorizontalAlignment to Stretch in both controls. Note that the default value of it is 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>

Update

One more thing. DatePicker has a default MinWidth of 296 and TimePicker of 242. So if you could set them to a smaller value, like this -

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

Upvotes: 5

Related Questions