Thumb-Stile und -VorlagenThumb Styles and Templates

In diesem Thema werden die Stile und Vorlagen für das Thumb-Steuerelement beschrieben.This topic describes the styles and templates for the Thumb 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.

Thumb-TeileThumb Parts

Das Thumb-Steuerelement verfügt über keine benannten Teile.The Thumb control does not have any named parts.

Thumb-ZuständeThumb States

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

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
NormalNormal CommonStatesCommonStates Der StandardzustandThe default state.
MouseOverMouseOver CommonStatesCommonStates Der Mauszeiger befindet sich auf dem Steuerelement.The mouse pointer is positioned over the control.
GedrücktPressed CommonStatesCommonStates Das Steuerelement wird gedrückt.The control is pressed.
DeaktiviertDisabled CommonStatesCommonStates Das Steuerelement ist deaktiviert.The control is disabled.
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.
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.

Thumb ControlTemplate-BeispielThumb ControlTemplate Example

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

<Style x:Key="SliderThumbStyle"
       TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Height"
          Value="14" />
  <Setter Property="Width"
          Value="14" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Ellipse x:Name="Ellipse"
                 StrokeThickness="1">
          <Ellipse.Stroke>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Ellipse.Stroke>
          <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
              <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1" />
              <GradientStop Color="{DynamicResource ControlLightColor}" />
            </LinearGradientBrush>
          </Ellipse.Fill>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlMouseOverColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Ellipse>
      </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