연습: Microsoft Expression Blend를 사용하여 단추 만들기

아티클
05/04/2023

이 연습에서는 Microsoft Expression Blend를 사용하여 WPF 사용자 지정 단추를 만드는 프로세스를 안내합니다.

중요

Microsoft Expression Blend는 실행 프로그램을 만들기 위해 컴파일되는 XAML(Extensible Application Markup Language)을 생성함으로써 작동합니다. XAML을 직접 사용하려는 경우 Blend가 아닌 Visual Studio에서 XAML을 사용하여 이와 동일한 애플리케이션을 만드는 또 다른 연습이 있습니다. 자세한 내용은 XAML을 사용하여 단추 만들기를 참조하세요.

다음 그림에서는 만들게 될 사용자 지정 단추를 보여줍니다.

도형을 단추로 변환

이 연습의 첫 번째 부분에서는 사용자 지정 단추의 사용자 지정 모양을 만듭니다. 이를 위해 먼저 사각형을 단추로 변환합니다. 그런 다음 단추의 템플릿에 도형을 추가하여 더 복잡한 모양의 단추를 만듭니다. 일반 단추로 시작하고 사용자 지정하는 것은 어떨까요? 단추에는 필요하지 않은 기본 제공 기능이 있기 때문에 사용자 지정 단추의 경우 사각형으로 시작하는 것이 더 쉽습니다.

Expression Blend에서 새 프로젝트 만들기

Expression Blend를 시작합니다. (시작을 클릭하고, 모든 프로그램을 가리키고, Microsoft Expression을 가리킨 다음 Microsoft Expression Blend를 클릭합니다.)
필요한 경우 애플리케이션을 최대화합니다.
파일 메뉴에서 새 프로젝트를 클릭합니다.
표준 애플리케이션(.exe)을 선택합니다.
프로젝트 이름을 CustomButton으로 지정하고 확인을 누릅니다.

이 시점에서 빈 WPF 프로젝트가 있습니다. F5 키를 눌러 애플리케이션을 실행할 수 있습니다. 예상할 수 있듯이 애플리케이션은 빈 창으로만 구성됩니다. 다음으로 둥근 사각형을 만들어 단추로 변환합니다.

사각형을 단추로 변환

창 배경 속성을 검은색으로 설정: 창을 선택하고 속성 탭을 클릭한 다음 Background 속성을 Black으로 설정합니다.
창에 있는 단추의 크기에 해당하는 사각형을 그리기: 왼쪽 도구 패널에서 사각형 도구를 선택하고 사각형을 창으로 끕니다.
사각형의 모서리를 둥글게 만들기: 사각형의 제어점을 끌거나 RadiusX 및 RadiusY 속성을 직접 설정합니다. RadiusX 및 RadiusY의 값을 20으로 설정합니다.
사각형을 단추로 변경: 사각형을 선택합니다. 도구 메뉴에서 단추 만들기를 클릭합니다.
스타일/템플릿의 범위 지정: 다음과 같은 대화 상자가 나타납니다.

리소스 이름(키)에 대해 모두 적용을 선택합니다. 이렇게 하면 결과로 나오는 스타일 및 단추 템플릿이 단추인 모든 개체에 적용됩니다. 정의 위치에서 애플리케이션을 선택합니다. 이렇게 하면 결과로 나오는 스타일 및 단추 템플릿의 범위가 전체 애플리케이션에 적용됩니다. 이 두 상자에 값을 설정하면 단추 스타일과 템플릿이 전체 애플리케이션 내의 모든 단추에 적용되고 애플리케이션에서 만드는 모든 단추는 기본적으로 이 템플릿을 사용합니다.

단추 템플릿 편집

이제 단추로 변경된 사각형이 있습니다. 이 섹션에서는 단추의 템플릿을 수정하고 단추의 모양을 추가로 사용자 지정합니다.

단추 템플릿 파일을 편집하여 단추 모양 변경

템플릿 편집 보기로 이동: 단추 모양을 추가로 사용자 지정하려면 단추 템플릿을 편집해야 합니다. 이 템플릿은 사각형을 단추로 변환할 때 만들어졌습니다. 단추 템플릿을 편집하려면 단추를 마우스 오른쪽 단추로 클릭하고 컨트롤 파트 편집(템플릿)을 선택한 다음 템플릿 편집을 선택합니다.

