다음을 통해 공유

Button 컨트롤 스타일 지정 팁

  • 아티클

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ko-kr,Expression.40).png

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

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(ko-kr,Expression.40).png

Button 컨트롤의 상태

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

상태 이름 설명

Normal

Button 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다.

MouseOver

Button 컨트롤로 포인터를 이동할 때의 컨트롤 모양입니다.

Pressed

사용자가 Button 컨트롤을 클릭하거나 컨트롤에 포커스가 있을 때 Enter 키 또는 스페이스바를 누르는 경우의 컨트롤 모양입니다.

Disabled

IsEnabled 속성이 False 로 설정될 때 Button 컨트롤의 모양입니다.

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

상태 이름 설명

Unfocused

키보드 포커스가 없을 때 Button 컨트롤의 모양입니다.

Focused

키보드 포커스가 있을 때 Button 컨트롤의 모양입니다. 예를 들어 Button 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환할 수 있습니다.
tip note팁:

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

상태를 선택하고 상태 기록 기능이 켜져 있으면 해당 상태에 대한 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 모드 표시기Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,Expression.40).png를 클릭하거나 상태 패널에서 Base를 선택합니다.

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

템플릿 바인딩

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

텍스트를 Button 컨트롤로 변환

다음 그림은 생성된 단추의 전체 디자인(comp)으로 Normal , MouseOver , Pressed , Disabled 및 Focused 상태를 포함합니다.

Normal

Normal 상태의 단추

MouseOver

MouseOver 상태의 단추

Pressed

Pressed 상태의 단추

Disabled

Disabled 상태의 단추

Focused

Focused 상태의 단추

[!참고]

위에 있는 그래픽은 아직은 Button 컨트롤이 아니지만 Button 컨트롤로 변환할 수 있는 아트워크임을 유념해야 합니다.

다음 절차는 2단계에 설명된 XAML 코드를 사용하며 위에 있는 그래픽에서 Normal 상태에 해당합니다.

