Net Maui - How to chenge padding value of DatePicker control

Question

I need to remove or change the padding value of the DatePicker control. I understand that I need to use handlers, as I have successfully done for the Entry control. However, while it works perfectly for the Entry control, it doesn't work at all for the DatePicker control.

I used this code:


        Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping("DatePickerCustom", (handler, view) =>
        {
            if (view is DatePicker)
            {

                #if ANDROID
                     //handler.PlatformView.SetSelectAllOnFocus(true);
                #elif WINDOWS
                     handler.PlatformView.Padding=new Microsoft.UI.Xaml.Thickness(3,2,3,2);
                #endif

            }
        });

Thanks

Hi, only for left and right padding and not for top and bottom — Kraken
– Kraken, Commented Feb 25 at 16:38

Stephen Quan · Accepted Answer · 2025-03-17 02:36:24Z

2

The DatePicker control is roughly 119x44. We can shrink it to 99x24 by removing 20 pixels in both Width and Height by using negative values in the Margin, e.g.

<!--  without cropping  -->
<Border Padding="2" HorizontalOptions="Start">
    <DatePicker x:Name="datePicker" />
</Border>

<!--  with cropping  -->
<Border Padding="2" HorizontalOptions="Start">
    <DatePicker Margin="-10,-10,-10,-10" >
        <DatePicker.Clip>
            <RectangleGeometry Rect="10,10,99,24" />
        </DatePicker.Clip>
    </DatePicker>
</Border>

edited Mar 17 at 2:36

answered Feb 27 at 6:54

Stephen Quan

27.9k4 gold badges101 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leon Lu · Accepted Answer · 2025-02-27 06:29:58Z

If you set the background color of the main grid, you will notice it.

Yes, you can set MaxHeight="20" for your <Grid x:Name="Root" MaxHeight="20">, the top and bottom padding will be decrease. And it will works if you set the background color

<maui:MauiWinUIApplication
    x:Class="MauiApp1.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:MauiApp1.WinUI">
 
    <maui:MauiWinUIApplication.Resources>    

 <!-- Default style for CalendarDatePicker -->
    <Style TargetType="CalendarDatePicker">
        <Setter Property="Foreground" Value="{ThemeResource CalendarDatePickerForeground}" />
        <Setter Property="Background" Value="{ThemeResource CalendarDatePickerBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource CalendarDatePickerBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource CalendarDatePickerBorderThemeThickness}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarDatePicker">
                    <Grid x:Name="Root" MaxHeight="20">
 
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
 
                                <VisualState x:Name="PointerOver">
 
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBorderBrushPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
 
                                <VisualState x:Name="Pressed">
 
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBorderBrushPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
 
                                <VisualState x:Name="Disabled">
 
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBorderBrushDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerHeaderForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerTextForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalendarGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerCalendarGlyphForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
 
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                                <VisualState x:Name="Focused">
 
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundFocused}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
 
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
 
                                <VisualState x:Name="Selected">
 
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerTextForegroundSelected}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
 
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="HeaderStates">
                                <VisualState x:Name="TopHeader" />
                                <VisualState x:Name="LeftHeader">
                                    <VisualState.Setters>
                                        <Setter Target="HeaderContentPresenter.(Grid.Row)" Value="1" />
                                        <Setter Target="HeaderContentPresenter.(Grid.Column)" Value="0" />
                                        <Setter Target="HeaderContentPresenter.(Grid.ColumnSpan)" Value="1" />
                                        <Setter Target="HeaderContentPresenter.Margin" Value="{StaticResource CalendarDatePickerLeftHeaderMargin}" />
                                        <Setter Target="HeaderContentPresenter.MaxWidth" Value="{StaticResource CalendarDatePickerLeftHeaderMaxWidth}" />
                                    </VisualState.Setters>
                                </VisualState>
 
                            </VisualStateGroup>
 
                        </VisualStateManager.VisualStateGroups>
                        <FlyoutBase.AttachedFlyout>
                            <Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Padding" Value="0" />
                                        <Setter Property="BorderThickness" Value="0" />
                                        <Setter Property="IsDefaultShadowEnabled" Value="True" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="FlyoutPresenter">
                                                    <ContentPresenter Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <CalendarView x:Name="CalendarView"
                    Style="{TemplateBinding CalendarViewStyle}"
                    MinDate="{TemplateBinding MinDate}"
                    MaxDate="{TemplateBinding MaxDate}"
                    IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
                    DisplayMode="{TemplateBinding DisplayMode}"
                    FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                    DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}"
                    CalendarIdentifier="{TemplateBinding CalendarIdentifier}"
                    IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}"
                    IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" />
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
 
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
 <!--change the height of ColumnDefinition, I change it from 32 to 22-->

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="22" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                x:DeferLoadStrategy="Lazy"
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Content="{TemplateBinding Header}"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                Margin="{StaticResource CalendarDatePickerTopHeaderMargin}"
                TextWrapping="Wrap"
                VerticalAlignment="Top"
                Visibility="Collapsed" />
                        <Border x:Name="Background"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"
                CornerRadius="{TemplateBinding CornerRadius}"
                Control.IsTemplateFocusTarget="True"
                MinHeight="32"/>
    <!--change the padding of TextBlock, I change the padding from Padding="12, 0, 0, 2" to  Padding="3, 0, 0, 2"-->
                        <TextBlock x:Name="DateText"
                Grid.Row="1"
                Grid.Column="1"
                HorizontalAlignment="Left"
                Foreground="{ThemeResource CalendarDatePickerTextForeground}"
                Text="{TemplateBinding PlaceholderText}"
                Padding="3, 0, 0, 2"
                VerticalAlignment="Center" />
                        <FontIcon x:Name="CalendarGlyph"
                Grid.Row="1"
                Grid.Column="2"
                Glyph="&#xE787;"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                Foreground="{ThemeResource CalendarDatePickerCalendarGlyphForeground}"
                FontSize="12"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
                        <ContentPresenter x:Name="DescriptionPresenter"
                Grid.Row="2"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Content="{TemplateBinding Description}"
                x:Load="False"
                Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                AutomationProperties.AccessibilityView="Raw" />
 
                    </Grid>
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

If you want to change the padding of datapicker for Windows platform, Please open the generic.xaml, then find the Default style for CalendarDatePicker.

Copy the style to the App.xaml in the /Platforms/Windows folder.

We can find the datepicker combine with <Grid> that include the <ContentPresenter>, <Border> <TextBlock> <FontIcon>, if you want to adjust the padding, we can change the padding of <TextBlock> and the Column width at<ColumnDefinition Width="32" />

It does not work properly. If you set the background color of the main grid, you will notice it.
Yes, I've seen it, but it's limiting. With that modification, it wouldn't be able to exceed that value
I resolved it usig the standard control and setting the MinimumHeightRequest property to a low value in page.

Collectives™ on Stack Overflow

Net Maui - How to chenge padding value of DatePicker control

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related