티스토리 뷰

반응형

WMF파일을 XAML로 바꾸는 예전 강좌가 기억나시죠?
안 나세요?
그럼 가보세요!!!
WMF 파일을 XAML로 추출하기.

자 그럼 이번에는 이미지를 그려 봅시다.
뭐 당연한 얘기겠지만, 우리가 지금 만드는 이 그림들도 다 WPF 응용프로그램에서 바로 적용해서 쓸수 있습니다.

그럼 시작해 볼까요?

혹시나 해서 파일을 옆에 남기도록 하지요.

 - SkippyImage_1.xaml
 - SkippyImage_2.xaml
 - SkippyImage_3.xaml  


그림을 XAML로 추출하기!
추출방법은 뭐...많이 해보셨죠? 이제? 참 쉽죠?

Graphic Designer XAML Export menu

XAML 형식으로 변환을 누르면 아래 대화상자가 나옵니다.XAML format options in Graphic Designer

위 그림처럼 옵션을 바꿉니다.

대략 옵션설명을 이렇습니다.
 - Document   모든 그림 요소는 하나의 DrawingImage 객체에 그룹화 되어 있습니다.

 - Layers  그림을 그릴때마다 따로다로 레이어로 생성 됩니다. 예를 들어 아래를 보시면 두개의 레이어가 생성되어 있고, 이는 두개의 DrawingImage 객체가 생성된 것입니다.
      Layer List Panel in Graphic Designer


 - Objects   DrawingImage 는 각각 그림요소에서 따로 만들어 집니다.
이 옵션은 복잡한 그림일때 사용하기 좋습니다.

뭐 대부분 그냥 Document 옵션을 잘 사용합니다. 특별한 경우를 제외하곤 말이죠.


파일 살펴보기
그림 객체는 ResourceDictionary 객체를 포함하고 있는 XAML파일에 생성이 됩니다.

x:Key값에 Skippy 메타파일에 있는 값을 부여하고, 이 그림객체를 참조해서 사용 해보겠습니다.

<ResourceDictionary>
  <
DrawingImage x:Key='Skippy'>
    <
DrawingImage.Drawing>
      <
DrawingGroup>
        <
DrawingGroup.Children>
          <
GeometryDrawing ... />
          . . .
        </
DrawingGroup.Children>
      </
DrawingGroup>
    </
DrawingImage.Drawing>
  </
DrawingImage>
</
ResourceDictionary>

DrawingImage 참조
SkippyImage_1.xaml 파일
 
CanVas 객체에 DrawingImage 를 추가 합니다.

<Canvas.Resources>
  <
ResourceDictionary>
    <
DrawingImage x:Key='Skippy'>
      <!--
Drawing objects -->
    </
DrawingImage>
  </
ResourceDictionary>
</
Canvas.Resources
>

이제 그림 객체는 리소스에 저장이 되었고, 다른 UI에서 사용이 가능합니다.
그 소스는 아래와 같습니다.

<Image Height="80" Source="{StaticResource Skippy}" />

<
Image Height="120" Source="{StaticResource Skippy}"
 
Canvas.Left="80"/>

<
Image Height="160" Source="{StaticResource Skippy}"
 
Canvas.Left="200"/>

Height 값을 지정하면 자동으로 이미지는 height값에 맞게 변합니다.
Width 역시 마찬가지지요.
Source 속성은 DrawingImage 의 x:Key값을 참조하며 StaticResource 값에 사용되어 집니다.
Canvas.Left 속성은 그림의 위치를 잡을 때 씁니다.
그림을 여러장 참조하고 싶다면 똑같은 라인을 복사해서 여러개 만들면 됩니다.
Multiple references to DrawingImage resource

그림 버튼 참조SkippyImage_2.xaml이번에는 두개의 버튼 컨트롤에 이미지 객체를 넣어서 사용해 봅시다.

<Button Height="50" Width="50" Padding="2">
  <
Image Source="{StaticResource Skippy}"
/>
</
Button
>

<
Button Height="75" Width="75" Padding="10"
>
  <
Image Source="{StaticResource Skippy}"
/>
</
Button>

Padding 속성은 컨트롤간의 간격을 정할때 사용합니다.

DrawingImage used with a Button control

그림객체의 애니메이션 효과
SkippyImage_3.xaml
이거 또한 지난 강좌에서 했습죠.
움직이는 그림을 만들어 보자. 농구공 튀듯이
이거 보고 하세요 ^^

디자이너 소개
The Expression Designers

- Lorin 씀

(이 사람 블로그 내용도 장난이 아니네요.
WPF SDK 블로그 번역이 다 끝나면 이 사람꺼도 번역한번 도전해 봐야겠네요.
시간이 흐를수록 영어실력이 쌓여 번역을 잘하는게 아니라,
점점 내가 하고싶은 것만 하게되고, 내맘대로 하게 되네요 핫핫핫.
다시 한번 말씀드리지만,
나의 오역에 잘못된 정보를 입수했다면, 그건 당신의 실! 수! )

반응형
댓글