tip note팁:

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

  1. 새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 다음 코드를 복사하여 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>

  3. 붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.

  4. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 Button을 클릭한 다음 확인을 클릭합니다.

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

    comp의 TextBlock 은 밝은 녹색의 전경색으로 표시됩니다. 새 Button 스타일도 밝은 녹색의 전경색으로 표시됩니다. 확인 은 위에 있는 단추 및 Button 컨트롤에 대한 텍스트 콘텐츠입니다. 위에 있는 코드의 TextBlock 은 ContentPresenter 로 바뀌며 원래 TextBlock 과 동일한 속성을 갖게 됩니다.

  5. Button 컨트롤에 상태를 추가하려면 다음 단계를 수행합니다.

    1. 개체 및 타임라인 패널에서 Rectangle을 클릭합니다.

    2. 상태 패널에서 MouseOver를 클릭합니다.

    3. 속성 패널에서 Fill 및 Stroke를 #FF808080으로 설정합니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  6. Pressed 상태에 동일한 속성을 적용하려면 상태 패널에서 MouseOver를 마우스 오른쪽 단추로 클릭하고 상태 복사 위치를 클릭한 다음 Pressed를 클릭합니다.

  7. 단추를 누를 때 단추 텍스트를 오프셋하려면 다음 단계를 수행합니다.

    1. 상태 패널에서 Pressed를 클릭합니다.

    2. 개체 및 타임라인 패널에서 ContentPresenter를 클릭합니다.

    3. 속성 패널의 변형 범주에 있는 좌표 이동 탭에서 X 및 Y를 1 로 설정합니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  8. 상태 패널에서 Normal, 전환 추가를 차례로 클릭한 다음 Normal->MouseOver를 클릭합니다. 전환 지속 시간 상자에 .2 를 입력하고 Base를 클릭합니다.

  9. comp는 Focused 상태에 있을 때 단추를 둘러싼 파란색 사각형을 포함합니다. 사각형을 만들려면 새 Rectangle 개체를 Focused 상태가 선택된 채로 추가합니다. 이를 "상태에서 그리기"라고 하며 개체를 그린 상태에서만 새 개체가 표시됨을 의미합니다. Focused 상태의 사각형을 만들려면 상태 패널에서 Focused를 클릭한 다음 도구 창의 사각형 도구를 두 번 클릭하여 새 Rectangle 개체를 만듭니다.

  10. 다음 단계에서는 새 사각형의 속성을 설정합니다. 속성은 Focused 상태가 아닌 Base 상태에서 변경해야 합니다. 그러나 사각형은 현재 투명하게 표시되어 Base 에서 볼 수 없습니다. 기록 모드 표시기Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,Expression.40).png를 클릭하여 사각형을 표시합니다. 새 사각형( rectangle1 )은 개체 및 타임라인 패널에서 계속 선택되어 있습니다. 속성 패널에서 rectangle1에 대해 다음 속성을 설정합니다.

    • Fill    브러시 없음으로 설정합니다.

    • Stroke color    #FF00C0FF로 설정합니다.

    • RadiusX    2로 설정합니다.

    • RadiusY    2로 설정합니다.

    • Margin    Left를 1, Right를 1, Top을 1, Bottom을 1로 설정합니다.

  11. 단추가 Focused 상태에 있는 동안 다른 대화형 작업을 추가하려는 경우 필요에 따라 다음 작업을 수행하여 상태 지속형 애니메이션을 만들 수 있습니다. 그렇지 않은 경우에는 12단계로 건너뜁니다.

    1. 상태 패널에서 Focused 상태를 선택합니다.

    2. 개체 및 타임라인 패널에서 타임라인 표시 단추를 클릭합니다.

    3. 2초 표시로 키 프레임을 끈 다음 타임라인 플레이헤드를 2.2초로 이동합니다.

    4. 상태 패널에서 rectangle1을 선택합니다.

    5. 속성 패널의 모양 탭에서 Opacity를 0으로 설정합니다.

    6. 개체 및 타임라인 패널에서 타임라인 플레이헤드를 0초로 되돌린 다음 rectangle1을 선택합니다. 속성 패널의 비율 크기 조정 탭에서 X 및 Y를 5로 설정합니다.

    7. 개체 및 타임라인 패널에서 2로 설정된 키 프레임을 클릭합니다. 속성 패널의 감속/가속 범주에서 EasingFunction을 Quartic Out으로 설정합니다.

    8. 개체 및 타임라인 패널의 탭 바로 아래에 있는 상태 이름을 클릭합니다(이 예에서는 Focused). 속성 패널의 공용 속성 탭에서 RepeatBehavior를 계속으로 설정합니다.

  12. 프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

개체를 Button 컨트롤로 변환

다음 그림은 디자이너가 생성한 단추의 comp 이미지로서 Normal , MouseOver , Pressed , Disabled 및 Focused 상태를 포함합니다.

Normal

단추 그래픽 - Normal

MouseOver

단추 그래픽 - MouseOver

Pressed

단추 그래픽 - Pressed

Disabled

단추 그래픽 - Disabled

Focused

단추 그래픽 - Focused

[!참고]

위에 있는 그래픽은 아직은 Button 컨트롤이 아니지만 Button 컨트롤로 변환할 수 있는 아트워크임을 유념해야 합니다.

다음 절차는 2단계에 설명된 XAML 코드를 사용하며 위에 있는 그래픽에서 Normal 상태에 해당합니다.

