如何增加UWP日历日期选择器的高度

Question

我添加了UWP日历日期选择器。这是XAML代码

<CalendarDatePicker Background="White" Grid.Row="6" Width="660" VerticalAlignment="Stretch" FontSize="48" PlaceholderText="Date of Birth"  Padding="0" Margin="0" x:Name="DobDatePicker"></CalendarDatePicker>

但问题是，我无法更改日历文本块控件的高度(而不是弹出窗口(。我试着设定最小高度，但不起作用。有什么办法解决这个问题吗？

Answer 1

CalenderDatePicker的行定义具有默认样式的硬编码值(32(。因此，您可以修改CalenderDatePicker默认样式的特定部分来更改高度。

//要修改的部分

<Style TargetType="CalendarDatePicker">
....
....
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="32" /> /* change your value */
</Grid.RowDefinitions>
....
....
</Style>

您的参考屏幕截图

完整样式供您参考

//C#代码

<CalendarDatePicker>
<CalendarDatePicker.Style>
<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">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="32" />
</Grid.RowDefinitions>
<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>
</VisualStateManager.VisualStateGroups>
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<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>
<ContentPresenter x:Name="HeaderContentPresenter"
x:DeferLoadStrategy="Lazy"
Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
Visibility="Collapsed"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
TextWrapping="Wrap"/>
<Border x:Name="Background"
Grid.Row="1"
Grid.ColumnSpan="2"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True" />
<TextBlock x:Name="DateText"
HorizontalAlignment="Left"
Foreground="{ThemeResource CalendarDatePickerTextForeground}"
Text="{TemplateBinding PlaceholderText}"
Grid.Row="1"
FontSize="15"
Padding="12, 0, 0, 2"
VerticalAlignment="Center" />
<FontIcon x:Name="CalendarGlyph"
Glyph="&#xE787;"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Foreground="{ThemeResource CalendarDatePickerCalendarGlyphForeground}"
Grid.Row="1"
Grid.Column="1"
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CalendarDatePicker.Style>
</CalendarDatePicker>