Share via

Beispiel für ein Slider-ControlTemplate

  • Artikel

Aktualisiert: November 2007

Steuerelemente in Windows Presentation Foundation (WPF) verfügen über ein ControlTemplate-Element, das die visuelle Struktur des Steuerelements enthält. Sie können die Struktur und die Darstellung eines Steuerelements ändern, indem Sie das ControlTemplate dieses Steuerelements ändern. Es gibt keine Möglichkeit, nur Teile der visuellen Struktur eines Steuerelements zu ersetzen. Um die visuelle Struktur eines Steuerelements zu ändern, muss die Template-Eigenschaft des Steuerelements auf dessen neues und vollständiges ControlTemplate festgelegt werden.

In diesem Thema wird das ControlTemplate des WPF-Slider-Steuerelements veranschaulicht.

Dieses Thema enthält folgende Abschnitte.

  • Vorbereitungsmaßnahmen
  • Beispiel für ein Slider-ControlTemplate
  • Verwandte Abschnitte

Vorbereitungsmaßnahmen

Um die Beispiele in diesem Thema ausführen zu können, sollten Sie wissen, wie WPF-Anwendungen geschrieben werden. Weitere Informationen finden Sie unter Erste Schritte mit Windows Presentation Foundation. Sie sollten ebenfalls mit der Verwendung von Stilen in WPF vertraut sein. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

Beispiel für ein Slider-ControlTemplate

Obwohl in diesem Beispiel alle Elemente enthalten sind, die im ControlTemplate von einem Slider standardmäßig definiert werden, sind die spezifischen Werte nur als Beispiele zu verstehen.

<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border Background="Transparent" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<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 
          Name="Ellipse" 
          Fill="{StaticResource NormalBrush}"
          Stroke="{StaticResource NormalBorderBrush}"
          StrokeThickness="1" />
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource DarkBrush}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource DisabledBackgroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TickBar 
      Name="TopTick"
      SnapsToDevicePixels="True" 
      Placement="Top"
      Fill="{StaticResource GlyphBrush}"
      Height="4"
      Visibility="Collapsed" />
    <Border 
      Name="TrackBackground"
      Margin="0"
      CornerRadius="2" 
      Height="4"
      Grid.Row="1"
      Background="{StaticResource LightBrush}" 
      BorderBrush="{StaticResource NormalBorderBrush}"
      BorderThickness="1" />
    <Track Grid.Row="1" Name="PART_Track">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.DecreaseLarge" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource SliderThumbStyle}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.IncreaseLarge" />
      </Track.IncreaseRepeatButton>
    </Track>
    <TickBar 
      Name="BottomTick"
      SnapsToDevicePixels="True" 
      Grid.Row="2"
      Fill="{TemplateBinding Foreground}"
      Placement="Bottom"
      Height="4"
      Visibility="Collapsed" />
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="TickPlacement" Value="TopLeft">
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
    </Trigger>
    <Trigger Property="TickPlacement" Value="BottomRight">
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
    </Trigger>
    <Trigger Property="TickPlacement" Value="Both">
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TickBar 
      Name="TopTick"
      SnapsToDevicePixels="True" 
      Placement="Left"
      Fill="{StaticResource GlyphBrush}"
      Width="4"
      Visibility="Collapsed" />
    <Border 
      Name="TrackBackground"
      Margin="0"
      CornerRadius="2" 
      Width="4"
      Grid.Column="1"
      Background="{StaticResource HorizontalLightBrush}" 
      BorderBrush="{StaticResource HorizontalNormalBorderBrush}"
      BorderThickness="1" />
    <Track Grid.Column="1" Name="PART_Track">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.DecreaseLarge" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource SliderThumbStyle}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.IncreaseLarge" />
      </Track.IncreaseRepeatButton>
    </Track>
    <TickBar 
      Name="BottomTick"
      SnapsToDevicePixels="True" 
      Grid.Column="2"
      Fill="{TemplateBinding Foreground}"
      Placement="Right"
      Width="4"
      Visibility="Collapsed" />
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="TickPlacement" Value="TopLeft">
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
    </Trigger>
    <Trigger Property="TickPlacement" Value="BottomRight">
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
    </Trigger>
    <Trigger Property="TickPlacement" Value="Both">
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type Slider}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Style.Triggers>
    <Trigger Property="Orientation" Value="Horizontal">
      <Setter Property="MinWidth" Value="104" />
      <Setter Property="MinHeight" Value="21" />
      <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
    </Trigger>
    <Trigger Property="Orientation" Value="Vertical">
      <Setter Property="MinWidth" Value="21" />
      <Setter Property="MinHeight" Value="104" />
      <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
    </Trigger>
  </Style.Triggers>
</Style>

Im vorherigen Beispiel werden eine oder mehrere der folgenden Ressourcen verwendet.

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />

Das vollständige Beispiel finden Sie unter Beispiel zum Formatieren mit ControlTemplates.

Siehe auch

Konzepte

Richtlinien zum Entwerfen formatierbarer Steuerelemente

Weitere Ressourcen

Beispiel für ControlTemplate