DatePicker-Stile und -VorlagenDatePicker Styles and Templates

In diesem Thema werden die Stile und Vorlagen für das DatePicker-Steuerelement beschrieben.This topic describes the styles and templates for the DatePicker control. Sie können die Standard ControlTemplate ändern, um dem Steuerelement eine eindeutige Darstellung zu verschaffen.You can modify the default ControlTemplate to give the control a unique appearance. Weitere Informationen finden Sie unter Anpassen der Darstellung eines vorhandenen Steuerelements durch Erstellen einer ControlTemplate.For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

DatePicker-TeileDatePicker Parts

In der folgenden Tabelle sind die benannten Teile für das DatePicker-Steuerelement aufgelistet.The following table lists the named parts for the DatePicker control.

SegmentPart Geben Sie Folgendes ein:Type BeschreibungDescription
PART_RootPART_Root Grid Der Stamm des Steuer Elements.The root of the control.
PART_ButtonPART_Button Button Die Schaltfläche, die die Calendaröffnet und schließt.The button that opens and closes the Calendar.
PART_TextBoxPART_TextBox DatePickerTextBox Das Textfeld, in dem Sie ein Datum eingeben können.The text box that allows you to input a date.
PART_PopupPART_Popup Popup Das Popup-Element für das DatePicker-Steuerelement.The popup for the DatePicker control.

DatePicker-ZuständeDatePicker States

In der folgenden Tabelle werden die visuellen Zustände für das DatePicker-Steuerelement aufgelistet.The following table lists the visual states for the DatePicker control.

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
NormalNormal CommonStatesCommonStates Der StandardzustandThe default state.
DeaktiviertDisabled CommonStatesCommonStates Der DatePicker ist deaktiviert.The DatePicker is disabled.
GültigValid ValidationStatesValidationStates Das-Steuerelement verwendet die Validation-Klasse, und die HasError angefügte-Eigenschaft ist false.The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true hat, dass das Steuerelement den Fokus besitzt.The HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true, wenn das Steuerelement keinen Fokus hat.The HasError attached property is true has the control does not have focus.

DatePickerTextBox-TeileDatePickerTextBox Parts

In der folgenden Tabelle sind die benannten Teile für das DatePickerTextBox-Steuerelement aufgelistet.The following table lists the named parts for the DatePickerTextBox control.

SegmentPart Geben Sie Folgendes ein:Type BeschreibungDescription
PART_WatermarkPART_Watermark ContentControl Das Element, das den Anfangstext in der DatePickerenthält.The element that contains the initial text in the DatePicker.
PART_ContentElementPART_ContentElement FrameworkElement Ein visuelles Element, das ein FrameworkElemententhalten kann.A visual element that can contain a FrameworkElement. Der Text des TextBox wird in diesem Element angezeigt.The text of the TextBox is displayed in this element.

DatePickerTextBox-ZuständeDatePickerTextBox States

In der folgenden Tabelle werden die visuellen Zustände für das DatePickerTextBox-Steuerelement aufgelistet.The following table lists the visual states for the DatePickerTextBox control.

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
NormalNormal CommonStatesCommonStates Der StandardzustandThe default state.
DeaktiviertDisabled CommonStatesCommonStates Der DatePickerTextBox ist deaktiviert.The DatePickerTextBox is disabled.
MouseOverMouseOver CommonStatesCommonStates Der Mauszeiger befindet sich über dem DatePickerTextBox.The mouse pointer is positioned over the DatePickerTextBox.
ReadOnlyReadOnly CommonStatesCommonStates Der Benutzer kann den Text im DatePickerTextBoxnicht ändern.The user cannot change the text in the DatePickerTextBox.
Mit FokusFocused FocusStatesFocusStates Der Fokus liegt auf dem Steuerelement.The control has focus.
Ohne FokusUnfocused FocusStatesFocusStates Der Fokus liegt nicht auf dem Steuerelement.The control does not have focus.
Genauer Beobachtung erfolgenWatermarked WatermarkstatesWatermarkStates Das-Steuerelement zeigt den ursprünglichen Text an.The control displays its initial text. Der DatePickerTextBox befindet sich im Zustand, wenn der Benutzer keinen Text eingegeben hat oder ein Datum ausgewählt hat.The DatePickerTextBox is in the state when the user has not entered text or selected a date.
WasserzeichenUnwatermarked WatermarkstatesWatermarkStates Der Benutzer hat Text in den DatePickerTextBox eingegeben oder ein Datum im DatePickerausgewählt.The user has entered text into the DatePickerTextBox or selected a date in the DatePicker.
GültigValid ValidationStatesValidationStates Das-Steuerelement verwendet die Validation-Klasse, und die HasError angefügte-Eigenschaft ist false.The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true, und das Steuerelement besitzt den Fokus.The HasError attached property is true and the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true, und das Steuerelement besitzt keinen Fokus.The HasError attached property is true and the control does not have focus.

DatePicker ControlTemplate-BeispielDatePicker ControlTemplate Example

Im folgenden Beispiel wird gezeigt, wie ein ControlTemplate für das DatePicker-Steuerelement definiert wird.The following example shows how to define a ControlTemplate for the DatePicker control.

<!--In this example, an implecit style for Calendar is defined elsewhere 
  in the application.  DatePickerCalendarStyle is based on the implicit 
  style so that the DatePicker will use the application's calendar style.-->
<Style x:Key="DatePickerCalendarStyle"
       TargetType="{x:Type Calendar}"
       BasedOn="{StaticResource {x:Type Calendar}}" />

<!--The template for the button that displays the calendar.-->
<Style x:Key="DropDownButtonStyle"
       TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0" />
                <VisualTransition GeneratedDuration="0:0:0.1"
                                  To="MouseOver" />
                <VisualTransition GeneratedDuration="0:0:0.1"
                                  To="Pressed" />
              </VisualStateGroup.Transitions>
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <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>
                  <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>
                  <ColorAnimation Duration="0"
                                  To="#FF448DCA"
                                  Storyboard.TargetProperty="(Border.Background).
                            (SolidColorBrush.Color)"
                                  Storyboard.TargetName="Background" />
                  <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>
                </Storyboard>
              </VisualState>
              <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.TargetProperty="(UIElement.Opacity)"
                                                 Storyboard.TargetName="Highlight">
                    <SplineDoubleKeyFrame KeyTime="0"
                                          Value="1" />
                  </DoubleAnimationUsingKeyFrames>
                  <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>
                  <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>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid Background="#11FFFFFF"
                FlowDirection="LeftToRight"
                HorizontalAlignment="Center"
                Height="18"
                Margin="0"
                VerticalAlignment="Center"
                Width="19">
            <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 x:Name="Highlight"
                    BorderThickness="1"
                    Grid.ColumnSpan="4"
                    CornerRadius="0,0,1,1"
                    Margin="-1"
                    Opacity="1"
                    Grid.Row="0"
                    Grid.RowSpan="4">
              <Border.BorderBrush>
                <SolidColorBrush Color="{DynamicResource ControlPressedColor}" />
              </Border.BorderBrush>
            </Border>
            <Border x:Name="Background"
                    BorderBrush="#FFFFFFFF"
                    BorderThickness="1"
                    Grid.ColumnSpan="4"
                    CornerRadius=".5"
                    Margin="0,-1,0,0"
                    Opacity="1"
                    Grid.Row="1"
                    Grid.RowSpan="3">
              <Border.Background>
                <SolidColorBrush Color="{DynamicResource ControlDarkColor}" />
              </Border.Background>
            </Border>
            <Border x:Name="BackgroundGradient"
                    BorderBrush="#BF000000"
                    BorderThickness="1"
                    Grid.ColumnSpan="4"
                    CornerRadius=".5"
                    Margin="0,-1,0,0"
                    Opacity="1"
                    Grid.Row="1"
                    Grid.RowSpan="3">
              <Border.Background>
                <LinearGradientBrush EndPoint=".7,1"
                                     StartPoint=".7,0">
                  <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.Fill>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                  <GradientStop Color="{DynamicResource HeaderTopColor}" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Fill>
              <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.48,-1"
                                     StartPoint="0.48,1.25">
                  <GradientStop Color="#FF494949" />
                  <GradientStop Color="#FF9F9F9F"
                                Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Stroke>
            </Rectangle>
            <Path Fill="#FF2F2F2F"
                  Grid.Row="1"
                  Grid.Column="0"
                  Grid.RowSpan="3"
                  Grid.ColumnSpan="4"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  RenderTransformOrigin="0.5,0.5"
                  Margin="4,3,4,3"
                  Stretch="Fill"
                  Data="M11.426758,8.4305077 L11.749023,8.4305077 
                    L11.749023,16.331387 L10.674805,16.331387 
                    L10.674805,10.299648 L9.0742188,11.298672
                    L9.0742188,10.294277 C9.4788408,10.090176 
                    9.9094238,9.8090878 10.365967,9.4510155 
                    C10.82251,9.0929432 11.176106,8.7527733 
                    11.426758,8.4305077 z M14.65086,8.4305077 
                    L18.566387,8.4305077 L18.566387,9.3435936 
                    L15.671368,9.3435936 L15.671368,11.255703 
                    C15.936341,11.058764 16.27293,10.960293 
                    16.681133,10.960293 C17.411602,10.960293 
                    17.969301,11.178717 18.354229,11.615566 
                    C18.739157,12.052416 18.931622,12.673672
                    18.931622,13.479336 C18.931622,15.452317 
                    18.052553,16.438808 16.294415,16.438808
                    C15.560365,16.438808 14.951641,16.234707 
                    14.468243,15.826504 L14.881817,14.929531
                    C15.368796,15.326992 15.837872,15.525723 
                    16.289043,15.525723 C17.298809,15.525723 
                    17.803692,14.895514 17.803692,13.635098 
                    C17.803692,12.460618 17.305971,11.873379 
                    16.310528,11.873379 C15.83071,11.873379 
                    15.399232,12.079271 15.016094,12.491055
                    L14.65086,12.238613 z" />
            <Ellipse Grid.ColumnSpan="4"
                     Fill="#FFFFFFFF"
                     HorizontalAlignment="Center"
                     Height="3"
                     StrokeThickness="0"
                     VerticalAlignment="Center"
                     Width="3" />
            <Border x:Name="DisabledVisual"
                    BorderBrush="#B2FFFFFF"
                    BorderThickness="1"
                    Grid.ColumnSpan="4"
                    CornerRadius="0,0,.5,.5"
                    Opacity="0"
                    Grid.Row="0"
                    Grid.RowSpan="4" />
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="{x:Type DatePicker}">
  <Setter Property="Foreground"
          Value="#FF333333" />
  <Setter Property="IsTodayHighlighted"
          Value="True" />
  <Setter Property="SelectedDateFormat"
          Value="Short" />
  <Setter Property="Padding"
          Value="2" />
  <Setter Property="BorderThickness"
          Value="1" />
  <Setter Property="HorizontalContentAlignment"
          Value="Stretch" />
  <!--Set CalendarStyle to DatePickerCalendarStyle.-->
  <Setter Property="CalendarStyle"
          Value="{DynamicResource DatePickerCalendarStyle}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type DatePicker}">
        <Border BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}">
          <Border.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
              <GradientStop Color="{DynamicResource BorderLightColor}"
                            Offset="0" />
              <GradientStop Color="{DynamicResource BorderDarkColor}"
                            Offset="1" />
            </LinearGradientBrush>
          </Border.BorderBrush>
          <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
              <GradientStop Color="{DynamicResource HeaderTopColor}"
                            Offset="0" />
              <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1" />
            </LinearGradientBrush>
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <DoubleAnimation Duration="0"
                                   To="1"
                                   Storyboard.TargetProperty="Opacity"
                                   Storyboard.TargetName="PART_DisabledVisual" />
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid x:Name="PART_Root"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="PART_Button"
                    Grid.Column="1"
                    Foreground="{TemplateBinding Foreground}"
                    Focusable="False"
                    HorizontalAlignment="Left"
                    Margin="3,0,3,0"
                    Grid.Row="0"
                    Style="{StaticResource DropDownButtonStyle}"
                    VerticalAlignment="Top" />
            <DatePickerTextBox x:Name="PART_TextBox"
                               Grid.Column="0"
                               Foreground="{TemplateBinding Foreground}"
                               Focusable="{TemplateBinding Focusable}"
                               HorizontalContentAlignment="Stretch"
                               Grid.Row="0"
                               VerticalContentAlignment="Stretch" />
            <Grid x:Name="PART_DisabledVisual"
                  Grid.ColumnSpan="2"
                  Grid.Column="0"
                  IsHitTestVisible="False"
                  Opacity="0"
                  Grid.Row="0">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
              </Grid.ColumnDefinitions>
              <Rectangle Grid.Column="0"
                         Fill="#A5FFFFFF"
                         RadiusY="1"
                         Grid.Row="0"
                         RadiusX="1" />
              <Rectangle Grid.Column="1"
                         Fill="#A5FFFFFF"
                         Height="18"
                         Margin="3,0,3,0"
                         RadiusY="1"
                         Grid.Row="0"
                         RadiusX="1"
                         Width="19" />
              <Popup x:Name="PART_Popup"
                     AllowsTransparency="True"
                     Placement="Bottom"
                     PlacementTarget="{Binding ElementName=PART_TextBox}"
                     StaysOpen="False" />
            </Grid>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Im vorhergehenden Beispiel wird mindestens eine der folgenden Ressourcen verwendet.The preceding example uses one or more of the following resources.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Das vollständige Beispiel finden Sie unter Beispiel zum Formatieren mit ControlTemplates.For the complete sample, see Styling with ControlTemplates Sample.

Siehe auchSee also