Comment faire pour que le contrôle WPF DatePicker ressemble à son cousin WinForms?

Question

J'ai téléchargé et installé le WPF Toolkit (qui fournit des contrôles qui n'ont pas pu être envoyés à temps avec VS2008).

Cependant, le contrôle DatePicker ne ressemble pas à son cousin WinForms. Tout d'abord, le bouton déroulant n'est pas une liste déroulante, mais une petite image du calendrier. Deuxièmement, le calendrier s'ouvre à droite sur le contrôle plutôt que sous celui-ci. Comment puis-je faire en sorte que le contrôle ressemble à un sélecteur de date normal? Ou devrais-je utiliser autre chose?

Answer 1

Vous pouvez télécharger le code source à partir de CodePlex et récupérer le ControlTemplate actuel à partir de generic.xaml. Vous pouvez ensuite copier ceci dans les ressources de votre application et modifier le modèle de contrôle à partir de là.

Rien de différent que de redéfinir les ControlTemplates des contrôles livrés avec .NET 3.5, ils sont tous binaires. Je viens juste de le faire aujourd'hui et désolé d'inclure un blob géant de XAML mais voici ce que j'ai fait pour redessiner le bouton "15" dans un look de calendrier plus "grille". Vous devrez soit mettre cela dans votre App.Xaml ou l'inclure en tant que dictionnaire fusionné.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit" 
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit" 
xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"> 


