[C#] WPF에 있는 imageBox를 활용해보자

 안녕하세요. 진득코딩입니다. WPF에서 지원하는 Tool들이 굉장히 많습니다. 이러한 Tool들을 모두 다 활용할 수는 없지만 많이 사용되는 것들을 살펴보면서 사용해보는 시간을 가져보겠습니다. 이번 시간에는 imageBox를 활용하여 이용하여 보겠습니다.

WPF 도구상자 목록

 WPF에는 위와 같이 많은 도구 상자들이 있습니다. 이 중에서 이번 시간에는 imageBox를 중점적으로 활용해보도록 하겠습니다.

imageBox를 활용해보자

 왼쪽에 있는 도구상자를 클릭해서 image를 drag&drop하면 위와 같이 화면에 imageBox가 할당됩니다. 저 위치에 이미지를 넣을 수 있습니다.

 해당 imageBox에 사진을 넣는 것은 로컬에 있는 사진을 넣는 방법을 사용하였습니다. 프로젝트에 우클릭하여 추가>기존 항목을 눌러서 이미지 파일을 추가해줍니다. 또는 그냥 해당 이미지를 원하는 위치에 drag&drop을 하게 되면 같은 기능을 하게 됩니다. 그 이후 Image 태그에 Source를 추가해서 해당 위치에 이미지의 경로를 써주시면 됩니다.

 필자는 위와 같이 했을 때 미리보기에서는 이미지가 나타났지만 실행을 했을 때에는 이미지가 없었습니다. 이때 해결하는 방법은 프로젝트 우클릭 > 추가 > 새 항목을 선택하고 C# 항목중에서 리소스 파일을 생성해줍니다. 그 후 생성된 파일을 열고 상단에 리소스 추가하고 경로에 있는 이미지 파일을 선택합니다. 그 이후 해당 이미지의 속성에 들어가서 빌드 작업을 Resource로 변경하면 실행했을 때에도 이미지가 나오게 됩니다.

Uri와 Build Action

 코드를 사용하여 이미지를 변경할 수도 있습니다. ImageBox를 사용해야하기 때문에 미리 imageBox의 이름을 지정해주시고 시작하시는 것이 좋습니다. 이때 Uri라는 새로운 문법이 나오게 되는데 Uri가 어떤 친구인지 살펴보도록 하겠습니다.

 Uri 클래스의 정의를 살펴보면 URI(Uniform Resource Indentifier)의 개체 표현을 제공하며 URI 부분에 쉽게 액세스할 수 있도록 하는 클래스라고 나옵니다. URI는 Uniform Resource Identifier의 약자로 프로그램 개발에 필요한 자원을 식별하는 역할을 합니다. 우리에게 친숙한 URL은 URI의 위치를 나타내는 역할을 합니다.

 Uri를 사용할 때에는 상대 경로, 절대 경로, 혹은 둘 다 사용하는 총 세 가지 조건을 옵션으로 줄 수 있습니다. 파일 경로의 경우 옵션이 반드시 필요합니다. Relative는 상대 경로, Absolute는 절대 경로, RelativeOrAbsolute는 둘 다 사용하는 조건입니다.

 해당 파일의 Build Action을 살펴보면 여러 항목 중에 하나를 선택할 수 있습니다. None은 실행 파일 또는 DLL에 포함 되지 않는다는 것이고 Embedded Resource는 DLL에 포함되고 GetManifestResourceSteream으로 불러오는 항목입니다. 저희가 사용할 항목은 Resource로 위에서 살펴본 URI를 통해서 불러오는 항목입니다.

버튼 이미지 바꾸기 예제

 간단한 버튼 이미지를 바꾸는 예제를 통해서 배운 내용들을 살펴보도록 하겠습니다. 일단 bool 타입으로 image를 선언해주고 각각의 이미지에 Uri로 선언을 해줍니다. 그리고 생성자에 각각의 Uri에 @"pack://application:,,,"을 사용하여 경로를 설정해줍니다. UriKind를 사용하여 해당 경로가 절대 경로임을 명시해주었습니다.

 해당 버튼을 눌렀을 때의 이벤트입니다. if문을 사용하여 image_btn_hamburger가 true라면 new ImageBrush(new BitmapImage(this.uriHamburgerImage));를 사용하여 이미지를 불러 온 후 해당 버튼의 background에 넣어줍니다. 반대로 ImageBox에는 OnlyHamburgerImage를 넣어줍니다. 버튼에는 Bitmap으로 불러온 후에 Brush에 넣어서 해줘야 하고 ImageBox에는 그냥 Bitmap으로 불러와서 넣어주시면 됩니다. 그 후 bool을 false로 바꿔서 다시 눌렀을 때에는 반대로 바뀌도록 해줍니다. else에는 if문의 반대로 해주시면 됩니다.

 위와 같이 코드를 작성하게 되면 햄버거 세트 이미지가 버튼을 누르게 되면 단품으로 바뀌게 되고 버튼이 세트 사진으로 바뀌게 됩니다.

이미지 크기에 맞는 버튼 구현 실습

실습 결과부터 살펴보겠습니다. 실행하게 되면 버튼이 있고 해당 버튼을 누르게 되면 FileDialog가 나타나게 됩니다.

 위와같이 FileDialog에서 원하는 이미지를 선택한 후에 열기를 선택하게 되면 해당 버튼의 이미지가 선택한 이미지로 바뀌게 됩니다. 이때 버튼의 크기는 사진의 크기와 같아집니다.

 시연을 보았으니 이번에는 코드를 살펴보도록 하겠습니다. xaml의 Grid 태그만 살펴보겠습니다. button 태그 안에 image 태그가 있고 button 태그에는 Click 이벤트가 있는 것을 확인할 수 있습니다.

.cs를 살펴보도록 하겠습니다. .cs에 있는 버튼 클릭 이벤트에 Dialog를 생성해줍니다. 그 이후 다중 파일을 선택할 수 있도록 Multiselect를 true로 바꿔주었습니다. Filter에는 이미지 파일만 들어갈 수 있도록 jpeg, png, jfif 항목을 선택할 수 있게 해두었습니다. 마지막으로 FileDialog가 켜질 때의 기본 디렉토리로 현재 사용자의 "문서" 폴더를 설정해주었습니다.

 위에 설정된 opendialog를 이용하여 new Uri에 넣어서 bitmap을 설정해주었습니다. 해당 비트맵을 소스로 설정해주고 가로와 세로 길이를 각각 버튼 크기에 넣어줘서 사진의 크기에 맞게 버튼의 크기를 조절할 수 있도록 해주었습니다.

---

 이번 시간에는 WPF의 여러 도구 상자 중에서 imageBox에 대해서 살펴보았습니다. 다음 시간에는 다른 도구 상자에 대해서 살펴보도록 하겠습니다. 끝까지 봐주셔서 감사합니다.😀