UWP : <DatePicker> Height Issue

Priyanka Amrutkar 21 Reputation points
2021-12-15T12:29:45.867+00:00

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>

Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Roy Li - MSFT 31,356 Reputation points Microsoft Vendor
    2021-12-16T02:53:06.287+00:00

    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:

    1. remove the style that you already used first.
    2. Open the Document Outline Window in Visual Studio.
    3. Find the DatePicker control in the Visual Tree.
    4. Right-click the DatePicker control, find Edit Template, choose Edit a Copy. VS will automatically generate a default style of the DatePicker control.
    5. Find the DatePickerFlyoutButtonStyle in that default style.
    6. Add a new Set for Height like <Setter Property="Height" Value="200"/> inside the DatePickerFlyoutButtonStyle
    7. 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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful