브러쉬를 이용해 배경에 패턴효과 주기(wpf)

시작하면서,
안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)
웹페이지를 만들 때 1px 정도의 이미지를 100%로 늘리면 선이 되거나 면이 되었습니다. 이렇게 만들게 되면 100%로 늘어났을 때의 이미지를 가져다 쓰는 것보다 훨씬 용량이 줄었던 경험이 있어요^^ 요 기능을 Expression Blend에서 써볼께요. 반복되는 배경이미지를 하나 가지고, 일정한 간격으로 패턴화 시키고, 화면사이즈를 늘렸을 때도 유동적으로 패턴이 생기게 됩니다. 일정한 패턴을 배경으로 넣을 때 좋은 팁이라 소개하고자 합니다. 


<브러쉬를 이용해 배경에 패턴효과 주기(wpf)>
:: 화면사이즈가 늘어나도 일정한 패턴의 모양이 생기게 하겠습니다.


<결과물>

화면을 늘렸지만 패턴의 모양은 일정하게 자리잡고 있네요^^


<만드는 과정>
:: 그럼 Expression Blend를 이용해 한번 만들어 보겠습니다!! 


1. 패턴이 될 이미지 만들기

패턴이 될 이미지를 포토샵에서 26px * 26px로 잘랐습니다.
원의 사방좌우로 마진이 5px씩 들어간 이미지니까 최종적으로 패턴으로 만들었을 때 원의 사이는 10px이 되겠네요.
포토샵에서 패턴 이미지를 자를 때 사이 간격을 미리 고민하고 잘라주세요.


2. Expression Blend WPF 열기 

① 프로젝트 생성 시 WPF로 설정해 주세요. 
② ok 버튼을 클릭하세요.


3. 랙텡글 (Rectangle) 화면사이즈를 오토(Auto)로 놓기

① 랙탱글을 레이아웃루트에 넣고,
② 마진값을 모두 0으로 놓습니다.
③ 가로와 세로 사이즈를 모두 Auto가 되도록 버튼을 눌러주세요
- Auto로 놓으면 나중에 창사이즈를 늘려도 고정되지 않고 늘어납니다.


4. 패턴으로 만든 이미지 불러오기 

① 오른쪽 마우스를 누르면
② 팝업창이 활성화 됩니다. Add Existing Item을 누릅니다

① 처음에 만들었던 Brush_1을 선택하고
② 열기를 누릅니다.

위와 같이 이미지 파일이 생기는 것을 볼 수 있습니다.


5. 브러쉬를 이용해 패턴으로 만들기

① 랙탱글을 선택하고 (내가 패턴영역을 주고자 하는 레이어를 선택)
② Fill 영역을 선택합니다.
③ Fill 영역의 아래를 보면

 <- 네번째 버튼을 누릅니다.
④ Expression Blend에 불러온 이미지들을 브러쉬화 시킬 수 있는 창이 나옵니다.

① ImageSource의 화살표를 클릭하면 Expression Blend에서 내가 불러놓은 이미지들이 모두 뜨게 됩니다.
Brush_1.jpg파일을 선택합니다.
② 그러면 Fill 영역에 내가 선택한 이미지가 들어갑니다. 이미지가 브러쉬화 됐어요.
③ 랙탱글의 이미지에도 내가 선택한 이미지가 들어간 모습을 볼 수 있습니다.
 

Stretch 부분을 none으로 주면 이미지 사이즈가 늘어나지 않고 Expression Blend에 불러들여온 원래 이미지 사이즈
즉, 26px * 26px로 바뀌는 것을 볼 수 있습니다.

TileMode를 선택하고 Tile형태로 지정해 줍니다.
TileMode는 기본 바둑판이 출력 영역보다 작을 경우 그리고 있는 영역을 TileBrush로 채우는 방법을 지정하는 값을 가져오거나 설정할 때 쓰인다고 합니다.
그런데 화면상에는 아무 변화가 없습니다. ;;;


6. 화면사이즈에 따라 패턴이 나오도록 약간의 코드를 써보자!
화면상 아무런 변화가 없어  이 부분은 Expression Blend로는 설정하기 어려운 부분인지, 아니면 제가 찾지 못하는 부분인지 좀 더 공부를 해봐야 알 것 같습니다.
그러나 간단한 코드 한줄이면 해결되는 부분이기 때문에 xaml의 코드수정을 설명하겠습니다.^^
혹시 알고 계신 분이 있다면 함께 공유해요!!!

디자인 작업영역 오른쪽에 보면

 버튼을 눌러 xaml 코드와 디자인 작업영역을 동시에 보도록 하겠습니다.
빨간색 네모를 친 부분이 제가 랙탱글의 Fill 영역에 브러시를 넣어준 것을 확인할 수 있습니다.

노란색으로 된 부분에 다음과 같은 코드를 넣어줍니다.
ViewportUnits="Absolute" Viewport="26,26,26,26"

이 부분을 제 나름대로 해석하자면 (ㅋㅋㅋㅋㅋㅋㅋㅋ;)

ViewportUnits

:: TileBrush 내용이 경계선에서 상대적인지 절대적인지를 설정하는 값입니다.
- 우리는 전체 화면의 경계에 상관없이 절대적으로 패턴이 깔리도로 설정하기 위해 Absolute로 설정했습니다.

Viewport

:: 내가 브러쉬한 이미지의 위치와 크기를 조정하는 값입니다
-  우리는 26px * 26px의 이미지를 고정시키기 위해 26,26,26,26의 값을 넣었습니다.
이 값을 이리저리 바꿔보면 의도하지 않은 기하학적인 무늬가 나타납니다.^^



<결과물 다시보기>

화면을 늘렸지만 패턴의 모양은 일정하게 자리잡고 있네요^^


마치면서,
결국 디자이너를 위한 Expression Blend의 tip이 코드로 마무리가 되었습니다.0 0;;;
그래도 간단한 코드는 메모장에 적어서 외워서 이럴 때 짜잔하고 써준다면 개발하시는 분들이 아주아주 좋아하실 것 같습니다.즐거운 협업을 꿈꾸면서ㅋㅋㅋ 퇴 to the 근!!!!!!!