SimpleSlider(Blend에서 WPF 지원)

  • 아티클

이 페이지는 WPF 프로젝트에만 적용됨

슬라이더(Slider)는 Thumb 컨트롤을 이동하여 사용자가 특정 범위의 값을 선택할 수 있도록 하는 Simple 컨트롤입니다. 기본적으로 슬라이더는 가로로 표시되지만 Blend for Visual Studio의 속성 패널에 있는 공용 속성에서 Orientation 속성을 설정하여 세로로 변경할 수 있습니다. 슬라이더 값을 설정하려면 Minimum, Maximum 및 Value 속성을 사용합니다.

SimpleSlider 컨트롤의 아트보드 보기

JJ170894.50295968-6423-4517-9479-ed886201b731(ko-kr,VS.120).png

컨트롤 템플릿 분석

SimpleSlider 컨트롤 템플릿은 다음 항목으로 구성됩니다.

  • GridRoot로 명명된 Grid 패널 - 슬라이더 내에 여러 자식 개체를 넣는 데 사용됩니다. 또한 Grid를 사용하면 응용 프로그램 UI(사용자 인터페이스) 디자이너가 템플릿에 더 많은 개체를 쉽게 추가할 수 있습니다. GridRoot는 세 개의 행으로 분할되며 위쪽 행에는 TopTick 개체가, 가운데 행에는 Thumb 개체가, 아래쪽 행에는 BottomTick 개체가 들어 있습니다.

  • TopTick과 BottomTick으로 명명된 두 개의 TickBar 요소 - 슬라이더에 눈금을 표시하는 데 사용됩니다. 기본적으로 Visibility 속성은 Collapsed로 설정되어 있습니다. TickBar 요소는 이 템플릿이 적용되는 슬라이더 컨트롤에 설정되는 속성에 따라 표시할 눈금 표시 수를 결정합니다. TickBar 요소에서는 편집 가능한 템플릿을 제공하지 않지만 슬라이더 컨트롤의 Foreground 속성을 설정하여 눈금 표시를 나타내는 데 사용되는 브러시를 설정할 수 있습니다. 이 TickBar 요소는 슬라이더 컨트롤의 Foreground 속성에 템플릿 바인딩됩니다.

  • Border 요소 - 이 템플릿이 적용되는 단추 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

  • PART_Track으로 명명된 Track 요소 - 막대를 따라 Thumb 요소를 표시하는 데 사용됩니다. 사용자가 Thumb 요소를 끌 수 있습니다. 기본적으로 Thumb 요소에서는 편집할 수 있는 SimpleThumbStyle 템플릿을 사용합니다.

  • 두 개의 RepeatButton 요소 - PART_Track 요소 내에 포함되며 사용자가 위치 조정 컨트롤의 양쪽을 클릭하여 슬라이더 값을 더 크게 변경하는 데 사용할 수 있습니다. 템플릿이 아닌 슬라이더의 LargeChange 속성에서 이러한 변경의 단계 값을 지정할 수 있습니다. SmallChange 속성에 의해 지정되는 단계 값은 사용자가 화살표 키를 사용하여 위치 조정 컨트롤을 이동할 때 사용됩니다.

  • 레이아웃 변형 - 슬라이더를 가로 방향으로 표시하는 데 사용됩니다. 이 디자인은 서로 다른 두 템플릿을 편집해야 하는 경우보다 더 쉽게 편집할 수 있습니다. 그러나 두 방향이 완전히 달라서 별도의 템플릿이 필요한 경우가 있습니다. 이런 경우 Blend의 XAML 보기에서 START 요소에 Setter를 사용하면 방향에 따라 템플릿을 전환할 수 있습니다. 이러한 경우에 대한 예는 Slider 시스템 컨트롤에 대한 기본 템플릿에서 찾을 수 있습니다.

    경고

    이름이 "PART_"로 시작되는 요소는 컨트롤을 구현하는 코드에서 참조되므로 이러한 요소의 이름을 바꾸지 마십시오.

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 SimpleSlider 템플릿에서는 TickPlacement 속성에 따라 TickBar 요소를 나타내는 데 트리거가 사용됩니다. 이렇게 하면 TopTick과 BottomTick 요소의 표시 유형이 설정됩니다. Horizontal 및 Vertical 방향도 SimpleSlider 템플릿의 트리거에서 구성됩니다. 따라서 슬라이더를 90도 회전하는 레이아웃 변형이 슬라이더에 적용됩니다. 트랙은 방향이 자동으로 지정되므로 다시 적용하여 두 번 회전하지 않도록 해야 합니다.

브러시 사용

SimpleSlider 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

  • Background 속성은 트리거가 활성화되지 않은 경우에는 LightBrush를, IsEnabled가 False일 경우 DisabledBackgroundBrush를 사용하여 설정됩니다.

  • BorderBrush 속성은 트리거가 활성화되지 않은 경우에는 NormalBorderBrush를, IsEnabled가 False일 경우 DisabledBorderBrush를 사용하여 설정됩니다.

  • TopTick 요소의 Foreground 속성은 GlyphBrush를 사용하여 설정됩니다.

  • SimpleThumb 템플릿의 Fill 속성은 NormalBrush를 사용하여 설정되며 Stroke 속성은 NormalBorderBrush를 사용하여 설정됩니다.

모범 사례 및 디자인 지침

  • 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 제어를 사용합니다. Blend은 Grid 컨트롤과 같은 레이아웃 패널을 찾거나 아트 보드에 추가 되는 새 개체가 해당 레이아웃 패널의 자식 개체로 끝날 수 있도록 기본적으로 활성화 합니다.

  • 원하는 경우 SimpleSlider 템플릿에 트리거를 추가하거나 PART_Track 요소를 수정하여 슬라이더 모양을 더 독특하게 만들 수 있지만 이름이 "PART_"로 시작되는 요소는 컨트롤을 구현하는 코드에서 참조되므로 이러한 요소의 이름을 바꾸어서는 안 됩니다. Thumb 및 RepeatButton은 Track 내의 올바른 요소에 배치해야 합니다. 트랙 컨트롤에서는 Slider 값에 따라 Thumb 요소를 배치할 수 있으며, RepeatButton에서는 Command 바인딩을 사용하여 슬라이더의 값을 높이거나 낮춥니다.

  • SimpleSlider의 템플릿을 편집하는 경우 트리거 패널을 사용하여 적절한 트리거를 선택하면 TickBar 요소를 나타낼 수 있습니다. 예를 들어 SimpleSlider 템플릿에서 TickPlacement를 Both로 설정하면 두 TickBar 요소의 Visibility 속성이 Visible로 설정되어 모두 표시됩니다.

참고 항목

작업

실습 정보: SimpleSlider의 Thumb 요소 사용자 지정(Blend에서 WPF 지원)