[2006/06]-[7] 클립아트를 조립해보자!

지난 시간에 그래픽 디자이너를 통한 이미지 객체를 그려 XAML로 만드는 과정을 배웠습니다.
이번 시간에는 ResourceDictionary 객체를 사용하여 클립아트들을 조립하는 방법을 배워 보겠습니다.

아래 그림을 보시면 여러 클립아트들이 모여 한 장면을 이루고 있는 XAML파일을 볼 수 있습니다.
FerryScene.xaml

클립아트들은 각각의 z-order. 값으로 표현되어 원근감을 나타냅니다. 페리호가 아주 가까이 있는것처럼 보이게도 하고, 멀리 보이게도 하지요.

<Viewbox VerticalAlignment="Top">
  <Canvas Height="600" Width="1024">

    <!-- Sky and Water -->
    <StackPanel ... />

    <!-- Clouds -->
    <Image Canvas.Top='100' Canvas.Left='100' ... />

    <!-- Freighter -->
    <Image Canvas.Top='270' Height="35" ... />

    <!-- WPF Banner -->
    <TextBlock Canvas.Top ='410' FontSize='22' ... />

    <!-- Ramp -->
    <Rectangle Width="4" Height="60" Margin="12,0,0,5" ... />

    <!-- Ferry Dock -->
    <Image Canvas.Top='375' Height="88" ... />

    <!-- Ferry -->
    <Image Canvas.Top='333' Height="120" ... />

  </Canvas>
</Viewbox>

Referencing Resources
구름은 DrawingImage 객체를 참조하고 x:Key에 Clouds 라고 값을 부여 했습니다.

<StackPanel.Resources>
  <ResourceDictionary>
    ...
    <DrawingImage x:Key="Clouds">
      <DrawingImage.Drawing ... />
    </DrawingImage>
    ...
  </ResourceDictionary>
</StackPanel.Resources>

리소스에 저장하기 전에 아래 노란색 라인을 추가하면 다른 UI에서도 사용이 가능해 집니다.

<!-- Clouds -->
<Image
  Canvas.Top='100'
  Canvas.Left='100'
  Height="80"
  Source="{StaticResource Clouds}" >

이 Source 속성은 StaticResource 를 참조하고 x:Key 값을 사용합니다.Canvas.Top 과 Canvas.Left 속성은 위치값을 설정합니다.
Height 속성값을 설정하면 이미지의 크기를 자동적으로 바뀌게 합니다.

다른 리소스에서 리소스로 참조하기
XAML은 다른 리소스에서도 참조가 가능합니다.
CloudBrush x:Key값은 LinearGradientBrush 리소스입니다.
이 브러시는 GeometryDrawing 객체에 사용되어 구름을 그릴 수 있습니다.

<StackPanel.Resources>
  <ResourceDictionary>

    <LinearGradientBrush x:Key="CloudBrush"
      StartPoint="0,0.5" EndPoint="1,0.5">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="#FFA8B1C2" Offset="0"/>
        <GradientStop Color="#FFF0F0F0" Offset="0.619141"/>
        <GradientStop Color="#FFE0E7F5" Offset="1"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <DrawingImage x:Key="Clouds">
      <DrawingImage.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing
              Brush="{StaticResource CloudBrush}"... />
            <GeometryDrawing
              Brush="{StaticResource CloudBrush}"... />
            <GeometryDrawing
              Brush="{StaticResource CloudBrush}"... />
          </DrawingGroup.Children>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>

  </ResourceDictionary>
</StackPanel.Resources>

이렇게 자주 사용하는 리소스들을 정의하여 서로서로 참조해서 사용하는 것이 XAML 사이즈를 축소시키는 노하우가 되겠지요. ^^

Viewbox 사용하기자 이제 클립아트들을 조립해서 하나의 큰 조각이 된 Canvas 객체를 다시 Viewbox 객체에 넣어 봅시다.

<Viewbox>
  <Canvas Height="600" Width="1024" ... />
</Viewbox>

쉽게 설명해서 Canvas가 SDI 폼이라면 ViewBox는 MDI 폼입니다.
하나의 완성된 Canvas를 ViewBox에 넣어 그놈을 다시 사이즈를 줄였다 늘였다 하는둥의
작업을 할 수가 있고, 여러개의 Canvas를 넣어 차례차례 볼수도 있지요.

아래 그림은 Canvas를 ViewBox에 넣어 윈도우 사이즈를 작게 만든 겁니다.
사이즈가 같이 잘 작아지죠? ^^

- Lorin 씀.