Cómo utilizar DateTimePicker en WPF?

41

Nota: La siguiente respuesta solo se aplicó a WPF bajo el Framework 3.5 ya que NET 4.0 runtime tiene su propio datetime control.

Por defecto, WPF 3.5 no viene con un selector de fecha y hora como las formas de inversión.

Sin embargo, se ha agregado un selector de fecha en el WPF tool kit producido por Microsoft que puede ser downloaded here. Supongo que se convertirá en parte del marco en una versión futura.

Es simple agregar una referencia al WPFToolkit.dll, verlo en la caja de herramientas y distribuirlo con su aplicación siguiendo las instrucciones en el sitio web.

Antes de que esto estuviera disponible, otras personas habían creado selectores de terceros (que usted preferiría) o alternativamente usaban la solución menos ideal de usar el control de formas de ganar en una aplicación WPF.

Actualización: Esta pregunta por lo que es muy similar this one que también tiene un enlace a una walk through for the datepicker junto con otros enlaces.

Fuente

2009-02-18 12:19:54 John

+0

Solo una pequeña precaución de que el kit de herramientas aún no está listo para la producción: http://www.codeplex.com/wpf/Wiki/View.aspx?title=VSM%20Memory%20Leak – Adrian

+0

Golpe que - era arreglado en el relanzamiento de enero. – Adrian

+22

Usted se refiere al selector de fecha no al selector de fecha y hora. No creo que esto en el WPF Toolkit infrinja. – HAdes

3

No hay fuera de la caja DateTime picker para WPF ..

Sin embargo, hay una gran cantidad de terceros DateTime recolectores, por supuesto :)

http://www.devcomponents.com/dotnetbar-wpf/WPFDateTimePicker.aspx

http://marlongrech.wordpress.com/2007/09/11/wpf-datepicker/

http://www.codeplex.com/AvalonControlsLib

¡Simplemente haga un rápido google para encontrar más!

Fuente

2009-02-18 12:20:07 Arcturus

6

Esto acaba de llegar;)

Hay una nueva clase DatePicker para WPF en .NET 4.0 de tiempo de ejecución: http://msdn.microsoft.com/en-us/library/system.windows.controls.datepicker.aspx

Véase también el "¿Cuál es nuevo en WPF" para las características más agradables: http://msdn.microsoft.com/en-us/library/bb613588.aspx

Fuente

2010-04-20 07:26:39 Arcturus

+2

El control DatePicker de WPF no es compatible con el componente de tiempo, pero el DateTimePicker de WPF Toolkit Extended sí lo admite (lo he estado usando) – surfen

0

Hay DatePicker en WPF Tool Kit, pero no he visto DateTime Picker en WPF ToolKit. Así que no sé de qué tipo de control DateTimePicker está hablando John.

Fuente

2010-08-09 18:27:53 Ivan

1

Hay un DateTimePicker disponible en el Extended Toolkit.

Fuente

2011-06-28 17:45:50 joerage

2

Para los controles integrados en WPF Extended WPF Toolkit Release 1.4.0, por favor refiérase http://elegantcode.com/2011/04/08/extended-wpf-toolkit-release-1-4-0/

para el calendario & DatePicker Tutorial consulte, http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-calendar-datepicker-walkthrough.aspx

Y puede cutomize la apariencia de Microsoft Expression Studio [Use Edit Template option] Muestra muestra aquí:

Agregar siguientes espacios de nombres a xaml página

xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit.Extended" 
xmlns:Microsoft_Windows_Controls_Core_Converters="clr-namespace:Microsoft.Windows.Controls.Core.Converters;assembly=WPFToolkit.Extended" 
xmlns:Microsoft_Windows_Controls_Chromes="clr-namespace:Microsoft.Windows.Controls.Chromes;assembly=WPFToolkit.Extended"

Agregar seguimiento Página de recursos/Ventana

