如何在 xamarin.forms 中为日期选择器实现自定义渲染器？答案

【问题标题】：How to implement custom renderer for date picker in xamarin.forms?如何在 xamarin.forms 中为日期选择器实现自定义渲染器？
【发布时间】：2023-03-18 17:20:01
【问题描述】：

我正在所有平台上创建一个应用程序，但主要关注UWP，但是当我尝试实现日期选择器时，我遇到了一些在 iOS 和 Android 中运行良好的问题。有人可以帮帮我吗？

1- 默认情况下是否为 DatePicker 设置了最大宽度？目前我已经在 Grid.Row 的 DatePicker 中添加了属性“HorizontalOptions="FillAndExpand"。

代码：

<local:ExtendedDatePicker HorizontalOptions="FillAndExpand" Date="{Binding DOBDate}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="9">
</local:ExtendedDatePicker>

2- 我想让角落变圆。我可以使用渲染来完成 iOS 和 Android。但我不知道如何在 UWP 中制作。我已尝试使用以下代码。

代码：

protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
{
    base.OnElementChanged(e);

    if (Control != null)
    {
        Control.BorderThickness = new Windows.UI.Xaml.Thickness(5);
        Control.Margin = new Windows.UI.Xaml.Thickness(0);
        Control.FontFamily = new Windows.UI.Xaml.Media.FontFamily("Roboto");
        Control.FontSize = 14;
        Control.Padding = new Windows.UI.Xaml.Thickness(0);
    }
}

3- 如何设置 DatePicker 的格式。我已尝试使用以下代码，它在 iOS 和 Android 中运行良好。但是，它在 UWP 中保持相同的格式。

<local:ExtendedDatePicker HorizontalOptions="FillAndExpand" Date="{Binding DOBDate}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="9">
    <DatePicker.Format>dd/MM/yyyy</DatePicker.Format>
</local:ExtendedDatePicker>

您可以在第一点看到的图像。

请提出建议。

【问题讨论】：

如果答案已经解决了您的问题，请mark 方便以后访问此主题的人接受，感谢您的理解。
你有什么更新吗？

标签： xamarin.forms datepicker uwp uwp-xaml xamarin.uwp

【解决方案1】：

DatePicker 是否默认设置了最大宽度？

UWP 中的本机控件匹配 Xamarin DatePicker 是 DatePicker。您可以为 DatePicker in the app resource directory like the follow. And modify theMinWidthandMaxWidth 属性创建 DatePickerStyle 以编辑源中的样式。对于这种方式，您无需创建自定义渲染。

<Style TargetType="DatePicker">
    <Setter Property="Orientation" Value="Horizontal"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="MinWidth" Value="120"/>
    <Setter Property="MaxWidth" Value="150"/>
    <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">
                <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
                    <StackPanel.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" CornerRadius="10,10,10,10" 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>
                    </StackPanel.Resources>
                    <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>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="HeaderContentPresenter"  AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource DatePickerHeaderForeground}" Margin="0,0,0,8" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                    <Button x:Name="FlyoutButton" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" IsEnabled="{TemplateBinding IsEnabled}" Style="{StaticResource DatePickerFlyoutButtonStyle}" UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}">
                        <Grid x:Name="FlyoutButtonContentGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="DayColumn" Width="1*"/>
                                <ColumnDefinition x:Name="FirstSpacerColumn" Width="Auto"/>
                                <ColumnDefinition x:Name="MonthColumn" Width="1*"/>
                                <ColumnDefinition x:Name="SecondSpacerColumn" Width="Auto"/>
                                <ColumnDefinition x:Name="YearColumn" Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock x:Name="DayTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Padding="0,3,0,5" Text="Day" TextAlignment="Center"/>
                            <TextBlock x:Name="MonthTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Padding="10,3,0,5" Text="Month" TextAlignment="Left"/>
                            <TextBlock x:Name="YearTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Padding="0,3,0,5" 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>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想让角变圆。

根据上面的xaml代码，只要在ContentPresenter x:Name="ContentPresenter"中加上合适的CornerRadius，就会显示为excepted。

如何设置 DatePicker 的格式。我尝试过使用以下代码，它在 iOS 和 Android 中运行良好。但是，它在 UWP 中保持相同的格式

Format 属性似乎在 uwp 项目中不起作用。因为，UWP 不支持年、月、日显示位置调整。但是您可以像link 一样手动使用DateFormat。

【讨论】：