다음을 통해 공유

Slider 스타일 및 템플릿

  • 아티클

업데이트: 2010년 8월

이 항목에서는 Slider 컨트롤의 스타일 및 템플릿에 대해 설명합니다. 기본 ControlTemplate을 수정하여 컨트롤에 고유한 모양을 지정할 수 있습니다. 자세한 내용은 ControlTemplate을 만들어 기존 컨트롤의 모양 사용자 지정을 참조하십시오.

Slider 요소

다음 표에서는 Slider 컨트롤의 명명된 요소를 보여 줍니다.

파트

형식

설명

PART_Track

Track

Slider의 위치를 나타내는 요소의 컨테이너입니다.

PART_SelectionRange

FrameworkElement

Slider를 따라 선택 범위를 표시하는 요소입니다. 선택 범위는 IsSelectionRangeEnabled가 true인 경우에만 표시됩니다.

Slider 상태

다음 표에서는 Slider 컨트롤의 시각적 상태를 보여 줍니다.

VisualState 이름

VisualStateGroup 이름

설명

보통

CommonStates

기본 상태입니다.

MouseOver

CommonStates

마우스 포인터가 컨트롤 위에 있습니다.

Disabled

CommonStates

컨트롤이 사용하지 않도록 설정되어 있습니다.

Focused

FocusStates

컨트롤에 포커스가 있습니다.

Unfocused

FocusStates

컨트롤에 포커스가 없습니다.

Valid

ValidationStates

이 컨트롤은 Validation 클래스를 사용하며 연결된 속성 Validation.HasError는 false입니다.

InvalidFocused

ValidationStates

컨트롤에 포커스가 있는 경우 연결된 속성 Validation.HasError는 true입니다.

InvalidUnfocused

ValidationStates

컨트롤에 포커스가 없는 경우 연결된 속성 Validation.HasError는 true입니다.

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

<!--Template when the orientation of the Slider is Horizontal.-->
<ControlTemplate x:Key="HorizontalSlider"
                 TargetType="{x:Type Slider}">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto"
                     MinHeight="{TemplateBinding MinHeight}" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TickBar x:Name="TopTick"
             SnapsToDevicePixels="True"
             Placement="Top"
             Height="4"
             Visibility="Collapsed">
      <TickBar.Fill>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
      </TickBar.Fill>
    </TickBar>
    <Border x:Name="TrackBackground"
            Margin="0"
            CornerRadius="2"
            Height="4"
            Grid.Row="1"
            BorderThickness="1">
      <Border.BorderBrush>
        <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>
      </Border.BorderBrush>
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource ControlLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource SliderTrackDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Border.Background>
    </Border>
    <Track Grid.Row="1"
           x: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 x: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>

<!--Template when the orientation of the Slider is Vertical.-->
<ControlTemplate x:Key="VerticalSlider"
                 TargetType="{x:Type Slider}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto"
                        MinWidth="{TemplateBinding MinWidth}" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TickBar x:Name="TopTick"
             SnapsToDevicePixels="True"
             Placement="Left"
             Width="4"
             Visibility="Collapsed">
      <TickBar.Fill>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
      </TickBar.Fill>
    </TickBar>

    <Border x:Name="TrackBackground"
            Margin="0"
            CornerRadius="2"
            Width="4"
            Grid.Column="1"
            BorderThickness="1">
      <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource BorderLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource BorderDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

      </Border.BorderBrush>
      <Border.Background>
        <LinearGradientBrush EndPoint="1,0"
                             StartPoint="0.25,0">
          <GradientStop Color="{DynamicResource ControlLightColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource SliderTrackDarkColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Border.Background>
    </Border>
    <Track Grid.Column="1"
           x: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 x: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>

앞의 예제에서는 다음 리소스를 하나 이상 사용합니다.

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

전체 샘플을 보려면 Styling with ControlTemplates 샘플을 참조하십시오.

참고 항목

참조

Style

ControlTemplate

개념

스타일 지정 및 템플릿

ControlTemplate을 만들어 기존 컨트롤의 모양 사용자 지정

기타 리소스

Control 스타일 및 템플릿

컨트롤 사용자 지정

변경 기록

날짜

변경 내용

이유

2010년 8월

ControlTemplate 예제를 추가했습니다.

향상된 기능 관련 정보