通过

Slider ControlTemplate 示例

  • 项目

更新：2007 年 11 月

Windows Presentation Foundation (WPF) 中的控件有一个包含该控件可视化树的 ControlTemplate。可以通过修改某个控件的 ControlTemplate 来更改该控件的结构和外观。不能仅替换控件的可视化树的一部分；若要更改控件的可视化树，必须将该控件的 Template 属性设置为新的完整 ControlTemplate。

本主题演示 WPFSlider 控件的 ControlTemplate。

本主题包括下列各节。

  • 先决条件
  • Slider ControlTemplate 示例
  • 相关主题

先决条件

若要运行本主题中的示例，应当了解如何编写 WPF 应用程序。有关更多信息，请参见 Windows Presentation Foundation 入门。您还应当了解如何在 WPF 中使用样式。有关更多信息，请参见样式设置和模板化。

Slider ControlTemplate 示例

尽管此示例包含默认情况下在 Slider 的 ControlTemplate 中定义的所有元素，但是您应当将其中的特定值视为示例值。

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

上面的示例使用下面的一个或多个资源。

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

有关完整示例，请参见 使用 ControlTemplates 设置样式的示例。

请参见

概念

可样式化控件的设计准则

其他资源

ControlTemplate 示例