템플릿 편집기에서 단추가 이제 Rectangle 및 ContentPresenter로 구분됩니다. ContentPresenter는 단추 내의 콘텐츠를 표시하는 데 사용됩니다(예: "Button" 문자열). 사각형과 ContentPresenter는 모두 Grid 내부에 배치됩니다.
템플릿 구성 요소의 이름 변경: 템플릿 인벤토리에서 사각형을 마우스 오른쪽 단추로 클릭하고 Rectangle의 이름을 "[Rectangle]"에서 "outerRectangle"로 변경하고, "[ContentPresenter]"를 "myContentPresenter"로 변경합니다.
내부가 비어 있도록 사각형 변경(예: 도넛 모양):outerRectangle을 선택하고 Fill을 "투명"으로 설정하고 StrokeThickness를 5로 설정합니다.

그런 다음 Stroke를 템플릿의 색상으로 설정합니다. 이를 위해 스트로크 옆에 있는 작은 흰색 상자를 클릭하고 CustomExpression을 선택한 다음 대화 상자에 "{TemplateBinding Background}"를 입력합니다.
내부 사각형 만들기: 이제 다른 사각형을 만들고(이름을 "innerRectangle"로 지정) outerRectangle의 안쪽에 대칭으로 배치합니다. 이러한 작업의 경우 편집 영역에서 단추를 더 크게 만들기 위해 확대할 수 있습니다.

참고

사각형은 그림의 사각형과 다르게 보일 수 있습니다(예: 모서리가 둥글 수 있음).
ContentPresenter를 맨 위로 이동: 이때 "Button" 텍스트가 더 이상 표시되지 않을 수 있습니다. 그러한 경우 innerRectangle이 myContentPresenter의 맨 위에 있기 때문입니다. 이를 해결하려면 myContentPresenter를 innerRectangle 아래로 끌어옵니다. 아래와 비슷하게 사각형과 myContentPresenter의 위치를 변경합니다.

참고

또는 마우스 오른쪽 단추로 클릭하고 앞으로 보내기를 눌러 myContentPresenter를 맨 위에 배치할 수도 있습니다.
innerRectangle의 모양 변경:RadiusX, RadiusY 및 StrokeThickness의 값을 20으로 설정합니다. 추가로 Fill을 사용자 지정 식 "{TemplateBinding Background}")을 사용하여 템플릿의 배경으로 설정하고, Stroke를 "투명"으로 설정합니다. innerRectangle의 Fill 및 Stroke 설정은 outerRectangle의 설정과 반대입니다.
맨 위에 유리 레이어 추가: 단추 모양을 사용자 지정할 때의 마지막 단계는 맨 위에 유리 레이어를 추가하는 것입니다. 이 유리 레이어는 세 번째 사각형으로 구성됩니다. 유리는 전체 단추를 덮기 때문에 유리 사각형은 outerRectangle과 크기가 비슷합니다. 따라서 outerRectangle의 복사본을 만들어 사각형을 만듭니다. outerRectangle을 강조 표시하고 Ctrl+C 및 Ctrl+V를 사용하여 복사본을 만듭니다. 이 새 사각형의 이름을 "glassCube"로 지정합니다.
필요한 경우 glassCube 위치 변경:glassCube 가 전체 단추를 덮도록 배치되지 않은 경우 해당 위치로 끌어다 놓습니다.
glassCube에 outerRectangle과 약간 다른 모양 지정:glassCube의 속성을 변경합니다. 시작하려면 RadiusX 및 RadiusY 속성을 10으로 변경하고 StrokeThickness 속성을 2로 변경합니다.
glassCube를 유리처럼 보이도록 만들기: 불투명이 75%이고 약 6개의 균등한 간격에 따라 흰색과 투명 색상을 번갈아 설정하는 선형 그라데이션을 사용하여 Fill을 유리 같은 느낌으로 설정합니다. 그라데이션 중지점을 다음과 같이 설정합니다.
- 그라데이션 중지점 1: 알파 값이 75%인 흰색
- 그라데이션 중지점 2: 투명
- 그라데이션 중지점 3: 알파 값이 75%인 흰색
- 그라데이션 중지점 4: 투명
- 그라데이션 중지점 5: 알파 값이 75%인 흰색
- 그라데이션 중지점 6: 투명
이렇게 하면 "물결 모양의" 유리와 같은 느낌을 줍니다.
유리 레이어 숨기기: 이제 유리 레이어의 모양을 확인했으므로 속성 창의 모양 창으로 이동하고 불투명도를 0%로 설정하여 숨깁니다. 앞의 섹션에서는 속성 트리거 및 이벤트를 사용하여 유리 레이어를 표시하고 조작합니다.

