UWP-DatePicker和TimePicker自定义

debugcn 发表于 Dev

塞缪尔·利奥特（Samuel LIOULT）

我想在同一行上（水平）使用DatePicker和TimePicker。我的问题是这些控件太宽。因此，我对它们进行了自定义以减少内容，但是由于弹出框太宽，因此无法减小宽度。因此，我寻找一种自定义弹出窗口或为控件和弹出窗口设置不同大小的方法。

这是我的DatePicker样式：

<Style 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 SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <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="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 SystemControlHighlightBaseMediumBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="BorderBrush">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="BorderBrush">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                            </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 SystemControlHighlightListAccentLowBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unfocused" />
                                                    <VisualState x:Name="PointerFocused" />
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <ContentPresenter x:Name="ContentPresenter"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Content="{TemplateBinding Content}"
                                    Foreground="{TemplateBinding Foreground}"
                                    HorizontalContentAlignment="Stretch"
                                    VerticalContentAlignment="Stretch"
                                    AutomationProperties.AccessibilityView="Raw"/>
                                        </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 SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPickerSpacing"
                                             Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondPickerSpacing"
                                             Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                      x:DeferLoadStrategy="Lazy"
                                      Visibility="Collapsed"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      Margin="0,0,0,8"
                                      Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                      AutomationProperties.AccessibilityView="Raw"
                                      BorderBrush="{TemplateBinding BorderBrush}"/>
                    <Button x:Name="FlyoutButton"
                            Style="{StaticResource DatePickerFlyoutButtonStyle}"
                            Foreground="{TemplateBinding Foreground}"
                            Background="{TemplateBinding Background}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid x:Name="FlyoutButtonContentGrid"
                              HorizontalAlignment="Center">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" x:Name="DayColumn" />
                                <ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
                                <ColumnDefinition Width="Auto" x:Name="MonthColumn" />
                                <ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
                                <ColumnDefinition Width="Auto" x:Name="YearColumn" />
                            </Grid.ColumnDefinitions>

                            <TextBlock x:Name="DayTextBlock" Text="Day" TextAlignment="Center" Margin="4" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock x:Name="MonthTextBlock" Text="Month" TextAlignment="Left" Margin="4" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock x:Name="YearTextBlock" Text="Year" TextAlignment="Center" Margin="4" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>

                        </Grid>
                    </Button>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

周杰伦

要自定义弹出窗口，我们可以编辑DatePickerFlyoutPresenter和TimePickerFlyoutPresenter的样式和模板。我们可以在Windows SDK安装目录的\（程序文件）\ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ 10.0.14393.0 \ Generic文件夹中找到的generic.xaml中找到这些样式。对于不同的SDK版本，路径是不同的，样式和资源可能具有不同的值。例如，使用14393中的默认样式：DatePickerFlyoutPresenter

<!-- Default style for Windows.UI.Xaml.Controls.DatePickerFlyoutPresenter -->
<Style TargetType="DatePickerFlyoutPresenter">
    <Setter Property="Width" Value="296" />
    <Setter Property="MinWidth" Value="296" />
    <Setter Property="MaxHeight" Value="398" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="{ThemeResource DatePickerFlyoutPresenterBackground}" />
    <Setter Property="AutomationProperties.AutomationId" Value="DatePickerFlyoutPresenter" />
    <Setter Property="BorderBrush" Value="{ThemeResource DatePickerFlyoutPresenterBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePickerFlyoutPresenter">
                <Border x:Name="Background"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    MaxHeight="398">
                    <Grid x:Name="ContentPanel">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid x:Name="PickerHostGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="78*" x:Name="DayColumn" />
                                <ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
                                <ColumnDefinition Width="132*" x:Name="MonthColumn" />
                                <ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
                                <ColumnDefinition Width="78*" x:Name="YearColumn" />
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="HighlightRect"
                                Fill="{ThemeResource DatePickerFlyoutPresenterHighlightFill}"
                                Grid.Column="0"
                                Grid.ColumnSpan="5"
                                VerticalAlignment="Center"
                                Height="44" />
                            <Rectangle x:Name="FirstPickerSpacing"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                HorizontalAlignment="Center"
                                Width="2"
                                Grid.Column="1" />
                            <Rectangle x:Name="SecondPickerSpacing"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                HorizontalAlignment="Center"
                                Width="2"
                                Grid.Column="3" />
                        </Grid>
                        <Grid Grid.Row="1" Height="45" x:Name="AcceptDismissHostGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Height="2"
                                VerticalAlignment="Top"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                Grid.ColumnSpan="2" />
                            <Button x:Name="AcceptButton"
                                Grid.Column="0"
                                Content="&#xE8FB;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="16"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                Margin="0,2,0,0" />
                            <Button x:Name="DismissButton"
                                Grid.Column="1"
                                Content="&#xE711;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="16"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                Margin="0,2,0,0" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我们可以更改Grid.ColumnDefinitions以减小宽度。

但是请注意，尽管中有Width和MinWidth属性DatePickerFlyoutPresenter，但是更改它们无效。DatePickerFlyoutPresenter的宽度由DatePicker确定。它们具有相同的宽度。如果我们更改了DatePicker的宽度，弹出按钮将自动调整其宽度。

此外，在中DatePickerFlyoutPresenter，我们无法更改ColumnDefinition的宽度来Auto像您在DatePicker样式中所做的那样。因为在中DatePickerFlyoutPresenter，“ DayColumn”，“ MonthColumn”和“ YearColumn”填充了LoopingSelector，后者在内部使用了诸如Canvas之类的面板。如果我们将列的宽度设置为Auto，则LoopingSelector宽度将为零，用户将看不到任何东西。

因此，可能没有太多可以自定义的内容，我们最DatePicker好像下面这样设置固定宽度，以确保用户可以在选择器或选择器的弹出窗口中看到完整的元素。

<DatePicker Width="200" MinWidth="0" />

TimePicker与DatePicker相同。如果您想要更大的灵活性，建议您使用新的自定义控件。这是有关WinRT Xaml的DatePicker日历自定义控件的博客。您可以参考博客和Codeplex上的源代码来实现自己的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-1

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

UWP-DatePicker和TimePicker自定义

UWP-DatePicker和TimePicker自定义

月份的UWP DatePicker自定义字符串

如何为UWP的DatePicker创建自定义渲染器？

在UWP中自定义In App键盘

UWP：自定义UserControl布尔？财产

UWP拖放自定义类型/类

UWP / XAML形状的自定义边框

UWP MediaPlayerElement：实现自定义流

自定义单选按钮UWP

UWP NumberBox自定义值模板

在MapControl UWP中自定义MapIcon

通过 ViewModel 自定义 UWP ListViewItem

UWP 自定义矩形形状

uwp StorageFile 添加自定义属性

UWP Setter 自定义 DependencyProperty

如何使DataGrid列水平对齐拉伸和自定义列名-UWP DataGrid

Mac和UWP中的LibVLCSharp VideoView的自定义渲染器（Xamarin.Forms）

UWP C# Windows 10 IoT datepicker & timepicker 更新系统日期和时间

在UWP中设置自定义WebView标头

根据自定义属性UWP禁用某些ListViewItem

通知自定义声音未播放UWP

自定义Windows 10 UWP后退按钮

具有溢出布局的UWP自定义控件

自定义Windows 10 UWP后退按钮

UWP-如何实现完全自定义的TextBox

在 UWP 应用的应用设置中显示自定义信息

UWP XAML 文本框自定义

UWP和标头

具有可自定义内容的Windows 10 UWP UserControl

如何在UWP应用中的ListView之间拖放自定义对象？