IntroToStylingAndTemplating
이 샘플은 스타일을 사용하여 시각적으로 매력적인 사용자 환경을 만드는 방법을 보여주기 위해 디자인 된 간단한 사진 응용 프로그램입니다.
Pohoto Class
이미지 경로를 가지는 모델 클래스를 정의 합니다.
1: public class Photo
2: {
3: public Photo(string path)
4: {
5: Source = path;
6: }
7: public string Source { get; }
8: public override string ToString()
9: {
10: return Source;
11: }
12: }
PhotoList Class
속성 변경 시 알림 제공을 위해 ObservableCollection<T> 클래스를 상속 받는 Collection을 정의 합니다. PhotoList 클래스는 디렉토리가 경로가 설정 될 때 경로의 jpg파일을 갱신 합니다.
1: public class PhotoList : ObservableCollection<Photo>
2: {
3: private DirectoryInfo _directory;
4: public PhotoList()
5: { }
6: public PhotoList(string path) : this(new DirectoryInfo(path)) { }
7: public PhotoList(DirectoryInfo directory)
8: {
9: _directory = directory;
10: Update();
11: }
12: public string Path
13: {
14: set
15: {
16: _directory = new DirectoryInfo(value);
17: Update();
18: }
19: get { return _directory.FullName; }
20: }
21: private void Update()
22: {
23: foreach (var f in _directory.GetFiles("*.jpg"))
24: {
25: Add(new Photo(f.FullName));
26: }
27: }
28: }
Window.Loaded 이벤트
ObjectDataProvider를 Window.Resources로 선언하고 비하인드 코으에서 ObjectDataProvider를 검색하여 프로젝트의 바이너리 리소스의 상대 경로를 지정 합니다. 이 때 해당 경로의 *.jpg 파일을 모두 읽어 Photo 객체를 생성 및 추가 합니다.
1: <Window.Resources>
2: <ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}" />
3: </Window.Resources>
1: private void Window_Loaded(object sender, RoutedEventArgs e)
2: {
3: // XAML에 정의된 ObjectDataProvider를 가져 옵니다.
4: _photos = (PhotoList)(Resources["MyPhotos"] as ObjectDataProvider).Data;
5: _photos.Path = @"..\..\Images";
6: }
1: <StackPanel Margin="10">
2: <TextBlock Name="textblock1">My Pictures</TextBlock>
3: <TextBlock>Check out my new pictures!</TextBlock>
4: <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
5: Background="White" Width="600" Margin="10" SelectedIndex="0" />
6: </StackPanel>
 |
| 바인딩 결과 |
이 예제는 이미지가 ListBoxItem으로 추가 되어야 하지만 Photo 클래스의 ToString 메소드를 암시적으로 호출 하는 것을 볼 수 있습니다.
DataTemplate
ItemsControl을 상속하는 Control은 DataTemplate를 이용해 Item의 모양을 사용자 정의 할 수 있습니다. 이 예제는 Photo.Path 속성을 이용해 이미지를 표현 합니다.
1: <!-- 경로의 텍스트 문자열 대신 이미지로 이미지를 표시하는 DataTemplate -->
2: <DataTemplate DataType="{x:Type local:Photo}">
3: <Border Margin="3">
4: <Image Source="{Binding Source}" />
5: </Border>
6: </DataTemplate>
 |
| 바인딩 결과 |
TextBlock Style 적용
Control 형식 지정을 통해 Style을 적용하거나, Style의 Key를 이용해 명시적으로 설정할 수 있습니다. 이 예제는 위에 설명한 두 방법과 Style 상속을 적용하는 부분도 볼 수 있습니다.
Style TextBlock 타입 지정
1: <!-- 모든 TextBlocks에 영향을주는 스타일 -->
2: <Style TargetType="TextBlock">
3: <Setter Property="HorizontalAlignment" Value="Center" />
4: <Setter Property="FontFamily" Value="Comic Sans MS" />
5: <Setter Property="FontSize" Value="14" />
6: </Style>
Style TextBlock 타입 상속
1: <!-- 이전 TextBlock 스타일을 확장하는 스타일 -->
2: <!-- 이것은 TitleText의 x : Key가있는 "명명 된 스타일"입니다. -->
3: <Style BasedOn="{StaticResource {x:Type TextBlock}}"
4: TargetType="TextBlock"
5: x:Key="TitleText">
6: <Setter Property="FontSize" Value="26" />
7: <Setter Property="Foreground">
8: <Setter.Value>
9: <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
10: <LinearGradientBrush.GradientStops>
11: <GradientStop Offset="0.0" Color="#90DDDD" />
12: <GradientStop Offset="1.0" Color="#5BFFFF" />
13: </LinearGradientBrush.GradientStops>
14: </LinearGradientBrush>
15: </Setter.Value>
16: </Setter>
17: </Style>
Style 적용
1: <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
2: <TextBlock>Check out my new pictures!</TextBlock>
 |
| TextBlock Style 적용 |
ListBox ControlTemplate
Style을 이용해 ControlTemplate를 사용자 정의 하여 ListBoxItem을 수평으로 정렬하도록 합니다.
1: <!-- 가로 ListBox 컨트롤 템블릿-->
2: <Style TargetType="ListBox">
3: <Setter Property="Template">
4: <Setter.Value>
5: <ControlTemplate TargetType="ListBox">
6: <Border CornerRadius="5" Background="{TemplateBinding Background}">
7: <ScrollViewer HorizontalScrollBarVisibility="Auto">
8: <StackPanel Orientation="Horizontal"
9: VerticalAlignment="Center"
10: HorizontalAlignment="Center"
11: IsItemsHost="True" />
12: </ScrollViewer>
13: </Border>
14: </ControlTemplate>
15: </Setter.Value>
16: </Setter>
17: </Style>
 |
| 이미지 가로 정렬 |
ListBoxItem Style
ListBoxItem 모양을 Style로 정의해 일괄 적용하고, 속성 및 이벤트에 변경이 생겼을 경우 Trigger를 이용해 처리 할 수 있습니다.
1: <Style TargetType="ListBoxItem">
2: <Setter Property="Opacity" Value="0.5" />
3: <Setter Property="MaxHeight" Value="75" />
4: <Style.Triggers>
5: <Trigger Property="IsSelected" Value="True">
6: <Trigger.Setters>
7: <Setter Property="Opacity" Value="1.0" />
8: </Trigger.Setters>
9: </Trigger>
10: <EventTrigger RoutedEvent="Mouse.MouseEnter">
11: <EventTrigger.Actions>
12: <BeginStoryboard>
13: <Storyboard>
14: <DoubleAnimation Duration="0:0:0.2"
15: Storyboard.TargetProperty="MaxHeight"
16: To="90" />
17: </Storyboard>
18: </BeginStoryboard>
19: </EventTrigger.Actions>
20: </EventTrigger>
21: <EventTrigger RoutedEvent="Mouse.MouseLeave">
22: <EventTrigger.Actions>
23: <BeginStoryboard>
24: <Storyboard>
25: <DoubleAnimation Duration="0:0:1"
26: Storyboard.TargetProperty="MaxHeight" />
27: </Storyboard>
28: </BeginStoryboard>
29: </EventTrigger.Actions>
30: </EventTrigger>
31: </Style.Triggers>
32: </Style>
댓글
댓글 쓰기