UWP - DatePicker und TimePicker Anpassung

Question

Ich möchte DatePicker und TimePicker auf der gleichen Linie (horizontal) verwenden. Mein Problem ist, dass diese Kontrollen zu weit sind. Also habe ich sie angepasst, um den Inhalt zu reduzieren, aber ich kann die Breite nicht reduzieren, weil das Flyout zu breit ist. Also suche ich nach einer Möglichkeit, das Flyout anzupassen oder eine andere Größe für die Steuerung und das Flyout zu haben.

Hier ist meine Datepicker-Stil:

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

Answer 1

das Flyout anzupassen, können wir die Stile und Vorlagen von DatePickerFlyoutPresenter und TimePickerFlyoutPresenter bearbeiten. Und wir finden diese Stile in generic.xaml, die im Ordner \ (Programme) \ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ 10.0.14393.0 \ Generic aus einer Windows SDK-Installation verfügbar ist. Bei einer anderen SDK-Version ist der Pfad anders, und die Stile und Ressourcen können unterschiedliche Werte haben. Mit dem Standardstil für DatePickerFlyoutPresenter in 14393 zum Beispiel:

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

Wir können die Grid.ColumnDefinitions ändern, um die Breite zu verringern.

Aber bitte beachten Sie, dass, obwohl es Width und MinWidth Eigenschaften in DatePickerFlyoutPresenter gibt, aber ändern sie hat keine Auswirkungen. DatePickerFlyoutPresenter Die Breite wird durch DatePicker bestimmt. Sie haben die gleiche Breite. Wenn wir die Breite des DatePickers ändern, passt das Flyout automatisch seine Breite an.

Außerdem in DatePickerFlyoutPresenter, können wir nicht ColumnDefinition 's Breite Auto wie das, was du hast in DatePicker getan' s Stil ändern. Denn in DatePickerFlyoutPresenter, "DayColumn", "MonthColumn" und "YearColumn" sind mit LoopingSelector, die ein Panel wie Canvas innerhalb verwendet. Wenn wir die Spaltenbreite auf Auto setzen, wird LoopingSelector die Breite Null sein und Benutzer können nichts sehen.

So können wir nicht so viele Dinge anpassen, und wir sollten eine feste Breite für DatePicker wie folgt festlegen, um sicherzustellen, dass Benutzer vollständige Elemente im Picker oder im Flyout des Pickers sehen können.

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

TimePicker ist das gleiche wie DatePicker. Wenn Sie mehr Flexibilität wünschen, sollten Sie ein neues benutzerdefiniertes Steuerelement verwenden. Hier ist ein Blog über DatePicker calendar custom control for WinRT Xaml. Sie können auf den Blog und the source code on Codeplex verweisen, um Ihre eigenen zu implementieren.