Condividi tramite

Esempio di ControlTemplate del controllo Slider

  • Articolo

Aggiornamento: novembre 2007

I controlli disponibili in Windows Presentation Foundation (WPF) includono un oggetto ControlTemplate che contiene la relativa struttura ad albero visuale. È possibile modificare la struttura e l'aspetto di un controllo modificando il relativo oggetto ControlTemplate. Non è possibile sostituire solo una parte della struttura ad albero visuale di un controllo. Per modificare la struttura ad albero visuale di un controllo, è necessario impostare la proprietà Template di tale controllo sul relativo oggetto ControlTemplate nuovo e completo.

In questo argomento viene illustrato l'oggetto ControlTemplate del controllo Slider di WPF.

Nel presente argomento sono contenute le seguenti sezioni.

  • Prerequisiti
  • Esempio di ControlTemplate del controllo Slider
  • Argomenti correlati

Prerequisiti

Per eseguire gli esempi di questo argomento, è necessario disporre di conoscenze su come scrivere applicazioni WPF. Per ulteriori informazioni, vedere Guida introduttiva a Windows Presentation Foundation. È inoltre necessario comprendere l'utilizzo degli stili in WPF. Per ulteriori informazioni, vedere Applicazione di stili e modelli.

Esempio di ControlTemplate del controllo Slider

Anche se questo esempio contiene tutti gli elementi definiti nell'oggetto ControlTemplate di un controllo Slider per impostazione predefinita, i valori specifici devono essere considerati come esempi.

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

Nell'esempio precedente vengono utilizzate una o più delle risorse seguenti.

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

Per l'esempio completo, vedere Esempio di applicazione di stili con ControlTemplate.

Vedere anche

Concetti

Linee guida per la progettazione di controlli a cui è possibile applicare degli stili

Altre risorse

Esempi di ControlTemplate