I Want to increase the height of <DatePicker> here is my code. I tried multiple solutions but it didn't work. <DatePicker x:Name="xyz" DayVisible="False" Width="{x:Bind CalenderWidth }" Style="{StaticResource DatePicker}" FontFamily="Roboto" FontSize="14" BorderThickness="0" Height="44" MaxHeight="44" /> <Style x:Key="DatePicker" TargetType="DatePicker"> <Setter Property="FontFamily" Value="Roboto" /> <Setter Property="FontSize" Value="14" /> <Setter Property="BorderBrush" Value="#CCCCCC" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="FocusVisualPrimaryBrush" Value="#CCCCCC" /> <Setter Property="MaxHeight" Value="44" /> </Style>

UWP : <DatePicker> Height Issue

Accepted answer

Roy Li - MSFT 32,731 Microsoft Vendor

Hello,

Welcome to Microsoft Q&A!

Actually, the DatePicker control is a big button. The height is decided by the button height. So if you want to change the height of the DatePicker, you will need to modify the button in the DatePicker default style to change the height.

Here are the steps that you could refer to:

remove the style that you already used first.
Open the Document Outline Window in Visual Studio.
Find the DatePicker control in the Visual Tree.
Right-click the DatePicker control, find Edit Template, choose Edit a Copy. VS will automatically generate a default style of the DatePicker control.
Find the DatePickerFlyoutButtonStyle in that default style.
Add a new Set for Height like <Setter Property="Height" Value="200"/> inside the DatePickerFlyoutButtonStyle
Then the height of the DatePicker will be changed.