단추 동작 사용자 지정

이 시점에서 템플릿을 편집하여 단추의 프레젠테이션을 사용자 지정했지만, 단추는 일반적인 단추처럼 사용자 동작에 반응하지 않습니다(예: 마우스를 놓을 때 모양 변경, 포커스 받기 및 클릭). 다음 두 절차에서는 사용자 지정 단추에 이와 같은 동작을 빌드하는 방법을 보여줍니다. 간단한 속성 트리거로 시작한 다음, 이벤트 트리거 및 애니메이션을 추가합니다.

속성 트리거 설정

새 속성 트리거 만들기:glassCube를 선택한 상태에서 트리거 패널에 있는 + 속성을 클릭합니다(다음 단계를 따르는 그림 참조). 기본 속성 트리거를 사용하는 속성 트리거를 만듭니다.
IsMouseOver를 트리거에서 사용하는 속성으로 만들기: 속성을 IsMouseOver로 변경합니다. IsMouseOver 속성이 true인 경우(사용자가 마우스로 단추를 가리키는 경우) 속성 트리거가 활성화됩니다.
IsMouseOver는 glassCube에 대해 100%의 불투명도 트리거:트리거 기록이 켜진 것을 확인합니다(이전 그림 참조). 기록 도중 glassCube의 속성 값을 변경하면 IsMouseOver가 true일 때 변경이 이루어집니다. 기록하는 동안 glassCube의 Opacity를 100%로 변경합니다.

이제 첫 번째 속성 트리거를 만들었습니다. 편집기의 트리거 패널에서 Opacity가 100%로 변경되는 것이 기록되었습니다.

F5 키를 눌러 애플리케이션을 실행하고 마우스 포인터를 단추 위에 둔 다음 단추 밖으로 둡니다. 단추 위에 마우스 포인터를 두면 유리 레이어가 표시되고 포인터가 벗어나면 사라집니다.
IsMouseOver가 스트로크 값 변경을 트리거: 다른 작업을 IsMouseOver 트리거와 연결해 보겠습니다. 기록이 계속되는 동안 선택 영역을 glassCube에서 outerRectangle로 전환합니다. 그런 다음 outerRectangle의 Stroke를 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"의 사용자 지정 식으로 설정합니다 이렇게 하면 Stroke가 단추에서 사용되는 일반적인 강조 색상으로 설정됩니다. F5 키를 눌러 단추 위로 마우스를 놓을 때의 효과를 확인합니다.
IsMouseOver가 흐릿한 텍스트를 트리거:IsMouseOver 속성 트리거에 작업을 하나 더 연결해 보겠습니다. 유리가 그 위에 나타나면 단추의 콘텐츠가 약간 흐릿하게 표시되도록 합니다. 이를 위해 흐리게 BitmapEffect를 ContentPresenter(myContentPresenter)에 적용할 수 있습니다.

참고

속성 패널을 BitmapEffect를 검색하기 전의 상태로 되돌리려면 검색 상자에서 텍스트를 지웁니다.

이 시점에서는 여러 연결된 작업에 속성 트리거를 사용하여 마우스 포인터가 단추 영역으로 들어오고 나갈 때에 대한 강조 표시 동작을 만들었습니다. 단추의 또 다른 일반적인 동작은 포커스가 있을 때(클릭 후와 같이) 강조 표시하는 것입니다. IsFocused 속성에 대한 다른 속성 트리거를 추가하여 이러한 동작을 추가할 수 있습니다.
IsFocused에 대한 속성 트리거 만들기:IsMouseOver와 동일한 절차(이 섹션의 첫 번째 단계 참조)를 사용하여 IsFocused 속성에 대한 다른 속성 트리거를 만듭니다. 트리거 기록이 켜진 상태에서 트리거에 다음 작업을 추가합니다.
- glassCube는 100%의 Opacity를 가져옵니다.
- outerRectangle은 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"라는 Stroke 사용자 지정 식 값을 가져옵니다.

이 연습의 마지막 단계로 단추에 애니메이션을 추가합니다. 이러한 애니메이션은 이벤트, 특히 MouseEnter 및 Click 이벤트에 의해 트리거됩니다.

