비주얼 스튜디오 버튼꾸미기

클릭해서 다른페이지로 넘어가거나, 이미지를 보여줄때 가장 많이 사용하는 버튼을 꾸며보겠습니다.
왼쪽에 있는 툴에서 버튼을 클릭+드레그 하여 Grid 로 끌고 옵니다.
버튼의 기본버젼은 이렇게 회색네모에 버튼 이라고 적혀있습니다.

디자인은 간단히 속성 (Property) 에서 변경할 수 있습니다.
브러시를 펼치면 이러한 세부속성이 나타납니다.

Background : 버튼의 배경색
BorderBrush : 버튼의 가장자리 테두리 색
Foreground : 버튼위의 텍스트 색
Opacity Mask : 버튼의 투명마스크

Opacity Mask 밑의 그림들은 왼쪽부터 
브러시없음, 색상선택, 그라디에이션 색상선택, 이미지 선택, 기본설정된 색상선택 

누를때마다 결과가 바로 버튼에 보이기 때문에 쉽게 이해하실 수 있습니다.

레이아웃은 버튼의 크기나 위치를 설정 할 수 있습니다. 

텍스트는 버튼위의 텍스트의 글꼴,크기 등을 설정할 수 있습니다. 

모양은 버튼의 투명도와 보여지는 여부를 설정할 수 있습니다.

공용의  Content 를 이용하여 버튼위의 텍스트를 쉽게 수정할 수 있습니다.

 

기본의 버튼에서 조금 벗어나, 버튼을 네모가 아닌 다른 모양으로 하고자, 버튼에 이미지를 넣는 경우를 예를 들어보겠습니다.

브러시의 Background 에서 미리 저장해 두었던 ImageSource 를 불러왔습니다.

버튼이 불러온 이미지에 맞게 디자인이 변했습니다.  이 상태로 사용해도 되지만, 이 경우에 배경만 이미지로 변경 하였기 때문에 시작 (F5) 를 하여 보면, 버튼자체는 아직 사각형이 되어있습니다.

브러시에서 OpacityMask 를 Background 와 같은 이미지로 변경합니다. 그러면 버튼도 이미지와 같은 모양으로 변경이 됩니다. 

하늘색으로 변하는 이유는 Mouse Over 가 Default 로 설정되어 있기 때문입니다. 

비쥬얼스튜디오 공부하시는 여러분 오늘도 화이팅!! 저도 화이팅!!