Blend에서 Silverlight 컨트롤에 대한 Slider 컨트롤 스타일 지정 팁

아티클
10/09/2014

JJ170228.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ko-kr,VS.120).png

기본 제공 Slider 컨트롤을 사용하여 사용자 지정 Slider 템플릿을 만들 수 있습니다. 기본적으로 Slider 컨트롤 템플릿의 모양은 다음과 같습니다.

JJ170228.42dd6b3d-3876-435a-b401-1f9d2c815454(ko-kr,VS.120).png

Slider 템플릿의 파트

Slider 템플릿에는 파트 집합 두 개(세로 슬라이더에 대한 집합 하나와 가로 슬라이더에 대한 집합 하나)가 포함되어 있습니다. 파트 이름에는 슬라이더의 방향에 따라 "세로(vertical)" 또는 "가로(horizontal)"라는 단어다 접두어로 사용됩니다.

팁

템플릿의 파트를 보려면 템플릿을 수정하는 동안 파트 패널을 엽니다.

JJ170228.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(ko-kr,VS.120).png

파트 이름	개체 형식
HorizontalTemplate VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

슬라이더 팁

템플릿 파트

이 파트는 필수입니다. template 파트에는 특정 방향에서 Slider를 구성하는 모든 요소가 포함되어 있습니다.

template 파트를 만들려면 자동, 자동 및 별로 크기가 설정된 세 개 열(가로 방향)이나 행(세로 방향)을 포함하는 HorizontalTemplate 또는 VerticalTemplate이라는 모눈을 만듭니다

Thumb 파트

이 파트는 필수입니다. Thumb은 슬라이더의 움직일 수 있는 요소입니다.

Thumb을 나타내는 개체를 Thumb 컨트롤(HorizontalThumb 또는 VerticalThumb)로 만들려면 Thumb 파트를 Root 파트의 가운데 열(또는 행)에 배치합니다. 그런 다음 Thumb 파트의 Width 및 Height 속성을 설정하여 열(또는 행) 크기가 Thumb에 맞게 조정되도록 합니다.

Track

Thumb이 이동하는 공간을 트랙이라고 하며 트랙은 파트가 아니며 선택 사항입니다.

트랙을 포함시키려면 트랙을 나타내는 개체를 모든 세 개 열(또는 행)을 범위로 하는 Template 파트에 배치합니다.

트랙을 따라 큰 폭으로 Thumb 이동

사용자가 Thumb의 양쪽에서 트랙을 클릭하여 큰 폭으로 Thumb을 이동시킬 수 있도록 하려는 경우 Thumb 파트의 양쪽에 있는 두 개 열(또는 행)에 RepeatButton 컨트롤을 배치하고 VerticalLargeDecrease 및 VerticalLargeIncrease(또는 HorizontalLargeDecrease 및 HorizontalLargeIncrease)로 이름을 지정합니다. RepeatButton 컨트롤 기능이 작동하지만 보이지 않도록 하려면 Opacity를 0으로 설정합니다. 또는 Opacity가 0으로 설정된 단일 개체를 포함하는 템플릿을 RepeatButton 컨트롤에 적용합니다.

Slider 컨트롤 상태

기본적으로 Slider 컨트롤은 다음과 같은 CommonStates 상태 그룹의 세 가지 상태 중 하나일 수 있으며 해당 상태는 Slider 템플릿을 수정할 때 상태 패널에 나타납니다.

상태 이름	설명
Normal	Slider 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다.
MouseOver	Slider 컨트롤로 포인터를 이동할 때의 컨트롤 모양입니다.
Disabled	IsEnabled 속성이 False로 설정될 때 Slider 컨트롤의 모양입니다.

Slider 컨트롤은 다음과 같은 FocusStates 상태 그룹의 두 가지 상태 중 하나일 수도 있습니다.

상태 이름	설명
Unfocused	키보드 포커스가 없을 때 Slider 컨트롤의 모양입니다.
Focused	키보드 포커스가 있을 때 Slider 컨트롤의 모양입니다. 예를 들어 Slider 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환시킬 수 있습니다.

팁

상태 그룹에는 동일한 논리적 범주에 속하지만 동시에 표시할 수는 없는 시각적 상태가 포함됩니다.예를 들어 CommonStates 그룹에는 마우스와 같은 입력 장치와 사용자 간의 상호 작용과 관련된 상태가 포함됩니다.단일 상태 그룹의 상태는 한 번에 하나씩만 표시될 수 있지만, 서로 다른 상태 그룹의 각 상태는 동시에 표시될 수 있습니다.

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 기록 단추 JJ170228.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,VS.120).png 를 클릭하거나 상태 패널에서 Base를 선택합니다. 별개의 두 상태가 활성화되었을 때의 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정한 상태에서 다른 상태 그룹의 상태를 수정할 수 있습니다.

템플릿 바인딩

Background, BorderBrush, Foreground, BorderThickness 또는 Padding 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 Blend에서 개체 속성을 템플릿으로 연장을 참조하십시오.

개체를 Slider 컨트롤로 변환

다음 그림은 디자이너가 만든 슬라이더의 전체 디자인(comp)으로 HorizontalThumb 파트의 MouseOver 및 Pressed 상태를 포함합니다.

Normal

Normal 상태의 Slider

MouseOver

MouseOver 상태의 Slider

Pressed

Pressed 상태의 Slider

Disabled

Disabled 상태의 Slider

이 예에서는 다음 절차의 2단계에 있는 XAML 코드를 사용하며 이 코드는 Slider 컨트롤 템플릿을 사용하여 사용자 지정 스크롤 막대를 만드는 위 그래픽에 해당합니다.

팁

이 절차를 수행하면서 디자인 보기 및 코드 보기 모두에서 변경 내용을 확인하려면 나누기 보기를 클릭합니다.

코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

다음 코드를 복사하여 1단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.

<Grid Width="146" Height="17" >
<Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
<Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
</Grid>

붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.
개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 Slider를 클릭한 다음 확인을 클릭합니다.

코드 보기에서 이전 단계에서 붙여 넣은 코드가 새 슬라이더에 대한 코드로 바뀌었음을 확인합니다. 또한 Blend는 Grid를 새 Slider 스타일의 템플릿으로 전환하고 해당 템플릿을 Grid에 적용합니다.
Template 파트 그리드에 열을 추가하려면 디자인 보기에서 다음 그림에 설명된 대로 파란색 눈금자를 컨트롤의 왼쪽으로 클릭하여 새 열을 추가합니다:

표시된 대로 열을 추가하면 파트가 올바른 행에 있게 됩니다. Track은 ColumnSpan이 3 이며, thumb 는 Column이 1입니다.

참고

번호 매기기는 0에서 시작하므로 세 개 열은 0에서 2까지 번호가 매겨집니다.
템플릿 루트를 HorizontalTemplate 파트에 만들려면 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭하고 슬라이더의 파트로 만들기를 클릭한 다음 HorizontalTemplate을 클릭합니다. Grid 이름이 HorizontalTemplate으로 바뀐 것을 확인합니다.
개체 및 타임라인 패널에서 thumb을 마우스 오른쪽 단추로 클릭하고 슬라이더의 파트로 만들기를 클릭한 다음 HorizontalThumb을 클릭합니다.
HorizontalThumb 파트에 상태를 추가하려면 다음 작업을 수행합니다.
1. 개체 및 타임라인 패널에서 Thumb을 클릭합니다.
2. 상태 패널에서 MouseOver를 클릭합니다.
3. 속성 패널에서 Fill을 #FFCCCCCC로 설정합니다.
4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.
  
  참고
  
  문서 창의 왼쪽 맨 위에서 기록 모드 표시기 를 클릭하여 상태 기록을 종료할 수도 있습니다.
상태 패널에서 MouseOver를 마우스 오른쪽 단추로 클릭하고 상태 복사 위치를 클릭한 다음 Pressed를 클릭합니다.
오프셋을 만들려면 상태 패널에서 Pressed를 선택한 다음 속성 패널의 변형 범주에서 X 및 Y를 1로 설정합니다. Base를 클릭하여 상태 기록을 종료합니다.
상태 패널에서 Normal을 클릭합니다. 전환 추가를 클릭한 다음 Normal->MouseOver를 클릭합니다. 전환 지속 시간을 .2로 설정합니다. Base를 클릭하여 상태 기록을 종료합니다.
개체 및 타임라인 패널에서 범위 반환을 클릭하여 Slider 컨트롤[SliderStyle1 (슬라이더 템플릿)]의 템플릿 편집 모드로 돌아갑니다.
개체 및 타임라인 패널에서 HorizontalThumb을 클릭합니다. 속성 패널의 레이아웃 범주에서 여백 옆의 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.
개체 및 타임라인 패널에서 HorizontalTemplate을 클릭합니다. Parts 패널에서 HorizontalTrackLargeChangeDecreaseRepeatButton을 두 번 클릭하여 파트를 만들고 HorizontalTemplate의 자식 개체로 만듭니다. 속성 패널의 모양 범주에서 Opacity를 0으로 설정합니다.
개체 및 타임라인 패널에서 HorizontalTemplate을 클릭합니다. Parts 패널에서 HorizontalTrackLargeChangeIncreaseRepeatButton을 두 번 클릭하여 파트를 만들고 HorizontalTemplate의 자식 개체로 만듭니다. 속성 패널의 모양 범주에서 Opacity를 0으로 설정합니다.
열 0 과 1에서 별 아이콘을 자동 아이콘이 나타날 때까지 두 번 클릭합니다. 열 2에 별 아이콘이 나타나는지 확인합니다. 가운데 열 구분자를 클릭한 다음 속성 패널에서 고급 속성 표시를 클릭합니다. MinHeight 값의 오른쪽에서 고급 옵션을 클릭하고 다시 설정을 클릭합니다.
개체 및 타임라인 패널에서 HorizontalTemplate을 클릭합니다. 상태 패널에서 Disabled를 클릭합니다. 속성 패널의 모양 범주에서 Opacity를 50으로 설정합니다.
Ctrl + Shift + B를 눌러 프로젝트를 빌드하십시오. 빌드가 완료되면 f5 키를 눌러 프로젝트를 실행하고 스크롤 막대를 테스트 합니다.