Hour 7. Designing an Application
- 응용 프로그램의 유형(windows, 독립적인 XAML, XBAP)
- 표준 응용프로그램 vs 네비게이션 응용프로그램
- 사용자 컨트롤
Hour 7에서는 먼저 WPF 디자인을 시작할 때 직면하게 될 선택을 논의하게 되는데 WPF는 근본적으로 응용프로그램을 만든 몇 가지 방법을 제공해준다.
응용프로그램을 배포하는 세 가지 방법
Standard Executable | 지금까지 사용하던 형식으로서 가장 일반적인 형식이다. WPF 어플리케이션이 표준형으로 컴파일 되어진다. 주로 exe 파일명을 사용한다 |
XAML 브라우저 어플리케이션 | XBAP이라고 불리는데 이것은 특별한 WPF 어플리케이션이다. Internet Explorer6과 파이어폭스 2에서 지원되어 XBAP은 브라우저에서 보안제한도 많지만 배포를 단순화시켜 .xbap확장자를 사용한다 |
XAML file | 이것은 XAML 마크업과 텍스트 파일로서 .xaml파일을 실행하고 시작하면 브라우저에서 사용가능하다. 단지 XAML만 가능하며 다른 어플리케이션코드가 제한적이다. 확장자는 .xaml파일이된다. |
XAML언어로서만 읽을 수 있는 언어로의 변환
XAML은 .NET 객체를 생성하고 초기화하기 위한 XML 기반의 언어이며 WPF에 구현된 것보다는 CLR에서 지원하는 다양한 타입들을 위해 사용되기는 하지만 XAML은 WPF에서 사람이 UI를 기술하기 위한 방법으로 사용된다.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="Teach Yourself WPF: Font Viewer" Height="480" Width="640"> <DockPanel Margin="8"> <Border DockPanel.Dock="Top" CornerRadius="6" BorderThickness="1" BorderBrush="Gray" Background="LightGray" Padding="8" Margin="0 0 0 8"> <TextBlock FontSize="14" TextWrapping="Wrap"> Select a font to view from the list below. You can change the text by typing in the region at the bottom. </TextBlock> </Border> <ListBox x:Name="FontList" DockPanel.Dock="Left" ItemsSource="{x:Static Fonts.SystemFontFamilies}" Width="160" /> <TextBox x:Name="SampleText" DockPanel.Dock="Bottom" MinLines="4" Margin="8 0" TextWrapping="Wrap"> <TextBox.ToolTip> <TextBlock> <Italic Foreground="Red">Instructions: </Italic> ➥ Type here to change the preview text. </TextBlock> </TextBox.ToolTip> The quick brown fox jumps over the lazy dog. </TextBox> <StackPanel Margin="8 0 8 8"> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="10" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="16" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="24" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="32" TextWrapping="Wrap" /> </StackPanel> </DockPanel> </Page> |
Control
대부분의 U 프레임워크들이 컨트롤과 비슷한 추상화의 개념을 제공하는 거소가 달리 WPF는 조금 색다른 접근법을 채택, 대부분의 컨트롤이 자신들의 외관을 직접적으로 책임지지는 않는다
컨트롤들은 자신들이 지원하는 작업을 표현하기 위해 커맨드를 사용한다. 예를 들어 텍스트 상자는 잘라내기, 복사하기, 붙여넣기 등 여러가지 커맨드를 제공한다. 컨트롤들은 속성을 통해서 자신들의 동작이나 외관을 관리하거나 텍스트 상자에서 편집 중인 텍스트와 같이 컨트롤과 관련된 정보를 관리할 수 있도록 한다. 컨트롤은 특정한 형태의 입력을 받는 등 일이 발생할 시 이벤트를 발생시킨다.
컨트롤은 마크업에서 사용되며 디자인 도구에 의해 지원되기 때문에 컨트롤의 기능을 외부에 노출하는 주요 메커니즘은 커맨드와 속성, 그리고 이벤트다. 그러나 컨트롤의 실제 기능은 코드에서만 사용되며 메서드가 가장 적합한 형태의 API가 될 수 있다.
<UserControl x:Class="TeachYourselfWPF.FontViewer.TextPreviewControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <DockPanel> <TextBox x:Name="SampleText" DockPanel.Dock="Bottom" MinLines="4" Margin="8 0" TextWrapping="Wrap"> <TextBox.ToolTip> <TextBlock> <Italic Foreground="Red">Instructions: </Italic> ➥ Type here to change the preview text. </TextBlock> </TextBox.ToolTip> Parksangjong </TextBox> <StackPanel Margin="8 0 8 8"> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="10" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="16" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="24" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="32" TextWrapping="Wrap" /> </StackPanel> </DockPanel> </UserControl>
|
Hour 8
Building a text document editor
- 새로운 어플리케이션의 디자인
- 컨트롤의 확장
- 상호 조절의 여러 방법
- UI 와 User Controls
필요한 툴을 가지고 창조적인 실제 응용프로그램을 만든다. 텍스트 문서 편집기에 대한 기초를 구축해 핵심 레이아웃과 텍스트 편집기에 대한 컨트롤을 설정할 수 있다.
<Window x:Class="TextEditor.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Text Editor" Height="600" Width="800"> <DockPanel> <Menu x:Name="menu" DockPanel.Dock="Top" /> <ToolBarTray x:Name="toolbar" DockPanel.Dock="Top" /> <StatusBar DockPanel.Dock="Bottom"> <TextBlock x:Name="status" /> </StatusBar> <RichTextBox x:Name="body" SpellCheck.IsEnabled="True" AcceptsReturn="True" AcceptsTab="True" BorderThickness="0 2 0 0" /> </DockPanel> </Window> |
WPF를 이용한 메모장 만들기
툴팁 ( 풍선 도움말 )
툴팁 컨트롤은 인터페이스 특정 영역 상에 떠다니는 레이블을 보여주는 컨트롤
<Window x:Class="WpfApplication6.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <TextBox Width="100"> <TextBox.ToolTip> <ToolTip Content="이I름¬¡×을¡í 입O력¤A하I세ù¨ù요¯a."/> </TextBox.ToolTip> </TextBox> </Grid> </Window>
|
