SimpleSlider
.png "이 페이지는 WPF 프로젝트에만 적용됨")
슬라이더(Slider)는 Thumb 컨트롤을 이동하여 사용자가 특정 범위의 값을 선택할 수 있도록 하는 Simple Styles 컨트롤입니다. 기본적으로 슬라이더는 가로로 표시되지만 Microsoft Expression Blend 속성 패널의 공용 속성에서 Orientation 속성을 설정하여 세로로 변경할 수 있습니다. 슬라이더의 값을 설정하려면 Minimum, Maximum 및 Value 속성을 사용하십시오.
SimpleSlider 컨트롤의 아트보드 보기
.png "Cc295377.50295968-6423-4517-9479-ed886201b731(ko-kr,Expression.10).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 속성에 의해 지정되는 단계 값은 사용자가 화살표 키를 사용하여 위치 조정 컨트롤을 이동할 때 사용됩니다.
레이아웃 변형 슬라이더를 가로 방향으로 표시하는 데 사용됩니다. 이 디자인은 서로 다른 두 템플릿을 편집해야 하는 경우보다 더 쉽게 편집할 수 있습니다. 그러나 두 방향이 완전히 달라서 별도의 템플릿이 필요한 경우가 있습니다. 이런 경우 Expression Blend의 XAML 보기에서 <Style> 요소에 Setter를 사용하면 방향에 따라 템플릿을 전환할 수 있습니다. 이러한 경우에 대한 예는 Slider 시스템 컨트롤에 대한 기본 템플릿에서 찾을 수 있습니다.
.gif "주의 사항")
주의:이름이 "PART_"로 시작되는 요소는 컨트롤을 구현하는 코드에서 참조되므로 이러한 요소의 이름을 바꾸지 마십시오.
개체 보기: SimpleSlider 컨트롤의 기본 구성 요소(템플릿)
.png "Cc295377.29dedf1c-7f1c-41d0-82a6-8bfccb4eb726(ko-kr,Expression.10).png")
.gif "Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif")
맨 위로 이동
속성 트리거 사용
컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 인터랙션 패널의 트리거 아래 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 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 컨트롤을 사용합니다. 기본적으로 Expression Blend에서는 Grid 컨트롤과 같은 레이아웃 패널을 찾아 활성화함으로써 아트보드에 추가되는 새 요소가 해당 레이아웃 패널의 자식 요소가 되도록 합니다.
원하는 경우 SimpleSlider 템플릿에 트리거를 추가하거나 PART_Track 요소를 수정하여 슬라이더 모양을 더 독특하게 만들 수 있지만 이름이 "PART_"로 시작되는 요소는 컨트롤을 구현하는 코드에서 참조되므로 이러한 요소의 이름을 바꾸어서는 안 됩니다. Thumb 및 repeat button은 Track 내의 올바른 요소에 배치해야 합니다. 트랙 컨트롤에서는 Slider 값에 따라 Thumb 요소를 배치할 수 있으며, repeat button에서는 Command 바인딩을 사용하여 슬라이더의 값을 높이거나 낮춥니다.
SimpelSlider의 템플릿을 편집하는 경우 인터랙션 패널의 트리거 영역을 사용하여 적절한 트리거를 선택하면 TickBar 요소를 나타낼 수 있습니다. 예를 들어 SimpleSlider 템플릿에서 TickPlacement를 Both로 설정하면 두 TickBar 요소의 Visibility 속성이 Visible로 설정되어 모두 표시됩니다.
맨 위로 이동