<Style TargetType="{x:Type local:DatePicker}"> 
    <Setter Property="Foreground" Value="#FF333333" /> 
    <Setter Property="IsTodayHighlighted" Value="True" /> 
    <Setter Property="SelectedDateFormat" Value="Short" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Padding" Value="2"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1"> 
       <GradientStop Color="#FFA3AEB9" Offset="0"/> 
       <GradientStop Color="#FF8399A9" Offset="0.375"/> 
       <GradientStop Color="#FF718597" Offset="0.375"/> 
       <GradientStop Color="#FF617584" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:DatePicker}"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Background="{TemplateBinding Background}" 
         Padding="{TemplateBinding Padding}"> 

        <vsm:VisualStateManager.VisualStateGroups> 
         <vsm:VisualStateGroup x:Name="CommonStates"> 
          <vsm:VisualState x:Name="Normal" /> 
          <vsm:VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> 
           </Storyboard> 
          </vsm:VisualState> 
         </vsm:VisualStateGroup> 
        </vsm:VisualStateManager.VisualStateGroups> 
        <Border.Child> 
         <Grid x:Name="PART_Root" 
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
          <Grid.Resources> 
           <!-- Main DatePicker Brushes --> 
           <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" /> 

           <!-- Button Template --> 
           <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button"> 
            <Grid> 
             <vsm:VisualStateManager.VisualStateGroups> 
              <vsm:VisualStateGroup x:Name="CommonStates"> 
               <vsm:VisualStateGroup.Transitions> 
                <vsm:VisualTransition GeneratedDuration="0" /> 
                <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" /> 
                <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" /> 
               </vsm:VisualStateGroup.Transitions> 
               <vsm:VisualState x:Name="Normal" /> 
               <vsm:VisualState x:Name="MouseOver"> 
                <Storyboard> 
                 <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF448DCA"/> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                </Storyboard> 
               </vsm:VisualState> 
               <vsm:VisualState x:Name="Pressed"> 
                <Storyboard> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)"> 
                  <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                 </DoubleAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> 
                  <SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/> 
                 </ColorAnimationUsingKeyFrames> 
                </Storyboard> 
               </vsm:VisualState> 
               <vsm:VisualState x:Name="Disabled" /> 
              </vsm:VisualStateGroup> 
             </vsm:VisualStateManager.VisualStateGroups> 

             <!--Start UI--> 
             <Grid Height="18" Width="19" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="#11FFFFFF" FlowDirection="LeftToRight"> 
              <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="20*"/> 
               <ColumnDefinition Width="20*"/> 
               <ColumnDefinition Width="20*"/> 
               <ColumnDefinition Width="20*"/> 
              </Grid.ColumnDefinitions> 
              <Grid.RowDefinitions> 
               <RowDefinition Height="23*"/> 
               <RowDefinition Height="19*"/> 
               <RowDefinition Height="19*"/> 
               <RowDefinition Height="19*"/> 
              </Grid.RowDefinitions> 
              <Border Margin="-1" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#FF45D6FA" Opacity="0" CornerRadius="0,0,1,1" x:Name="Highlight"/> 
              <Border x:Name="Background" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#FFFFFFFF" Opacity="1" CornerRadius=".5" Background="#FF1F3B53"/> 
              <Border x:Name="BackgroundGradient" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#BF000000" Opacity="1" CornerRadius=".5"> 
               <Border.Background> 
                <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> 
                 <GradientStop Color="#FFFFFFFF" Offset="0" /> 
                 <GradientStop Color="#F9FFFFFF" Offset="0.375" /> 
                 <GradientStop Color="#E5FFFFFF" Offset="0.625" /> 
                 <GradientStop Color="#C6FFFFFF" Offset="1" /> 
                </LinearGradientBrush> 
               </Border.Background> 
              </Border> 
              <Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1"> 
               <Rectangle.Stroke> 
                <LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25"> 
                 <GradientStop Color="#FF494949"/> 
                 <GradientStop Color="#FF9F9F9F" Offset="1"/> 
                </LinearGradientBrush> 
               </Rectangle.Stroke> 
               <Rectangle.Fill> 
                <LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6"> 
                 <GradientStop Color="#FF4084BD"/> 
                 <GradientStop Color="#FFAFCFEA" Offset="1"/> 
                </LinearGradientBrush> 
               </Rectangle.Fill> 
              </Rectangle> 
              <Canvas Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3"> 
               <Line StrokeThickness="1" X1="5" X2="5" Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" /> 
               <Line StrokeThickness="1" X1="10" X2="10" Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" /> 
               <Line StrokeThickness="1" X1="15" X2="15" Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" /> 
               <Line StrokeThickness="1" X1="0" X2="18" Y1="3" Y2="3" Stroke="Black" RenderTransformOrigin="0.5,0.5" /> 
               <Line StrokeThickness="1" X1="0" X2="18" Y1="8" Y2="8" Stroke="Black" RenderTransformOrigin="0.5,0.5" /> 
              </Canvas> 


              <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFFFFFFF" StrokeThickness="0" Grid.ColumnSpan="4" Width="3" Height="3"/> 
              <Border Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#B2FFFFFF" Opacity="0" CornerRadius="0,0,.5,.5" x:Name="DisabledVisual"/> 
             </Grid> 
             <!--End UI--> 
            </Grid> 
           </ControlTemplate> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <Button x:Name="PART_Button" Grid.Row="0" Grid.Column="1" 
            Template="{StaticResource DropDownButtonTemplate}" 
            Foreground="{TemplateBinding Foreground}" 
            Width="20" 
            Margin="3,0,3,0" 
            Focusable="False" 
            VerticalAlignment="Top" 
            HorizontalAlignment="Left" /> 
          <primitives:DatePickerTextBox x:Name="PART_TextBox" 
           Grid.Row="0" Grid.Column="0" 
           Foreground="{TemplateBinding Foreground}" 
           HorizontalContentAlignment="Stretch" 
           VerticalContentAlignment="Stretch" /> 
          <Grid x:Name="PART_DisabledVisual" 
            Opacity="0" 
            IsHitTestVisible="False" 
            Grid.Row="0" Grid.Column="0" 
            Grid.ColumnSpan="2"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <Rectangle Grid.Row="0" Grid.Column="0" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF"/> 
           <Rectangle Grid.Row="0" Grid.Column="1" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Height="18" Width="19" Margin="3,0,3,0" /> 
           <Popup x:Name="PART_Popup" 
             PlacementTarget="{Binding ElementName=PART_Button}" 
             Placement="Bottom" 
             StaysOpen="False" 
             AllowsTransparency="True" /> 
          </Grid> 
         </Grid> 
        </Border.Child> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

Vous pouvez également extraire le modèle de contrôle par défaut en utilisant Expression Blend, si vous l'avez. Il suffit de créer une instance de DatePicker dans un nouveau projet, puis de le sélectionner - dans le menu "Objet" il devrait y avoir des options pour éditer le style et le modèle pour le contrôle, y compris une option pour éditer une copie du modèle existant. Une fois que vous avez modifié le modèle, collez-le dans un dictionnaire de ressources et référencez-le à partir de votre xaml. Je l'ai fait car je voulais créer des modèles personnalisés pour les contrôles DatePicker, GridView et ListBox.