UWP - DatePicker和TimePicker定製

我想在同一行（水平）上使用DatePicker和TimePicker。我的問題是這些控件太寬。所以我定製了它們以減少內容，但由於彈出窗口太寬，我無法縮小寬度。所以我搜索了一種方法來定製彈出窗口或爲控件和彈出窗口設置不同的大小。UWP - 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>

來源

2016-09-20 Samuel LIOULT

要自定義彈出，我們可以編輯的DatePickerFlyoutPresenter和TimePickerFlyoutPresenter的風格和模板。我們可以在Windows SDK安裝中的generic.xaml文件夾中找到這些樣式，該文件位於\（Program Files）\ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ 10.0.14393.0 \ Generic文件夾中。對於不同的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減少寬度。

但請注意，雖然和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相同。如果你想要更多的靈活性，我會建議使用新的自定義控件。這是一個關於DatePicker calendar custom control for WinRT Xaml的博客。你可以參考博客和the source code on Codeplex來實現你自己的。

來源

2016-09-22 00:59:09

UWP - DatePicker和TimePicker定製

回答

相關問題