UWP - cannot change placeholder text of CalendarDatePicker - xaml

Question

I have a CalendarDatePicker like this :
<CalendarDatePicker Grid.Row="10"
Grid.Column="0"
Name="BirthdayPicker"
PlaceholderText="{x:Bind ViewModel._FORM_dob, Mode=OneWay}"
HorizontalAlignment="Center"
Margin="0, 10, 0, 10"
DateFormat = "{}{year.full}-{month.integer}-{day.integer}"/>
I am unable to change its placeholder text. It always the placeholder that it gets the first time ( when the app starts ). after that Bindings.Update() does not change its placeholder text. I have also tried in the code behind:
BirthdayPicker.PlaceholderText = string.Empty;
BirthdayPicker.PlaceholderText = ViewModel._FORM_dob;
BirthdayPicker.MaxDate = DateTime.Now;
even this doesn't change the placeholder text. During debugging it shows the placeholder property has changed but it doesn't reflect in the UI

Answer 1

This is due to bad design of the control's default styling.
Inside its default style, there's a TextBlock called DateText which is bound with PlaceholderText via TemplateBinding. However, this control is also used to display the selected Date string. By doing this, the binding between the Text and the PlaceholderText will be broken and that's why when you provide a different value for the latter, the change is not reflected on the UI.
The reason that I said it's bad design is because the placeholder text should never be used for displaying the date text. Instead, a separate TextBlock should be created for this purpose only. Users of the control should expect any non-readonly dependency properties to just work with bindings without worrying about them being broken by hidden code.
Solution
So I have modified the default style a bit to include a new TextBlock just for displaying the PlaceholderText property. I removed the TemplateBinding from DateText and also changed its color along with some Visibility updates inside the Selected visual state.
Here is a full copy for your reference.
<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="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">
<VisualState.Setters>
<Setter Target="Placeholder.(UIElement.Visibility)"
Value="Collapsed" />
<Setter Target="DateText.(UIElement.Visibility)"
Value="Visible" />
</VisualState.Setters>
</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}" />
<TextBlock x:Name="DateText"
HorizontalAlignment="Left"
Foreground="{ThemeResource CalendarDatePickerTextForegroundSelected}"
Grid.Row="1"
FontSize="15"
Padding="12, 0, 0, 2"
VerticalAlignment="Center"
Visibility="Collapsed" />
<TextBlock x:Name="Placeholder"
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=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Foreground="{ThemeResource CalendarDatePickerCalendarGlyphForeground}"
Grid.Row="1"
Grid.Column="1"
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>