[세티의 WPF] Templates, Themes, Design, Graphics, Media, Document Silverlight2007/12/17 10:01
작성일: 2007년 11월 24일
Controls Template
기본적으로 WPF의 버튼과 같은 요소들은 다른 엘리먼트들의 집합셋으로 만들어 집니다.
예를 들어서 하나의 버튼에 대해 표현을 만들어내기 위해선 기본적으로 3개의 자식 엘리먼트로 구성되어야 합니다. 하지만 컨트롤 템플릿을 사용함으로써 버튼 컨트롤과 같은 요소들이 가지는 표현을 WPF요소의 기본 표현으로 다시 되돌릴 수 있습니다.
아래는 그것에 대한 예제 입니다.
|
<Button Content="Not Pressed"> <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="border" CornerRadius="80" Background="LightBlue"> <ContentPresenter Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="Background" Value="Aqua" /> <Setter TargetName="content" Property="Content" Value="Pressed" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> |
아래의 그림을 보도록 하겠습니다.
먼저 마우스를 클릭하지 않았을 때의 그림입니다.
Data Template
컨트롤 템플릿을 통해서 버튼의 표현 양식을 변경했듯이 데이터 템플릿을 통해서 컨트롤이 가지는 컨텐츠를 변경할 수 있습니다. 데이터 템플릿은 데이터 바운드를 비쥬얼 하게 보여주는데 자주 사용됩니다. 아래의 그림은 이미지 객체의 컬렉션이 바운드된 리스트 박스에 대한 기본 표현을 보여줍니다.
|
<DataTemplate x:Key="myTaskTemplate"> <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5"> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/> <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" /> <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/> <TextBlock Grid.Row="2" Grid.Column="0" Text="Prioirty:"/> <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/> </Grid> </Border> </DataTemplate> |
Themes
일반적으로 WPF 어플리케이션은 다양한 UI 리소스를 가지고 있습니다. 이 리소스들은 어플리케이션을 위한 테마로 사용될 수 있습니다. WPF는 ResourceDictionary class 라는 캡슐화된 리소스를 사용하여 UI 패키지를 제공합니다. 테마는 다양한 어플리케이션에서 활성되고, 각각의 파일에서 리소스들을 정의할 수 있습니다.
아래는 내용에 대한 샘플 코드 입니다.
|
<!-- Blue Theme (BlueThemeResourceDictionary.xaml) --> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:ThemedApplicationSample_CSharp"> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="Blue" /> </Style> </ResourceDictionary> |
Layout과 Panels
데이터를 표현하기 위한 UI를 작성할 때, 위치를 잡고, 사이즈를 조절하고, 레이아웃이 만드는데 필요한 컨트롤과 엘리먼트들을 조합해서 할 수 있습니다. WPF는 레이아웃 컨트롤을 포함하는 공통의 인프라 스트럭처를 지원하는데, 레이아웃 컨트롤은 다음과 같습니다.
아래의 그림은 DockPanel을 보여줍니다.
Graphics
WPF는 다음과 같이 새로운 그래픽 특징을 포함하고 있습니다.
Resolution과 device-independent 그래픽: WPF 그래픽 시스템은 Resolution과 device-independence 활성화를 위해 device-independent 유닛을 사용합니다. 각 디바이스는 픽셀에 대해 자유로우며 dots-per-inch로의 세팅이 자동으로 이루어집니다.
정확도의 향상: WPF coordinate 시스템은 float대신에 double을 사용합니다. 변형과 불투명도는 doubles를 사용하여 표현되어집니다. 또한 WPF는 다른 컬러 영역에서 입력된 것을 통합 지원하고 scRGB를 지원합니다.
앞선 그래픽과 애니메이션 지원: WPF는 그래픽 프로그래밍인 화면 프로세싱, 랜더링 루프 등을 단순화 했습니다.
하드웨어 가속기: WPF 그래픽 시스템은 CPU사용을 최소화 하고 그래픽 하드웨어 이점을 사용하기 위해 디자인되었습니다.
2-D 그래픽
WPF는 직사각형, 타원형과 같은 벡터드로운 2-D그래픽에 대해 공통으로 사용할 수 있는 라이브러리를 제공합니다. 또한 이것은 단지 그림을 그리는 역할만 가지지는 않습니다. 마우스나 키보드의 입력 정보를 포함하는 공통 컨트롤에서 요구되는 특징들을 가지고 있습니다.
아래는 그것에 대한 예제코드입니다.
|
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Window1" > <Ellipse Fill="LightBlue" MouseUp="ellipseButton_MouseUp" /> </Window> public partial class Window1 : Window { void ellipseButton_MouseUp(object sender, MouseButtonEventArgs e) { MessageBox.Show("Me, a simple ellipse, was mouse clicked!"); } } |
2-D Geometries
WPF는 2-D를 그릴 때 Geometries와 Path를 제공합니다.
아래의 그림은 Path를 이용하여 그림을 그린 것과 브러쉬를 이용했을 때, 그리고 클립을 사용했을 때 어떻게 보이는 지를 보여줍니다.
2-D 효과
WPF는 2-D로 그림을 그렸을 때 다양한 효과를 제공할 수 있도록 클래스 라이브러리가 제공됩니다. 그래디언, 비트맵, 드로잉, 비디오를 표현하는데 충분하며, 로테이션, 스케일링 등을 하는데 적합합니다.
3-D Rendering
WPF는 UI와 데이터를 흥미롭게 보여주기 위한 2-D 그래픽과 통합된 3-D 렌더링을 제공합니다.
컨트롤과 엘리먼트들을 늘어나게 하고, 흔들리게 하고 회전하게 하며, 희미해지게 하는 애니메이션을 사용하여 페이지를 재미있게 만들 수 있습니다.
Media
이미지, 비디오 그리고 오디오는 정보와 사용자 경험을 전달하는 media-rich 입니다.
이미지
아이콘, 배경, 애니메이션 파트 같은 부분들은 어플리케이션에서 중요한 부분입니다. 그렇기 때문에 이미지들을 자주 사용해야 할 필요가 있습니다. WPF는 이러한 것들을 다양한 방법으로 표현해 낼 수 있습니다.
비디오와 오디오
WPF의 능력 중 하나는 비디오와 오디오가 포함된 멀티미디어를 자연스럽게 지원한다는 점입니다.
<MediaElement Source="media\numbers.wmv" Width="450" Height="250" />
MediaElement는 커스텀 UI의 생성을 쉽게 하고, 비디오와 오디오를 매우 유연하게 연장할 수 있습니다.
Document와 프린팅
WPF는 fixed documents, flow documents, 그리고 XPS documents 같은 3가지 타입의 문서를 지원합니다. WPF는 생성, 보기, 관리, 프린팅을 지원하기 위한 폭넓은 서비스를 제공합니다.
Text 와 타이포그래피
이 파트에서의 핵심은 오픈 타입 폰트와 시스템 폰트를 쉽게 지원하는 것 입니다.
WPF는 클리어 타입의 향상과 하드웨어 가속기 때문에 텍스트 렌더링 퍼포먼스가 향상되었고
텍스트는 다른 미디어와 그래픽, 심지어 애니메이션 텍스트로 쉽게 통합될 수 있습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(2) (0) | 2008/03/16 |
|---|---|
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(1) (0) | 2008/03/15 |
| [세티의 WPF] Templates, Themes, Design, Graphics, Media, Document (1) | 2007/12/17 |
| [세티의 WPF] 3. DataBinding, Appearence, Resources, Styles (0) | 2007/12/17 |
| [세티의 WPF] 2. Extensible Application Markup Language (0) | 2007/12/16 |
| [세티의 WPF] 1. WPF 코어 타입과 인프라스트럭쳐 (0) | 2007/12/16 |
