Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent control height and spacing between the control and its Header for TimePicker and CalendarDatePicker #8950

Open
akshat157 opened this issue Oct 5, 2023 · 0 comments
Labels
area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView bug Something isn't working team-Controls Issue for the Controls team

Comments

@akshat157
Copy link

Describe the bug

The attached screenshot provides the best description of the height and spacing inconsistency.

When placed side by side without any spacing related properties, simply in a Grid, the TimePicker and CalendarDatePicker have inconsistent (unequal) spacing between their respective headers and have different control height.

Steps to reproduce the bug

In a basic WinUI 3 application, add the following Grid inside the Window control instead of the default StackPanel

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="0" Margin="0,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <CalendarDatePicker x:Name="CalendarDatePickerExecutionTime"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Header="Date"
                        DateFormat="{}{year.full}/{month.integer}/{day.integer}"
                        Date="{x:Bind SelectedExecutionDate, Mode=TwoWay}"
                        Grid.Column="0"
                        Padding="20"
                        Margin="0,0,5,0" />
    <TimePicker x:Name="TimePickerExecutionTime"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Header="Time"
                SelectedTime="{x:Bind SelectedExecutionTime, Mode=TwoWay}"
                ClockIdentifier="24HourClock"
                Grid.Column="1"
                Margin="5,0,0,0" />
</Grid>

Expected behavior

Ideally, both the controls should be of the same height (or height that is easily adjustable), along with same spacing between their headers and the control.

Screenshots

Screenshot 2023-10-05 233542

NuGet package version

None

Windows version

Windows 11 (22H2): Build 22621

Additional context

It is extremely difficult to style these controls with the default properties. Most of the styling requires you to copy the whole style from generic.xaml even for very small changes, sometimes. I wish there was an easier way to modify the styles of these common controls.

@akshat157 akshat157 added the bug Something isn't working label Oct 5, 2023
@akshat157 akshat157 changed the title Inconsistent spacing between Header and control height for TimePicker and CalendarDatePicker Inconsistent control height and spacing between the control and its Header for TimePicker and CalendarDatePicker Oct 5, 2023
@codendone codendone added area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView team-Controls Issue for the Controls team labels Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView bug Something isn't working team-Controls Issue for the Controls team
Projects
None yet
Development

No branches or pull requests

2 participants