时间戳

首页 > 解决方案 > TimePicker C# XAML UWP 宽度自定义

c# - TimePicker C# XAML UWP 宽度自定义

问题描述

我正在尝试自定义 TimePicker 控件宽度，但没有取得太大成功。它有 HH 和 MM，但问题是它们中的每一个使用的空间比保存像“22”这样的数字实际需要的空间多 2 或 3 倍。

例如在这张图片中

有谁知道如何定制它？我想我可能必须更改 MinWidth 或 Padding 。

谢谢！

更新

经过测试，我看到我需要在样式树的底部定义例如 Grid MinWidth=10 和 MaxWidth=150，如下所示。问题是在那之后，还有许多其他的定义。知道在不复制整个generic.xaml 的情况下进行更改是否有捷径？

        <Style TargetType="TimePicker">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Foreground" Value="{ThemeResource TimePickerButtonForeground}" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TimePicker">
                        <Grid x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
                            <Grid.Resources>
                                <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
                                    <Setter Property="UseSystemFocusVisuals" Value="False" />
                                    <Setter Property="ElementSoundMode" Value="FocusOnly" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Grid Background="{TemplateBinding Background}" MinWidth="10" MaxWidth="150">

标签： c#xamluwptimepicker

解决方案

您的想象是正确的，您可以TimePickerMinWidth像下面这样编辑属性值，默认值为242.

 <TimePicker MinWidth="100" x:Name="MyPicker" ClockIdentifier="24HourClock" />

更新

恐怕你不能编辑 12HourClock 样式，因为 TimePicker 会在后面的代码中编辑样式以隐藏 am pm 指示器。所以你想编辑小时列，你需要设置 ClockIdentifier 为12HourClock，并设置FirstTextBlockColumn最大值为你想要​​的值。

<ColumnDefinition Width="*" x:Name="FirstTextBlockColumn" MaxWidth="20"/>

推荐阅读