The code should be like this:

        <Style x:Key="DatePickerStyle1" TargetType="DatePicker">  
            <Setter Property="Orientation" Value="Horizontal"/>  
            <Setter Property="IsTabStop" Value="False"/>  
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>  
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>  
            <Setter Property="Foreground" Value="{ThemeResource DatePickerButtonForeground}"/>  
            <Setter Property="HorizontalAlignment" Value="Left"/>  
            <Setter Property="VerticalAlignment" Value="Center"/>  
            <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="DatePicker">  
                        <Grid x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">  
                            <Grid.Resources>  
                                <Style x:Key="DatePickerFlyoutButtonStyle" TargetType="Button">  
                                    <Setter Property="UseSystemFocusVisuals" Value="False"/>  
                                    <Setter Property="ElementSoundMode" Value="FocusOnly"/>  
                                    <Setter Property="Height" Value="200"/>  
                                    <Setter Property="Template">  
                                        <Setter.Value>  
                                            <ControlTemplate TargetType="Button">  
                                                <Grid Background="{TemplateBinding Background}">  
                                                    <VisualStateManager.VisualStateGroups>  
                                                        <VisualStateGroup x:Name="CommonStates">  
                                                            <VisualState x:Name="Normal"/>  
                                                            <VisualState x:Name="PointerOver">  
                                                                <Storyboard>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBorderBrushPointerOver}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBackgroundPointerOver}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonForegroundPointerOver}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                </Storyboard>  
                                                            </VisualState>  
                                                            <VisualState x:Name="Pressed">  
                                                                <Storyboard>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBackgroundPressed}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBorderBrushPressed}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonForegroundPressed}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                </Storyboard>  
                                                            </VisualState>  
                                                            <VisualState x:Name="Disabled">  
                                                                <Storyboard>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBackgroundDisabled}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBorderBrushDisabled}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonForegroundDisabled}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                </Storyboard>  
                                                            </VisualState>  
                                                        </VisualStateGroup>  
                                                        <VisualStateGroup x:Name="FocusStates">  
                                                            <VisualState x:Name="Focused">  
                                                                <Storyboard>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonBackgroundFocused}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerButtonForegroundFocused}"/>  
                                                                    </ObjectAnimationUsingKeyFrames>  
                                                                </Storyboard>  
                                                            </VisualState>  
                                                            <VisualState x:Name="Unfocused"/>  
                                                            <VisualState x:Name="PointerFocused"/>  
                                                        </VisualStateGroup>  
                                                    </VisualStateManager.VisualStateGroups>  
                                                    <ContentPresenter x:Name="ContentPresenter"   
                                                                      AutomationProperties.AccessibilityView="Raw"  
                                                                      Background="{ThemeResource DatePickerButtonBackground}"   
                                                                      BorderThickness="2" BorderBrush="{ThemeResource DatePickerButtonBorderBrush}"  
                                                                      Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"   
                                                                      HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>  
                                                </Grid>  
                                            </ControlTemplate>  
                                        </Setter.Value>  
                                    </Setter>  
                                </Style>  
                            </Grid.Resources>  
                            <Grid.RowDefinitions>  
                                <RowDefinition Height="Auto"/>  
                                <RowDefinition Height="*"/>  
                            </Grid.RowDefinitions>  
                            <VisualStateManager.VisualStateGroups>  
                                <VisualStateGroup x:Name="CommonStates">  
                                    <VisualState x:Name="Normal"/>  
                                    <VisualState x:Name="Disabled">  
                                        <Storyboard>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerHeaderForegroundDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPickerSpacing" Storyboard.TargetProperty="Fill">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerSpacerFillDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondPickerSpacing" Storyboard.TargetProperty="Fill">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DatePickerSpacerFillDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                        </Storyboard>  
                                    </VisualState>  
                                </VisualStateGroup>  
                                <VisualStateGroup x:Name="HasDateStates">  
                                    <VisualState x:Name="HasDate"/>  
                                    <VisualState x:Name="HasNoDate">  
                                        <VisualState.Setters>  
                                            <Setter Target="DayTextBlock.Foreground" Value="{ThemeResource TextControlPlaceholderForeground}"/>  
                                            <Setter Target="MonthTextBlock.Foreground" Value="{ThemeResource TextControlPlaceholderForeground}"/>  
                                            <Setter Target="YearTextBlock.Foreground" Value="{ThemeResource TextControlPlaceholderForeground}"/>  
                                        </VisualState.Setters>  
                                    </VisualState>  
                                </VisualStateGroup>  
                            </VisualStateManager.VisualStateGroups>  
                            <ContentPresenter x:Name="HeaderContentPresenter"   
                                              AutomationProperties.AccessibilityView="Raw"   
                                              ContentTemplate="{TemplateBinding HeaderTemplate}"   
                                              Content="{TemplateBinding Header}"   
                                              Foreground="{ThemeResource DatePickerHeaderForeground}"   
                                              HorizontalAlignment="Stretch"   
                                              Margin="{ThemeResource DatePickerTopHeaderMargin}"  
                                              MaxWidth="{ThemeResource DatePickerThemeMaxWidth}"   
                                              Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed"/>  
                            <Button x:Name="FlyoutButton" Background="{TemplateBinding Background}"   
                                    Foreground="{TemplateBinding Foreground}"  
                                    HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"   
                                    IsEnabled="{TemplateBinding IsEnabled}"  
                                    MinWidth="{StaticResource DatePickerThemeMinWidth}" MaxWidth="{StaticResource DatePickerThemeMaxWidth}" Grid.Row="1"   
                                    Style="{StaticResource DatePickerFlyoutButtonStyle}" UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" VerticalAlignment="Top">  
                                <Grid x:Name="FlyoutButtonContentGrid">  
                                    <Grid.ColumnDefinitions>  
                                        <ColumnDefinition x:Name="DayColumn" Width="78*"/>  
                                        <ColumnDefinition x:Name="FirstSpacerColumn" Width="Auto"/>  
                                        <ColumnDefinition x:Name="MonthColumn" Width="132*"/>  
                                        <ColumnDefinition x:Name="SecondSpacerColumn" Width="Auto"/>  
                                        <ColumnDefinition x:Name="YearColumn" Width="78*"/>  
                                    </Grid.ColumnDefinitions>  
                                    <TextBlock x:Name="DayTextBlock" AutomationProperties.AccessibilityView="Raw"  
                                               FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}"   
                                               FontSize="{TemplateBinding FontSize}" Padding="{ThemeResource DatePickerFlyoutPresenterItemPadding}" Text="Day" TextAlignment="Center"/>  
                                    <TextBlock x:Name="MonthTextBlock" AutomationProperties.AccessibilityView="Raw"  
                                               FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"  
                                               Margin="1,0,0,0" Padding="{ThemeResource DatePickerFlyoutPresenterMonthPadding}" Text="Month" TextAlignment="Left"/>  
                                    <TextBlock x:Name="YearTextBlock" AutomationProperties.AccessibilityView="Raw"   
                                               FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}"   
                                               FontSize="{TemplateBinding FontSize}" Padding="{ThemeResource DatePickerFlyoutPresenterItemPadding}" Text="Year" TextAlignment="Center"/>  
                                    <Rectangle x:Name="FirstPickerSpacing" Grid.Column="1" Fill="{ThemeResource DatePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>  
                                    <Rectangle x:Name="SecondPickerSpacing" Grid.Column="3" Fill="{ThemeResource DatePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>  
                                </Grid>  
                            </Button>  
                        </Grid>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

PatrickTalon38 46 Reputation points

2021-12-18T21:53:38.543+00:00

I'm also interested in the ability to change the default style of controls. However, I tried to reproduce your steps in Visual Studio 2022, and the Document Outline appeared blank and empty. Did I miss something? Thanks for any response and explanation, in advance. ~ Patrick
Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2021-12-20T06:54:16.283+00:00
Well, I'm using Visual Studio 2019 right now. I don't have a Visual Studio 2022 now but I'll try to install one later. And I have a simple question, is your app a native UWP app or a WinUI app?

There is another way to find the default style of a control if your app is a native UWP app. In a XAML page, the page will have a background generated by the template.

Like

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

Choose the ApplicationPageBackgroundThemeBrush, and press F12 to go to the definition page of this resource, you will jump to the generic.xaml file which contains all the default styles of UWP controls. Then you could search for TargetType="DatePicker" to find the style of DatePicker.

I'll test on Visual Studio 2022 once I finished the installation to see if there are any differences on VS 2022.

Share via

UWP : <DatePicker> Height Issue

0 additional answers