Upgrade your Internet Experience
Microsoft.com
Welcome Sign in
.NET Framework Developer Center
Click to Rate and Give Feedback
MSDN
MSDN Library
.NET Development
.NET Framework 3.5
Controls
 Slider ControlTemplate Example

  Switch on low bandwidth view
This page is specific to
Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:
Windows Presentation Foundation
Slider ControlTemplate Example

Controls in Windows Presentation Foundation (WPF) have a ControlTemplate that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the ControlTemplate of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the Template property of the control to its new and complete ControlTemplate.

This topic shows the ControlTemplate of the WPF Slider control.

This topic contains the following sections.

To run the examples in this topic, you should understand how to write WPF applications. For more information, see Getting Started with Windows Presentation Foundation. You should also understand how styles are used in WPF. For more information, see Styling and Templating.

Although this example contains all of the elements that are defined in the ControlTemplate of a Slider by default, the specific values should be thought of as examples. 

<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>

The preceding example uses one or more of the following resources. 

<!-- 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" />

For the complete sample, see Styling with ControlTemplates Sample.

Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker