如何更改 header 文本在日期选择器 UWP 中右对齐

Question

xaml code

<DatePicker x:Name="PatientDateOfBirthPicker"
                        SelectedDateChanged="PatientDateOfBirthPicker_SelectedDateChanged"
                        Header="بەرواری لە دایک بوون"
                        DayFormat="day"
                        MonthFormat="{}{month.integer}"
                        YearFormat="{}{year.full(4)}"
                        YearVisible="True"
                        FontFamily="NRT Reg"
                        FontSize="18" 
                        FlowDirection="RightToLeft"
                        Width="400">
            </DatePicker>

How to change header text align to right tried both FlowDirection="RightToLeft" and FlowDirection="LeftToRight" it give me the same result

this is my result

Answer 1

You need modify the default style of the DataPicker , find the ContentPresenter control that used as header and change its FlowDirection property. There is a ContentPresenter named HeaderContentPresenter in the default style, you just need to set the FlowDirection property of that ContentPresenter to RightToLeft.

Xaml:

    <Page.Resources>
    <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="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}" BorderBrush="{ThemeResource DatePickerButtonBorderBrush}" BorderThickness="2" 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"
                                          FlowDirection="RightToLeft"
                                          AutomationProperties.AccessibilityView="Raw"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          Content="{TemplateBinding Header}"
                                          Foreground="{ThemeResource DatePickerHeaderForeground}"
                                          HorizontalAlignment="Stretch" MaxWidth="{ThemeResource DatePickerThemeMaxWidth}" 
                                          Margin="{ThemeResource DatePickerTopHeaderMargin}"
                                          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}" MaxWidth="{StaticResource DatePickerThemeMaxWidth}" MinWidth="{StaticResource DatePickerThemeMinWidth}" 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" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Padding="{ThemeResource DatePickerFlyoutPresenterItemPadding}" TextAlignment="Center" Text="Day"/>
                                <TextBlock x:Name="MonthTextBlock" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Margin="1,0,0,0" Padding="{ThemeResource DatePickerFlyoutPresenterMonthPadding}" TextAlignment="Left" Text="Month"/>
                                <TextBlock x:Name="YearTextBlock" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Padding="{ThemeResource DatePickerFlyoutPresenterItemPadding}" TextAlignment="Center" Text="Year"/>
                                <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>
</Page.Resources>

<Grid>
    <DatePicker Style="{StaticResource DatePickerStyle1}" 
                x:Name="PatientDateOfBirthPicker"
                SelectedDateChanged="PatientDateOfBirthPicker_SelectedDateChanged"
                    Header="بەرواری لە دایک بوون"
                    DayFormat="day"
                    MonthFormat="{}{month.integer}"
                    YearFormat="{}{year.full(4)}"
                    YearVisible="True"
                    FontFamily="NRT Reg"
                    FontSize="18" 
                    FlowDirection="RightToLeft"
                    Width="400">
    </DatePicker>
</Grid>

Result: