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

아티클
10/09/2014

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

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

JJ170239.c01e5314-5b29-4283-a483-b0a1cb3b59f6(ko-kr,VS.120).png

Button 컨트롤의 상태

Button 템플릿을 수정할 때, 상태 패널에서 Button 컨트롤의 가능한 상태를 확인할 수 있습니다. Button 컨트롤은 기본적으로 CommonStates 상태 그룹에서 다음 네 가지 상태 중 하나일 수 있습니다.

상태 이름	설명
Normal	Button 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다.
MouseOver	Button 컨트롤로 포인터를 이동할 때의 컨트롤 모양입니다.
Pressed	컨트롤에 포커스가 있을 때 혹은 사용자가 Enter키, 스페이스바를 누르거나 클릭할 때의 Button 컨트롤 모양입니다.
Disabled	IsEnabled 속성이 False로 설정될 때 Button 컨트롤의 모양입니다.

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

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

팁

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

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 모드 표시를 클릭하거나 JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,VS.120).png 기준을 상태패널에서 선택하십시오.

자세한 내용은 Blend에서 컨트롤에 대해 다른 시각적 상태 정의을 참조하십시오.

템플릿 바인딩

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

텍스트를 Button컨트롤으로 변환하기

다음 그림은 Normal, MouseOver, Pressed, Disabled 및 Focused 상태가 포함된 라디오 단추의 전체 디자인(comp)입니다.

Normal

Normal 상태의 단추

MouseOver

MouseOver 상태의 단추

Pressed

Pressed 상태의 단추

Disabled

Disabled 상태의 단추

Focused

Focused 상태의 단추

참고

위 그림은 Button 컨트롤이 아니라 Button 컨트롤로 변환할 수 있는 아트워크입니다.

이 예에서는 다음 절차의 2단계에서 XAML 코드를 사용하며, 위 그림에서는 Normal 상태에 해당합니다.

팁

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

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

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

<Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

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

코드 보기에서 이전 단계에서 붙여 넣은 코드가 새 Button컨트롤에 대한 코드로 바뀌었음을 확인합니다. 또한 Blend for Visual Studio는 Button 컨트롤을 새 Button 스타일의 템플릿으로 변환하고 버튼에 해당 템플릿을 적용합니다.

comp의 TextBlock에는 밝은 회색 전경이 있습니다. 새 Button 스타일 또한 밝은 회색 전경색입니다. 확인은 위의 Button 및 Button 컨트롤의 텍스트 내용이며, 위의 코드에서 TextBlock 은 ContentPresenter 으로 원본 TextBlock 과 동일한 속성을 사용하여 대체되었습니다.
상태를 Button에 추가하려면 다음 단계를 따릅니다.
1. 개체 및 타임라인 패널에서 Rectangle을 클릭합니다.
2. 상태 패널에서 MouseOver를 클릭합니다.
3. 속성패널에서 Stroke를 #FF808080으로 입력해 설정합니다.
4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.
Pressed 상태에 동일한 속성을 적용하려면 상태 패널에서 MouseOver를 마우스 오른쪽 단추로 클릭하고 상태 복사 위치를 클릭한 다음 Pressed를 클릭합니다.
단추를 누를 때 단추 텍스트를 오프셋 하려면 다음과 같이 하십시오.
1. 상태 패널에서 Pressed를 클릭합니다.
2. 개체 및 타임라인 패널에서 Content Presenter를 클릭합니다.
3. 속성 패널의 변형 범주에 있는 좌표 이동 탭에서 X 및 Y를 1로 설정합니다.
4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.
상태 패널에서 Normal을 클릭하고 전환 추가를 클릭한 다음 Normal->MouseOver를 클릭합니다. 전환 지속 시간 상자에 .2를 입력하고 Base를 클릭합니다.
Focused 상태일 때, 구성 요소는 단추 주위에 파란색 사각형을 포함합니다. 사각형을 만들려면 Focused 상태를 선택한 상태에서 새 Rectangle 개체를 추가합니다. 이를 "상태에서 그리기"라고 하며 개체를 그린 상태에서만 새 개체가 표시됨을 의미합니다. Focused 상태의 사각형을 만들려면 상태 패널에서 Focused를 클릭한 다음 도구 패널의 사각형 도구를 두 번 클릭하여 새 Rectangle 개체를 만듭니다.
다음 단계에서는 새 사각형의 속성을 설정합니다. 속성은 Focused 상태가 아닌 Base 상태에서 변경해야 합니다. 그러나 사각형은 현재 투명하게 표시되어 Base에서 볼 수 없습니다. 사각형의 표시 상태를 유지하려면 **기록 모드 표시기 ** 를 클릭합니다. 개체 및 타임라인 패널에는 새 사각형(rectangle1)이 계속 선택되어 있습니다. 속성 패널에서 rectangle1에 대한 다음 속성을 설정합니다.
- 채우기를 브러시 없음으로 설정합니다.
- 스트로크 색을 #FF00C0FF으로 설정.
- RadiusX을 2로 설정.
- RadiusY 을 2로 설정.
- Margin을 Left는 1, Right는 1, Top은 1, Bottom은 1로 설정합니다.
단추가 Focused 상태에 있을 때 직사각형에 더 많은 상호작용을 추가하고 싶다면, 다음을 수행하여 안정적인 상태의 애니메이션을 만들 수 있습니다. 그렇지 않으면 12단계는 생략합니다.
1. 상태 패널에서 Focused를 선택합니다.
2. 개체 및 타임라인 패널에서 타임라인 표시 를 클릭합니다.
3. 2 초 표시에 키프레임을 드래그 한 다음 타임 라인 플레이 헤드를 2.2 초로 이동 합니다.
4. 상태 패널에서 Disabled를 선택합니다.
5. 속성 패널의 모양 범주에서 Opacity를 0으로 설정합니다.
6. 개체 및 타임라인 패널에서 타임 라인 플레이 헤드를 다시 0초로 이동한 다음, rectangle1을 클릭합니다. 속성 패널의 변형 범주에서 X 및 Y를 5로 설정합니다.
7. 개체 및 타임라인 패널에서 VerticalScrollBar를 클릭합니다. 속성패널의 Easing 범주에서 EasingFunction을 Quartic Out으로 설정합니다.
8. 개체 및 타임 라인 패널의 탭 바로 아래에 있는 상태 이름을 클릭합니다. (이 경우 Focused). 속성패널에 공용 속성탭에서 RepeatBehavior을 Forever로 설정합니다.
프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

개체를 버튼 컨트롤로 변환하기

다음 그림은 Normal, MouseOver, Pressed, Disabled 및 Focused 상태가 포함된 라디오 단추의 전체 디자인(comp)입니다.

Normal

단추 그래픽 - Normal

MouseOver

단추 그래픽 - MouseOver