Silverlight 실버라이트 같이 공부하기 - 세번째 시간 (그래픽 모형/브러쉬)

* HOONS닷넷에서 공부한 내용입니다.


실버라이트는 화려하고 편리한 UI를 만들 수 있도록 다양한 드로잉 기능들을 제공합니다.

애플리케이션의 UI를 만들기 위해서는 제공된 기본 컨트롤 뿐만 아니라, 사각형, 타원, 그리고 패스와 같이 보다 낮은 수준의 엘리먼트들을 제공하고 있어 원하는 형태의 모양을 만들 수 있습니다. 또 칠 (Brush)와 변형(Transform)과 같이 구현이 매우 어려운 드로잉 기법들을 간단한 XAML 엘리먼트를 선언하는 것만으로 구현이 가능하도록 합니다.

여기서 잠깐
XMAL 이란?

XAML은 닷넷 프레임워크 3.0 기술에, 특히 윈도 프레젠테이션 파운데이션(WPF), 윈도 워크플로 파운데이션(WF)에 널리 쓰인다. WPF에서 XAML은 사용자 인터페이스 마크업 언어로 쓰이면서 사용자 인터페이스의 요소, 데이터 바인딩, 이벤트 등의 기능을 정의한다. 윈도 워크플로 파운데이션에서 워크플로는 XAML을 사용하여 정의할 수 있다.

XAML 요소는 공통 언어 런타임 객체 인터페이스에 직접 매핑할 수 있지만 XAML은 공통 언어 런타임 속성과 이벤트를 해당 객체로 매핑하는 데 사용한다. XAML 파일은 마이크로소프트 익스프레션 블렌드, 마이크로소프트 비주얼 스튜디오, 호스팅 가능한 윈도 워크플로 파운데이션 비주얼 디자이너와 같은 시각 디자인 도구로 만들고 편집할 수 있다. 표준 문서 편집기, XAMLPad와 같은 코드 편집기, Vectropy와 같은 그래픽 편집기로 만들어 편집할 수도 있다.

XAML을 추가하거나 그것으로 만든 어떠한 것이든 C#, 비주얼 베이직 닷넷과 같은 기존에 쓰여왔던 닷넷 언어를 사용하여 표현할 수 있다. 그러나 이 기술의 주된 측면은 XML 기반이기에 XAML을 처리하는 도구에 필요한 복잡성을 줄이는 것이다.^[3] 그 결과 다양한 제품이 XAML 기반의 응용 프로그램을 만들 수 있는(특히 윈도 프레젠테이션 파운데이션) 공간에서 등장하고 있다. XAML은 단순히 XML 기반이므로 개발자들과 디자이너들은 컴파일을 하지 않아도 그들 사이에서 콘텐츠를 자유로이 공유하고 편집할 수 있다.

그래픽의 첫번째,

모형(Shape)

시실버라이트는 간단한 모형을 그릴 수 있는 컨트롤들을 제공합니다.

속성	설명
fill	모양의 내부를 그리는 brush 개체를 설정 &반환
stroke	모양의 외곽선을 그리는 brush 개체를 설정 &변환
stretch	모양의 늘림 형태를 설정하거나 반환합니다.
strokeThickness	모양 외곽선의 굵기를 설정& 반환

Rectangle

Regtablgle컨트롤은 화면에 사각형을 표시하는 컨트롤
XAML 코드

조금 더 쉽게 하기 위해서 Expression Blend로 한번 Rectangle을 만들어보겠습니다.

코드파일에서 오른쪽 클릭 후 '익스프레션 블렌드'에서 열기를 누르시면 Rectangle, Ellipes, Line 모두 쉽게 마우스로 만들어 볼 수 있습니다.

익스프레션 블렌드에서 편집 후 'F5'를 누르면 편집한 화면을 출력하게 됩니다.

다시 Visual Studio 2010으로 돌아오게 되면, 외부에서 편집이 되었는데 불러오겠냐는 질문이 뜨게 되고, 예를 선택하게 되면,
아래 그림과 같이 익스프레션 블렌드에서 편집한 화면이 불러져 오는 것을 알 수 있습니다.

브러쉬(Brush)

브러쉬는 여러분도 많이 들어보셨을 겁니다. 말 그대로 무언가를 칠하는 것을 이야기 합니다. 일단 칠할 영역이 대부분 Fill과 Stroke영역입니다.
이 브러쉬에도 여러가지 방법이 있는데,

SolidColorBrush - 말그대로 단색을 칠하는 브러쉬입니다.
GradientBrush - 말그대로 서서히 색이 변화하는 브러쉬입니다.
ImageBrush - 말그대로 이미지를 칠하는 브러쉬
VideoBrush - 가장 흥미로운 플레이 되고 있는 동영상의 특정영역에 칠할 수 있는 브러쉬 입니다.


Brush
 →SolidColorBrush
 →GradientBrush
        →LinearGradientBrush
        →RadialGradientBrush
 →TileBrush
        →VideoBrush
        →ImageBrush

위와 같은 Brush 클래스는 계층구조를 가지게 됩니다.


◆SolidColorBrush

    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Width="100" Height="100">
             <Rectangle.Fill>
               
                <SolidColorBrush Color="Red"/>
               
            </Rectangle.Fill>
           
           
        </Rectangle>
    </Grid>

위와같이 편리하게 익스프레션 블렌드로도 Fill속성을 더욱 효율적으로 바꿔줄수가 있습니다.




◆GradientBrush


 하얀색과 같이 제일 위에 사각형이 그라디언트 속성이고, 그 아래에서 스포이드를 찍으면 원하는 색깔을 지정할 수 있습니다.
마지막에 있는 하얀 상자안에 있는 클릭 지점은 처음 지점과 마지막 지점을 선택할 수 있는 속성입니다.

그라디언트의 방향의 경우 오른쪽 툴박스에 있는 연두색 박스의 아이콘을 클릭 한후 본인이 원하는 방향으로 바꿀 수 있습니다.

그라디언트 안의 색깔을 바꾸자 할 때에는 Fill 속성의 원하는 지점 선택 후 색상표에서 색깔을 바꾸 실 수 있습니다.



◆ImageBrush

이미지 브러쉬는 소스가 되는 이미지를 가지고 개체를 그리는 역할을 합니다. ImageBrush를 통해 TextBlock의 글자를 이미지로 채우도록 지정할 수 있습니다.

 <Grid x:Name="LayoutRoot" Background="White">
                <TextBlock Canvas.Top="22"
                   FontFamily="Verdana"
                   FontSize="72"
                   FontStyle="Italic"
                   FontWeight="Bold"
                   Canvas.Left="23">
                           
               <TextBlock.Foreground>
                  <ImageBrush ImageSource="ksj09.jpg"/>
            </TextBlock.Foreground>
                <Run Text="ksj09"/>
           
        </TextBlock>    </Grid>

 ImageBrush의 속성 ImageSourch는 바탕이 되는 이미지를 바꾸어 줄 수 있습니다. 
 

두번째 시간에서 계속됩니다^^!