--- title: "DatePicker Styles and Templates" ms.date: "03/30/2017" helpviewer_keywords: - "ControlTemplate [WPF], DatePicker" - "DatePicker [WPF], styles and templates" - "templates [WPF], DatePicker" - "parts [WPF], DatePicker" - "styles [WPF], DatePicker" - "states [WPF], DatePicker" ms.assetid: c430a657-692f-44bd-a549-2341f92d6115 --- # DatePicker Styles and Templates This topic describes the styles and templates for the control. You can modify the default to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template). ## DatePicker Parts The following table lists the named parts for the control. |Part|Type|Description| |-|-|-| |PART_Root||The root of the control.| |PART_Button||The button that opens and closes the .| |PART_TextBox||The text box that allows you to input a date.| |PART_Popup||The popup for the control.| ## DatePicker States The following table lists the visual states for the control. |VisualState Name|VisualStateGroup Name|Description| |-|-|-| |Normal|CommonStates|The default state.| |Disabled|CommonStates|The is disabled.| |Valid|ValidationStates|The control uses the class and the attached property is `false`.| |InvalidFocused|ValidationStates|The attached property is `true` has the control has focus.| |InvalidUnfocused|ValidationStates|The attached property is `true` has the control does not have focus.| ## DatePickerTextBox Parts The following table lists the named parts for the control. |Part|Type|Description| |-|-|-| |PART_Watermark||The element that contains the initial text in the .| |PART_ContentElement||A visual element that can contain a . The text of the is displayed in this element.| ## DatePickerTextBox States The following table lists the visual states for the control. |VisualState Name|VisualStateGroup Name|Description| |-|-|-| |Normal|CommonStates|The default state.| |Disabled|CommonStates|The is disabled.| |MouseOver|CommonStates|The mouse pointer is positioned over the .| |ReadOnly|CommonStates|The user cannot change the text in the .| |Focused|FocusStates|The control has focus.| |Unfocused|FocusStates|The control does not have focus.| |Watermarked|WatermarkStates|The control displays its initial text. The is in the state when the user has not entered text or selected a date.| |Unwatermarked|WatermarkStates|The user has entered text into the or selected a date in the .| |Valid|ValidationStates|The control uses the class and the attached property is `false`.| |InvalidFocused|ValidationStates|The attached property is `true` and the control has focus.| |InvalidUnfocused|ValidationStates|The attached property is `true` and the control does not have focus.| ## DatePicker ControlTemplate Example The following example shows how to define a for the control. [!code-xaml[ControlTemplateExamples#DatePicker](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/datepicker.xaml#datepicker)] The preceding example uses one or more of the following resources. [!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)] For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating). ## See also - - - [Control Styles and Templates](control-styles-and-templates.md) - [Control Customization](control-customization.md) - [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview) - [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)