티스토리 뷰

Development/WPF

김형준님의 스타일 그리고 템플릿(Style, Template) - {2/3}

알 수 없는 사용자 2008. 5. 27. 12:43
반응형
스타일 그리고 템플릿(Style, Template) - {2/3}
이제 앞에서 작성한 기본 코드에 스타일과 템플릿을 적용해 보도록 하자. 가장 먼저 할 일은 두개의 TextBlock의 스타일을 개선해보도록 하자. 즉, My Photos라는 문자열과 Check out my ew photos!라는 문자열의 모양을 개선해 보자.

먼저 <Window.Resources> ~ </Window.Resources>안에 다음 스타일 지정 태그를 추가하고 실행해보자.

<Style TargetType="TextBlock">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
</Style>
https://tistory1.daumcdn.net/tistory/87291/skin/images/blank.png
실행 결과를 보면 알겠지만, 먼저 모든 글자에 대한 폰트가 Comic Sans MS로, 크기는 14로 변경되었다. 또한 TextBlock의 경우 수평정렬이 중앙으로 되어 있다. 그런데 의아한 것은 ListBox의 글자까지 변경되었다는 것이다. 이것은 ListBox를 구성하고 아이템들이 TextBlock으로 되어져 있기 때문에 그 영향을 받는 것이다.

이런 결과가 나오게 된 이유는 앞에 추가한 XAML 코드에서 <Style> 태그의 영향 때문이다. Style 태그의 TargetType에 TextBlock로 되어 있으므로 XAML 코드의 해당 TextBlock은 모두 지정한 스타일에 맞춰 그려지게 되는 것이다.

이제 "My Photos"라는 TextBlock의 스타일만을 다르게 지정해보자. 마찬가지로 <Window.Resources> 태크 안에 아래의 코드를 추가한다.

<Style BasedOn="{StaticResource {x:Type TextBlock}}"
       TargetType="TextBlock"
       x:Key="TitleText">
  <Setter Property="FontSize" Value="26"/>
  <Setter Property="Foreground">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.0" Color="#0000FF" />
          <GradientStop Offset="1.0" Color="#000000" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>
이 <Style> 태크의 속성 중 BaseOn은 앞에서 정의한 모든 TextBlock에 해당하는 스타일의 속성을 기반으로 한다는 의미이다. 그리고 이 스타일의 식별 Key를 "TitleText"라고 지정해 둠으로써 원하는 TextBlock이 이 Key 값을 적용해서 스타일을 바꿀수 있는 것이다. 즉, 기존의 "MyPhotos" 값을 갖는 <TextBlock>를 아래처럼 변경해 준 뒤에 실행해보자.

<TextBlock Name="textblock1" 
           Style="{StaticResource TitleText}">My Photos
</TextBlock>
https://tistory1.daumcdn.net/tistory/87291/skin/images/blank.png
자, 이제는 ListBox에 있는 jpg 파일을 파일 경로명이 아닌 이미지로 표현해보도록 하자. 역시 <Window.Resources> 태그 안에 아래의 코드를 추가한다.

<DataTemplate DataType="{x:Type local:Photo}">
  <Border Margin="10">
    <Image Source="{Binding Source}"/>
  </Border>
</DataTemplate>
이번엔 <Style>이 아닌 <DataTemplate>이다. 데이터 템플릿은 속성인 DataType으로 지정된 데이터에 대해서 어떤식으로 표현할 것인지에 대한 템플릿을 지정하는 것이다. 이 경우 우리가 처음에 만들어 놓은 Photo 클래스에 대한 데이터 템플릿으로 Photo의 ToString으로 얻어온 문자열(jpg 파일명)을 Image로 표현하라는 XAML 코드이다. 실행 결과는 아래와 같다.

https://tistory1.daumcdn.net/tistory/87291/skin/images/blank.png
이쯤이면 대체로 만족할 만한 결과가 나타나기 시작하는 것이 보이는데, 이제 좀더 세련되게 꾸며 보도록 하자. 이러한 과정이 WPF가 제공하는 매력적인 요소중에 하나이니 말이다.

출처 : http://www.gisdeveloper.co.kr
반응형
댓글