Ändern der Größe des TimePicker in Universal Windows Platform

Question

Das TimePicker-Steuerelement in UWP wird nicht neu skaliert, wenn Eigenschaften wie MaxWidth oder Width geändert werden, gibt es eine andere Eigenschaft, die ich festlegen sollte, oder muss ich nur einen Workaround finden?

Answer 1

Nach einigen Untersuchungen scheint es, dass Sie die Größe eines TimePickers nur mit der Eigenschaft "Padding" ändern können.

Answer 2

Sie müssen den Standardstil von TimePicker ändern. Fügen Sie beispielsweise den folgenden Stil in Ihrer Page.Ressources hinzu. Der einzige Wert, den ich änderte, ist MaxWidth zu 800 - der Standard ist 456. Sie sollten dann in der Lage sein, Ihre Kontrolle mit der Width-Eigenschaft zu maximieren.

<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>