이벤트 트리거 및 애니메이션을 사용하여 대화형 작업 추가

MouseEnter 이벤트 트리거 만들기: 새 이벤트 트리거를 추가하고 MouseEnter를 트리거에서 사용할 이벤트로 선택합니다.
애니메이션 타임라인 만들기: 다음으로, 애니메이션 타임라인을 MouseEnter 이벤트에 연결합니다.

확인을 눌러 새 타임라인을 만든 이후 타임라인 패널이 표시되고 디자인 패널에 "타임라인 기록 켜짐"이 표시됩니다. 즉, 타임라인에서 속성 변경 내용 기록을 시작할 수 있습니다(속성 변경 내용에 애니메이션 효과 적용).

참고

디스플레이를 보려면 창 및/또는 패널의 크기를 조정해야 할 수 있습니다.
키 프레임 만들기: 애니메이션을 만들려면 애니메이션 효과를 주려는 개체를 선택하고, 타임라인에 둘 이상의 키 프레임을 만들고, 이러한 키 프레임에 대해 애니메이션을 보간할 속성 값을 설정합니다. 다음 그림에서는 키 프레임 만들기를 안내합니다.
이 키 프레임에서 glassCube 축소: 두 번째 키 프레임을 선택한 상태에서 크기 변환을 사용하여 glassCube의 크기를 전체 크기의 90%로 줄입니다.

F5 키를 눌러 애플리케이션을 실행합니다. 마우스 포인터를 단추 위로 이동합니다. 유리 레이어가 단추 위에서 축소됩니다.
다른 이벤트 트리거를 만들고 다른 애니메이션 연결: 애니메이션을 하나 더 추가해 보겠습니다. 이전 이벤트 트리거 애니메이션을 만드는 데 사용한 것과 유사한 절차를 사용합니다.
1. Click 이벤트를 사용하여 새 이벤트 트리거를 만듭니다.
2. 새 타임라인을 Click 이벤트와 연결합니다.
3. 이 타임라인의 경우 0.0초에서 1개, 0.3초에서 1개, 총 2개의 키 프레임을 만듭니다.
4. 0.3초의 키 프레임이 강조 표시되면 회전 변환 각도를 360도로 설정합니다.
5. F5 키를 눌러 애플리케이션을 실행합니다. 이 단추를 클릭합니다. 유리 레이어가 회전합니다.

결론

사용자 지정 단추를 완료했습니다. 애플리케이션의 모든 단추에 적용된 단추 템플릿을 사용하여 이 작업을 수행했습니다. 템플릿 편집 모드를 종료(다음 그림 참조)하고 더 많은 단추를 만들면 기본 단추가 아닌 사용자 지정 단추와 같은 모습으로 동작하는 것을 볼 수 있습니다.

F5 키를 눌러 애플리케이션을 실행합니다. 단추를 클릭하고 모두 동일하게 동작하는지 확인합니다.

템플릿을 사용자 지정하는 동안 innerRectangle의 Fill 속성 및 outerRectangle의 Stroke 속성을 템플릿 배경({TemplateBinding Background})으로 설정해야 합니다. 이로 인해 개별 단추의 배경색을 설정할 때 설정한 배경이 해당 속성에 사용됩니다. 지금 배경을 변경해 보세요. 다음 그림에서는 다른 그라데이션이 사용됩니다. 따라서 템플릿은 단추와 같은 컨트롤의 전반적인 사용자 지정에 유용하지만 템플릿이 있는 컨트롤을 서로 다르게 보이도록 수정할 수 있습니다.

결론적으로 단추 템플릿을 사용자 지정하는 과정에서 Microsoft Expression Blend에서 다음을 수행하는 방법을 알아보았습니다.

컨트롤의 모양을 사용자 지정합니다.
속성 트리거를 설정합니다. 속성 트리거는 컨트롤뿐만 아니라 대부분의 개체에서 사용할 수 있으므로 매우 유용합니다.
이벤트 트리거를 설정합니다. 이벤트 트리거는 컨트롤뿐만 아니라 대부분의 개체에서 사용할 수 있으므로 매우 유용합니다.
애니메이션을 만듭니다.
기타: 그라데이션을 만들고, BitmapEffect를 추가하고, 변환을 사용하고, 개체의 기본 속성을 설정합니다.

다음을 통해 공유