Xaml UWP-无法更改CalendarDatePicker的占位符文本

Xaml UWP-无法更改CalendarDatePicker的占位符文本,xaml,uwp,Xaml,Uwp,我有一个CalendarDatePicker如下: <CalendarDatePicker Grid.Row="10" Grid.Column="0" Name="BirthdayPicker" PlaceholderText="{x:Bind View

我有一个
CalendarDatePicker
如下:

<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}"/>

即使这样也不会更改占位符文本。在调试期间,它显示占位符属性已更改,但未反映在UI中这是由于控件的默认样式设计不正确所致

在其内部,有一个名为
DateText
TextBlock
,通过
TemplateBinding
placeholder text
绑定。但是,此控件也用于显示所选的
日期
字符串。这样做会破坏
文本
占位符文本
之间的绑定,这就是为什么当您为后者提供不同的值时,更改不会反映在UI上

我之所以说它的设计不好,是因为占位符文本不应该用于显示日期文本。相反,应仅为此目的创建单独的
TextBlock
。控件的用户应该期望任何非只读依赖属性只处理绑定,而不必担心它们被隐藏代码破坏


解决方案 因此,我对默认样式进行了一些修改,添加了一个新的
TextBlock
,仅用于显示
占位符文本
属性。我从
DateText
中删除了
TemplateBinding
,还更改了它的颜色以及
所选
可视状态中的一些
可见性
更新

这是一份完整的副本供你参考

<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="&#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>

很抱歉,我无法测试它,很快就会进行测试。
<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="&#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>