tip note팁:

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

  1. 새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 다음 코드를 복사하여 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>

  3. 붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.

  4. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 Button을 클릭한 다음 확인을 클릭합니다.

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

  5. 개체 및 타임라인 패널에서 콘텐츠를 마우스 오른쪽 단추로 클릭한 후 잘라내기를 클릭합니다.

  6. 범위를 UserControl로 되돌리고 UserControl을 마우스 오른쪽 단추로 클릭한 후 붙여넣기를 클릭합니다.

  7. Button 컨트롤에 상태를 추가하려면 다음 단계를 수행합니다.

    1. 개체 및 타임라인 패널에서 Rectangle을 클릭합니다.

    2. 상태 패널에서 MouseOver를 클릭합니다.

    3. 속성 패널에서 Fill 및 Stroke를 #FF808080으로 설정합니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  8. Pressed 상태에 동일한 속성을 적용하려면 상태 패널에서 MouseOver를 마우스 오른쪽 단추로 클릭하고 상태 복사 위치를 클릭한 다음 Pressed를 클릭합니다.

  9. 단추를 누를 때 단추 텍스트를 오프셋하려면 다음 단계를 수행합니다.

    1. 상태 패널에서 Pressed를 클릭합니다.

    2. 개체 및 타임라인 패널에서 ContentPresenter를 클릭합니다.

    3. 속성 패널의 변형 범주에 있는 좌표 이동 탭에서 X 및 Y를 1 로 설정합니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  10. 상태 패널에서 Normal, 전환 추가를 차례로 클릭한 다음 Normal->MouseOver를 클릭합니다.

  11. 전환 지속 시간 상자에 .2 를 입력하고 Base를 클릭합니다.

    comp는 단추가 Focused 상태에 있을 때 해당 단추를 둘러싼 파란색 사각형을 포함합니다. 사각형을 만들려면 새 Rectangle 개체를 Focused 상태가 선택된 채로 추가합니다. 이를 "상태에서 그리기"라고 하며 개체를 그린 상태에서만 새 개체가 표시됨을 의미합니다. Focused 상태의 사각형을 만들려면 상태 패널에서 Focused를 클릭한 다음 도구 패널의 사각형 도구를 두 번 클릭하여 새 Rectangle 개체를 만듭니다.

  12. 다음 단계에서는 새 사각형의 속성을 설정합니다. 속성은 Focused 상태가 아닌 Base 상태에서 변경해야 합니다. 그러나 사각형은 현재 투명하게 표시되어 Base 에서 볼 수 없습니다. 기록 모드 표시기Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,Expression.40).png를 클릭하여 사각형을 표시합니다. 새 사각형( rectangle1 )은 개체 및 타임라인 패널에서 계속 선택되어 있습니다. 속성 패널에서 rectangle1에 대해 다음 속성을 설정합니다.

    • Fill    브러시 없음으로 설정합니다.

    • Stroke color    #FF00C0FF로 설정합니다.

    • Margin    Left를 1, Right를 1, Top을 1, Bottom을 1로 설정합니다.

  13. 단추가 Focused 상태에 있는 동안 다른 대화형 작업을 추가하려는 경우 필요에 따라 다음 작업을 수행하여 상태 지속형 애니메이션을 만들 수 있습니다. 그렇지 않은 경우에는 14단계로 건너뜁니다.

    1. 상태 패널에서 Focused 상태를 선택합니다.

    2. 개체 및 타임라인 패널에서 타임라인 표시 단추를 클릭합니다.

    3. 2초 표시로 키 프레임을 끈 다음 타임라인 플레이헤드를 2.2초로 이동합니다.

    4. 상태 패널에서 rectangle1을 선택한 다음 속성 패널의 모양 탭에서 Opacity를 0으로 설정합니다.

    5. 개체 및 타임라인 패널에서 타임라인 플레이헤드를 0초로 되돌린 다음 rectangle1을 선택합니다. 속성 패널의 비율 크기 조정 탭에서 X 및 Y를 5로 설정합니다.

    6. 개체 및 타임라인 패널에서 2로 설정된 키 프레임을 클릭합니다. 속성 패널의 감속/가속 범주에서 EasingFunction을 Quartic Out으로 설정합니다.

    7. 개체 및 타임라인 패널의 탭 바로 아래에 있는 상태 이름을 클릭합니다(이 예에서는 Focused).

    8. 속성 패널의 공용 속성 탭에서 RepeatBehavior를 계속으로 설정합니다.

  14. 프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

새 Button 템플릿을 다른 Button 개체에 적용하는 방법에 대한 자세한 내용은 리소스 적용 또는 제거를 참조하십시오.

참조

Silverlight  Button 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight Control Gallery(Silverlight 컨트롤 갤러리) Ee341364.xtlink_newWindow(ko-kr,Expression.40).png에서 확인할 수 있습니다.

참조 항목

작업

기존 개체에서 컨트롤 만들기

개념

공통 Silverlight 컨트롤의 스타일 지정 팁
SimpleButton
템플릿을 지원하는 컨트롤 스타일

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.