티스토리 뷰
프로그래머들은 자주 스타일과 템플릿에 관한 아래와 같은 질문들을 합니다.
(이 사람 Q&A식 강좌는 해석하기 어렵던데 -0- 난 멀라 ...막 할꺼야~ )
리소스가 뭐에요?
간단하게 얘기하면 리소스는 재사용이 가능한 객체 입니다.
아래 소스를 보면 SolidColorBrush 는 resource에서 사용되고 정의됩니다.
<Window . . .>
<Window.Resources>
<SolidColorBrush x:Key="DarkColorBrush" Color="#454" />
</Window.Resources>
<StackPanel>
<Button Height="40" Width="40" Content="Test"
Background="{StaticResource DarkColorBrush}"/>
<TextBlock Text="Test"
Foreground="{StaticResource DarkColorBrush}"/>
</StackPanel>
</Window>
그럼 스타일은 뭐에요?
스타일은 타입에 의해서 다양하게 공유되는 속성값 세트 입니다.
<Window . . .>
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
</Window.Resources>
<StackPanel>
<!--All TextBlocks instantiated here will have
FontSize of 14 and FontFamily of Comic Sans MS-->
</StackPanel>
</Window>
자세히 말하면 스타일은 속성값 묶음보다는 좀더 큰 개념으로
Triggers, EventTriggers, EventSetters ,Resources 등도 가지고 있지요.
이 객체에 의해 다양하게 적용되는 스타일 패키지를 사용할수 가 있습니다.
스타일과 리소스는 무슨 관계에요?
스타일은 리소스에 의해 사용되어집니다.
인터넷창에서 “inline” 스타일을 사용하고 싶다면 아래 소스를 참고하세요
<Button Content="Inline Style">
<Button.Style>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="Width" Value="100"/>
</Style>
</Button.Style>
</Button>
그러나 보통 스타일은 리소스화 시켜 사용합니다.
<Style TargetType="TextBlock" x:Key="myTextBlockStyle">
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
x:Key를 정의하고 이렇게 사용합니다.
<TextBlock Style="{StaticResource myTextBlockStyle}">TextBlock with Style</TextBlock>
컨트롤템플릿이 뭐죠?
컨트롤의 구조를 정의하고, 형태로 나타내기 위한 것입니다.
버튼 컨트롤을 한번 봅시다.
클릭을 했을 때 발생하는 이벤트는 뒤에서 작업하고 앞에서는 버튼이 눌러지는 모습을 표현해 냅니다.
보여지는 작업, 뒤에서 안보이게 하는 작업 이걸 묶어서 컨트롤템플릿이라고 합니다.
스타일만 바꿔도 이런 효과를 보는 컨트롤들도 찾아보면 있긴 합니다만
컨트롤의 구조나, 속성값의 셋팅 등을 모두 포함하는 컨트롤을 다룰때는 컨트롤템플릿을 사용하는게 좋습니다.
데이타템플릿은 뭐죠?
데이타템플릿은 데이타를 나타내는데 쓰이는 겁니다.
이건 대부분 아이템컨트롤들에 데이타가 바인딩되어 쓸때 씁니다.(ListView, ListBox, TreeView, 등등).
물론 다른 컨트롤에도 쓰일 순 있습니다.
데이타템플릿과 컨트롤템플릿은 무슨 관게인가요?
“content” 라는 데이타가 있다고 합시다.
데이타로 표현하기 위해서는 데이타템플릿을 정의할테고,
컨트롤로 표현하기 위해서는 스타일 또는 컨트롤템플릿을 정의할 겁니다.
일반적으로 데이타템플릿은 컨트롤템플릿보다 더 많이 사용합니다.
이 ListBox 데이타템플릿을 이용하여 데이터를 바인딩 하였습니다.
<ListBox HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource myTasks}}">
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="18"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
</DataTemplate.Resources>
<Grid>
<Ellipse Fill="Silver"/>
<StackPanel>
<TextBlock Margin="3,3,3,0"
Text="{Binding XPath=@Name}"/>
<TextBlock Margin="3,0,3,7"
Text="{Binding XPath=@Priority}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<!--This defines the look of each ListBoxItem-->
<ListBox.ItemContainerStyle>
<Style>
<Setter Property="Control.Width" Value="100"/>
<Setter Property="Control.Margin" Value="5"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
이 방법으로 데이타를 셋팅합니다.
<XmlDataProvider x:Key="myTasks" XPath="Tasks/Task">
<x:XData>
<Tasks xmlns="">
<Task Name="Groceries" Priority="2" Type="Home">
<Description>Pick up Groceries and Detergent</Description>
</Task>
<!-- other Tasks -->
</Tasks>
</x:XData>
</XmlDataProvider>
ListBox에서는 데이타가 어떻게 바인딩 될지만 관리하면 되므로, 컨트롤템플릿은 사용하지 않아도 됩니다.
<Button Width="100" FontSize="18" Content="Test">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="Silver"/>
<ContentPresenter HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
이 버튼을 보세요:
ControlTemplate 또는 DataTemplate의 영역내에서 리소스와 트리거를 이용하여 만든 겁니다.
데이타템플릿, 컨트롤템플릿과 스타일의 관계는?
앞서 말했듯이 스타일은 속성을 설정하는 툴과 같습니다.
컨트롤은 DataTemplate 또는 ControlTemplate 속성을 가지고 있습니다.
그러므로 여러분은 스타일을 이러한 속성에 사용할수가 있는거죠
예를들면, 아래처럼 할수가 있죠
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="Silver"/>
<ContentPresenter HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
사실상 ControlTemplates 은 이렇게 더 자주 사용된다는걸 아셔야 합니다.
<!--This causes a compiler error.-->
<ControlTemplate TargetType="Button">
. . .
</ControlTemplate>
- Tina 씀
(정확히 해석하긴 어려웠어요. 저도 번역하면서 WPF를 공부중인데 모르는내용을 번역하려니 뭘 설명하려는지 모르겠네요 와하하........)