<!--DateTimePicker Customized Style--> 
     <Style x:Key="DateTimePickerStyle1" TargetType="{x:Type toolkit:DateTimePicker}"> 
      <Setter Property="TimeWatermarkTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <ContentControl Content="{Binding}" Foreground="Gray" Focusable="False"/> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="WatermarkTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <ContentControl Content="{Binding}" Foreground="Gray" Focusable="False"/> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type toolkit:DateTimePicker}"> 
         <Border> 
          <Grid> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="*"/> 
             <ColumnDefinition Width="Auto"/> 
            </Grid.ColumnDefinitions> 

            <toolkit:DateTimeUpDown AllowSpin="{TemplateBinding AllowSpin}" 
                    BorderThickness="1,1,0,1" 
                    FormatString="{TemplateBinding FormatString}" 
                    Format="{TemplateBinding Format}" 
                    ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}" 
                    Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" 
                    WatermarkTemplate="{TemplateBinding WatermarkTemplate}" 
                    Watermark="{TemplateBinding Watermark}" 
                    Foreground="#FFEFE3E3" 
                    BorderBrush="#FFEBB31A"> 
             <toolkit:DateTimeUpDown.Background> 
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
               <GradientStop Color="Black" Offset="0"/> 
               <GradientStop Color="#FF2F2828" Offset="1"/> 
              </LinearGradientBrush> 
             </toolkit:DateTimeUpDown.Background> 
            </toolkit:DateTimeUpDown> 

            <ToggleButton x:Name="_calendarToggleButton" 
                Background="{x:Null}" Grid.Column="1" IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"> 
             <ToggleButton.IsHitTestVisible> 
              <Binding Path="IsOpen" RelativeSource="{RelativeSource TemplatedParent}"> 
               <Binding.Converter> 
                <Microsoft_Windows_Controls_Core_Converters:InverseBoolConverter/> 
               </Binding.Converter> 
              </Binding> 
             </ToggleButton.IsHitTestVisible> 
             <ToggleButton.Style> 
              <Style TargetType="{x:Type ToggleButton}"> 
               <Setter Property="Template"> 
                <Setter.Value> 
                 <ControlTemplate TargetType="{x:Type ToggleButton}"> 
                  <Grid SnapsToDevicePixels="True"> 
                   <Microsoft_Windows_Controls_Chromes:ButtonChrome x:Name="ToggleButtonChrome" CornerRadius="0,2.75,2.75,0" InnerCornerRadius="0,1.75,1.75,0" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" BorderBrush="{x:Null}"> 
                    <Microsoft_Windows_Controls_Chromes:ButtonChrome.Background> 
                     <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
                      <GradientStop Color="#FFF3F3F3" Offset="1"/> 
                      <GradientStop Color="#7FC0A112"/> 
                     </LinearGradientBrush> 
                    </Microsoft_Windows_Controls_Chromes:ButtonChrome.Background> 
                   </Microsoft_Windows_Controls_Chromes:ButtonChrome> 
                   <Grid> 
                    <Grid.ColumnDefinitions> 
                     <ColumnDefinition Width="*"/> 
                     <ColumnDefinition Width="Auto"/> 
                    </Grid.ColumnDefinitions> 
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/> 
                    <Grid x:Name="arrowGlyph" Grid.Column="1" IsHitTestVisible="False" Margin="5"> 
                     <Path Data="M0,1C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1z" Fill="#FF82E511" Height="4" Width="7"/> 
                    </Grid> 
                   </Grid> 
                  </Grid> 
                 </ControlTemplate> 
                </Setter.Value> 
               </Setter> 
              </Style> 
             </ToggleButton.Style> 
            </ToggleButton> 
           </Grid> 

           <Popup IsOpen="{Binding IsChecked, ElementName=_calendarToggleButton}" StaysOpen="False"> 
            <Border BorderThickness="1" Padding="3"> 
             <Border.BorderBrush> 
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
               <GradientStop Color="#FFA3AEB9" Offset="0"/> 
               <GradientStop Color="#FF8399A9" Offset="0.375"/> 
               <GradientStop Color="#FF718597" Offset="0.375"/> 
               <GradientStop Color="#FFD2C217" Offset="1"/> 
              </LinearGradientBrush> 
             </Border.BorderBrush> 
             <Border.Background> 
              <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
               <GradientStop Color="White" Offset="0"/> 
               <GradientStop Color="#FFE9B116" Offset="1"/> 
              </LinearGradientBrush> 
             </Border.Background> 
             <StackPanel Background="{x:Null}"> 
              <Calendar x:Name="Part_Calendar" BorderThickness="0" DisplayDate="2011-06-28" Background="#7FE0B41A"/> 
              <toolkit:TimePicker x:Name="Part_TimeUpDown" Format="ShortTime" Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" WatermarkTemplate="{TemplateBinding TimeWatermarkTemplate}" Watermark="{TemplateBinding TimeWatermark}" Background="{x:Null}" Style="{DynamicResource TimePickerStyle1}"/> 
             </StackPanel> 
            </Border> 
           </Popup> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Style x:Key="TimePickerStyle1" 
       TargetType="{x:Type toolkit:TimePicker}"> 
      <Setter Property="WatermarkTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <ContentControl Content="{Binding}" Foreground="Gray" Focusable="False"/> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type toolkit:TimePicker}"> 
         <Border> 
          <Grid> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="*"/> 
             <ColumnDefinition Width="Auto"/> 
            </Grid.ColumnDefinitions> 
            <Grid> 
             <toolkit:DateTimeUpDown x:Name="PART_TimeUpDown" AllowSpin="{TemplateBinding AllowSpin}" BorderThickness="1,1,0,1" FormatString="{TemplateBinding FormatString}" ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}" Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" WatermarkTemplate="{TemplateBinding WatermarkTemplate}" Watermark="{TemplateBinding Watermark}" Background="#7FE0B41A" BorderBrush="#FFF9F2F2"> 
              <toolkit:DateTimeUpDown.Format> 
               <TemplateBinding Property="Format"> 
                <TemplateBinding.Converter> 
                 <Microsoft_Windows_Controls_Core_Converters:TimeFormatToDateTimeFormatConverter/> 
                </TemplateBinding.Converter> 
               </TemplateBinding> 
              </toolkit:DateTimeUpDown.Format> 
             </toolkit:DateTimeUpDown> 
            </Grid> 
            <ToggleButton x:Name="_timePickerToggleButton" Grid.Column="1" IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}" > 
             <ToggleButton.IsHitTestVisible> 
              <Binding Path="IsOpen" RelativeSource="{RelativeSource TemplatedParent}"> 
               <Binding.Converter> 
                <Microsoft_Windows_Controls_Core_Converters:InverseBoolConverter/> 
               </Binding.Converter> 
              </Binding> 
             </ToggleButton.IsHitTestVisible> 
             <ToggleButton.Style> 
              <Style TargetType="{x:Type ToggleButton}"> 
               <Setter Property="Template"> 
                <Setter.Value> 
                 <ControlTemplate TargetType="{x:Type ToggleButton}"> 
                  <Grid SnapsToDevicePixels="True"> 
                   <Microsoft_Windows_Controls_Chromes:ButtonChrome x:Name="ToggleButtonChrome" CornerRadius="0,2.75,2.75,0" InnerCornerRadius="0,1.75,1.75,0" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/> 
                   <Grid> 
                    <Grid.ColumnDefinitions> 
                     <ColumnDefinition Width="*"/> 
                     <ColumnDefinition Width="Auto"/> 
                    </Grid.ColumnDefinitions> 
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/> 
                    <Grid x:Name="arrowGlyph" Grid.Column="1" IsHitTestVisible="False" Margin="5"> 
                     <Path Data="M0,1C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1z" Fill="Black" Height="4" Width="7"/> 
                    </Grid> 
                   </Grid> 
                  </Grid> 
                 </ControlTemplate> 
                </Setter.Value> 
               </Setter> 
              </Style> 
             </ToggleButton.Style> 
            </ToggleButton> 
           </Grid> 

           <Popup IsOpen="{Binding IsChecked, ElementName=_timePickerToggleButton}" StaysOpen="False"> 
            <Border BorderThickness="1"> 
             <Border.Background> 
              <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
               <GradientStop Color="White" Offset="0"/> 
               <GradientStop Color="#FFE7C857" Offset="1"/> 
              </LinearGradientBrush> 
             </Border.Background> 
             <Border.BorderBrush> 
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
               <GradientStop Color="#FFA3AEB9" Offset="0"/> 
               <GradientStop Color="#FF8399A9" Offset="0.375"/> 
               <GradientStop Color="#FF718597" Offset="0.375"/> 
               <GradientStop Color="#FF617584" Offset="1"/> 
              </LinearGradientBrush> 
             </Border.BorderBrush> 

             <Grid> 
              <ListBox x:Name="PART_TimeListItems" BorderThickness="0" DisplayMemberPath="Display" Height="130" Width="150" Background="#7FE0B41A"> 
               <ListBox.ItemContainerStyle> 
                <Style TargetType="{x:Type ListBoxItem}"> 
                 <Setter Property="Template"> 
                  <Setter.Value> 
                   <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
                    <Border x:Name="Border" SnapsToDevicePixels="True"> 
                     <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="4"/> 
                    </Border> 
                    <ControlTemplate.Triggers> 
                     <Trigger Property="IsMouseOver" Value="True"> 
                      <Setter Property="Background" TargetName="Border" Value="#FFE7F5FD"/> 
                     </Trigger> 
                     <Trigger Property="IsSelected" Value="True"> 
                      <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
                      <Setter Property="Foreground" Value="White"/> 
                     </Trigger> 
                    </ControlTemplate.Triggers> 
                   </ControlTemplate> 
                  </Setter.Value> 
                 </Setter> 
                </Style> 
               </ListBox.ItemContainerStyle> 
              </ListBox> 
             </Grid> 
            </Border> 
           </Popup> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

Y en la ventana que puede utilizar el estilo como

Gracias,

Fuente

2011-06-29 05:55:45 Sunil

1

No creo que este DateTimePicker se ha mencionado antes:

A WPF DateTimePicker That Works Like the One in Winforms

Ese está en VB y tiene algunos errores. Lo convertí en C# e hice un new version with bug fixes.

DateTimePicker

Nota: He utilizado el control de calendario en WPFToolkit por lo que podría utilizar .NET 3.5 en lugar de .NET 4. Si está utilizando .NET 4, simplemente eliminar las referencias a "wpftc" en el XAML .

Fuente

2011-08-16 22:48:07 Qwertie

Cómo utilizar DateTimePicker en WPF?

Respuesta

Cuestiones relacionadas