在通用Windows平台中调整TimePicker的大小

时间:2016-04-21 01:10:35

标签: win-universal-app uwp-xaml

当MaxWidth或Width等属性发生变化时,UWP中的TimePicker控件不会重新调整大小,我应该设置另一个属性,还是只需找到解决方法?

4 个答案:

答案 0 :(得分:3)

经过一些调查后,您似乎只能使用“填充”属性更改TimePicker的大小。

答案 1 :(得分:3)

您需要更改TimePicker的默认样式。例如,请在Page.Ressources中添加以下样式。我更改的唯一值是MaxWidth到800 - 默认值是456 。然后,您应该能够使用Width属性最大化您的控制。

<Page.Resources>
    <!-- Default style for Windows.UI.Xaml.Controls.TimePicker -->
    <Style TargetType="TimePicker">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="MinWidth" Value="242" />
        <Setter Property="MaxWidth" Value="800" />
        <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="TimePicker">
                    <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
                        <StackPanel.Resources>
                            <Style x:Key="TimePickerFlyoutButtonStyle" 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 SystemControlDisabledBaseLowBrush}" />
                                                                </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="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                                              Background="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"
                                                              BorderThickness="2"
                                                              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 SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstColumnDivider"
                                                                   Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondColumnDivider"
                                                                   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" />
                        <Button x:Name="FlyoutButton"
                            Style="{StaticResource TimePickerFlyoutButtonStyle}"
                            Foreground="{TemplateBinding Foreground}"
                            Background="{TemplateBinding Background}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch">
                            <Grid x:Name="FlyoutButtonContentGrid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" x:Name="FirstTextBlockColumn" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" x:Name="SecondTextBlockColumn" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" x:Name="ThirdTextBlockColumn" />
                                </Grid.ColumnDefinitions>

                                <Border x:Name="FirstPickerHost" Grid.Column="0">
                                    <TextBlock x:Name="HourTextBlock" TextAlignment="Center" Padding="0,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
                                </Border>

                                <Rectangle x:Name="FirstColumnDivider" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" />

                                <Border x:Name="SecondPickerHost" Grid.Column="2">
                                    <TextBlock x:Name="MinuteTextBlock" TextAlignment="Center" Padding="0,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
                                </Border>

                                <Rectangle x:Name="SecondColumnDivider" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" />

                                <Border x:Name="ThirdPickerHost" Grid.Column="4">
                                    <TextBlock x:Name="PeriodTextBlock" TextAlignment="Center" Padding="0,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
                                </Border>
                            </Grid>
                        </Button>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

答案 2 :(得分:2)

我发现了一个非常简单的变通方法,用于调整Timepicker或DatePicker的大小。我只是在它周围放一个ViewBox,然后将想要的宽度和高度分配给Viewbox。 Viewbox会为您完成选择器控件的所有大小调整。简单。完成。

答案 3 :(得分:0)

根据项目的目标SDK,有不同的解决方法。

当项目目标为 Windows 10 1709 10.0.16299.0 时,设置TimePicker的MinWidth属性足以减小其宽度。

当项目目标为 Windows 10 1803 10.0.17763.0 时,替换App.xaml文件中的默认TimePickerThemeMinWidth值即可达到目的:

      <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
      <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
      <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
      <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>