Windows Presentation Foundation

1. Windows Presentation Foundation 데브피아WPF & Silverlight시삽 / 김 대욱 / kdw234@naver.com / http://whatisthat.co.kr

2. About • DaeWook, Kim • UX Designer & Software Developer • kdw234@naver.com • http://whatisthat.co.kr • Microsoft C# MVP • Devpia WPF & Silverlight Sysop • Samsung Software Membership (Suwon)

3. 사용자가 보고서 얼마나 빨리 직관적으로(경험적 판단을 통해 ) 편리하게 인식하여 사용할 수 있는가 UX • (User eXperience)

4. 사용자 경험의 발전

6. User Interface Trends ? 재미있고 유용한 UI Graphic User Interface 직관적이고 편리한U I Character User Interface 실용적인 U I Physical User Interface

7. User Interface Trends ? 견고함 Desktop Application 허술함 Hardware Application Web Application 정적 동적

8. User Interface Trends 개발자 생산성 “생산성과 UX의 조화” ASP .NET (ATLAS) ASP .NET 2.0 (HTML) Window Presentation Foundation Win From Win32 DHTML (AJAX) Direct 3D UX의 풍부함

9. Agenda • WPF로의 여행 (30분) • WPF Overview • XAML • Layout • Animation • WPF 활용 ( 1시간 30분) • WPF Template (Listbox, Treeview, TabControl) • Custom User Control • WPF Pixel Snapper • Condensed TextBlock • WPF 활용 실습 : Interactive Search Engine(1시간 30분)

10. PART 1-1. WPFOverview 여러분을 WPF로의 여행으로 초대합니다. 이번 여행에서는 .Net Framework3.0중에서도 가장 눈에 띄는 기술인 WPF의 전반적인 내용을 향하여 알아봅니다. 또한 WPF의 구현방법과 개발환경 그리고 주요기능들을 알아보며 WPF를 사용해 디자이너와 협업하는 과정에 대해 간략하게 소개합니다.

11. Windows Presentation Foundation Next generation user experience “CardSpace” Digital identity management Windows Workflow Foundation Business process modeling Windows Communication Foundation Service-oriented development - Windows Vista 시대의 새로운 UX를 제공해주기 위해서 탄생 - XML로 설계되는 새로운 UI - WPF를 위한 새로운 디자인 툴 제공 • 그래픽 가속칩에 의한 성능 최적화

13. Presentation Framework Presentation Core Common Language Runtime User32 milcore DirectX Kernel • WPF는 기존의 닷넷 응용프로그램과는 달리 GDI+를 사용하지 않는다. 대신 Milcore라는 형태의 중간 레이어를 통해서 Direct X에 직접 접근한다. • Milcore는 WPF에서 유일하게 Unmanaged파일이다. Hardware

18. XAML C# VB.NET <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button> Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; Dim b1 As New Button b1.Content = "OK" b1.Background = New _SolidColorBrush(Colors.LightBlue) b1.Width = 100 XAML • (Extensible Application Markup Language) 응용 프로그램의 객체를 표현하는 XML 기반의 선언적 프로그래밍 모델 사용자 상호작용과, 화면 출력과 관계된 클래스와 메서드를 지원하도록 설계 진정한 User Interface와 Logic그리고 Code와 Content의 분리

19. WPF Application = Code + Mark Up

20. XAML • XAML 파일은 다양한 툴에서 지원(Microsoft Expression, Visual Studio, ZAM3D) • XAML은 WPF혹은 XAML Browser에서 인식 • XAML 요소는 내부적으로 객체들과 Mapping • 개발자와 디자이너의 협업을 위한 최선의 방법

21. ZAM3D XAML Microsoft Expression Design Microsoft Expression Blend Microsoft Visual Studio XAML XAML

22. 시각적으로 뛰어난 사용자 환경에서 Windows 클라이언트 응용 프로그램을 만들 수 있는 차세대 프레젠테이션 시스템으로 세련되고 편리한 사용자 인터페이스를 개발자와 디자이너의 협업을 통해 보다 쉽게 만들 수 있는 통합 개발 환경 WPF • (Windows Presentation Foundation) • “디자이너/기획자의 생각을 자유롭게 표현”

28. WPF 구조에 대한 이해 필요

29. http://whatisthat.co.kr/124

30. PART 1-2. WPF와 XAML 이번 에는 XAML에 대해서 좀더 자세하게 살펴보도록 하겠습니다. 기본적인 문법부터 WPF를 가장 WPF 답게 만드는 기술들인 Content와 Dependency Property, Routed Event와 같은 개념들을 살펴 봅니다.

31. XAML C# VB.NET <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button> Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; Dim b1 As New Button b1.Content = "OK" b1.Background = New _SolidColorBrush(Colors.LightBlue) b1.Width = 100 XAML • (Extensible Application Markup Language) 응용 프로그램의 객체를 표현하는 XML 기반의 선언적 프로그래밍 모델 사용자 상호작용과, 화면 출력과 관계된 클래스와 메서드를 지원하도록 설계 진정한 User Interface와 Logic그리고 Code와 Content의 분리

32. XAML != WPF

33. XAML = XML + CLR <System.Object>

35. WPF UI의 필수 요소는?

36. UI의 필수 요소 • Window, Page • Button, CheckBox, RadioButton… • TextBlock, TextBox… • Slider, ScrollBar, ProgressBar… • ListBox, Treeview, Listview… • Grid, Canvas, StackPanel, WarpPanel… • Etc…

37. Visual Tree • XAML은 XML을 기반으로 하기 때문에 이를 사용하여 • 작성한 UI는 요소 트리라는 중첩된 요소 계층으로 표현된다.

38. Page VS Window

39. Page • Internet Explorer, NavigationWindow, Frame에서 탐색 및 호스팅할 수 있는 콘텐츠 페이지 • NavigationService를 사용하여 프로그래밍 방식으로 탐색 가능 • Page를 사용해서 구현된 Application 예 • WordTravel

40. Layout Control • Canvas • Dock Panel • Grid • StackPanel • WrapPanel

41. Canvas   <Canvas Height="400" Width="400" Background="Black">     <Canvas Height="100" Width="100" Canvas.Top="0" Canvas.Left="0" Background="Red"/>     <Canvas Height="100" Width="100" Canvas.Top="100" Canvas.Left="100" Background="Green"/>     <Canvas Height="100" Width="100" Canvas.Top="50" Canvas.Left="50" Background="Blue"/>   </Canvas>

42. DockPanel   <DockPanelLastChildFill="True">      <Border Height="25" Background="SkyBlue“ DockPanel.Dock="Top">        <TextBlock Foreground="Black">Dock = "Top"</TextBlock> </Border>      <Border Height="25" Background="SkyBlue” DockPanel.Dock="Top">        <TextBlock Foreground="Black">Dock = "Top"</TextBlock>   </Border> <Border Height="25" Background="LemonChiffon” DockPanel.Dock="Bottom">        <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock> </Border>      <Border Width="200" Background="PaleGreen“ DockPanel.Dock="Left">        <TextBlock Foreground="Black">Dock = "Left"</TextBlock> </Border>      <Border Background="White“ >        <TextBlock Foreground="Black“>remaining space..</TextBlock> </Border>   </DockPanel>

43. Grid   <Grid Background="#DCDCDC"         Width="425"         Height="165" HorizontalAlignment="Left" VerticalAlignment="Top" ShowGridLines="True">     <Grid.ColumnDefinitions>        <ColumnDefinition Width="Auto" />        <ColumnDefinition Width="*" />        <ColumnDefinition Width="*"/>        <ColumnDefinition Width="*"/>        <ColumnDefinition Width="*"/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>  <RowDefinition Height="Auto" />  <RowDefinition Height="Auto" />  <RowDefinition Height="*" />  <RowDefinition Height="Auto" />     </Grid.RowDefinitions>

44. Grid     <Image Grid.Column="0" Grid.Row="0" Source="RunIcon.png" />     <TextBlockGrid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" TextWrapping="Wrap">       Type the name of a program, folder, document, or       Internet resource, and Windows will open it for you.     </TextBlock>     <TextBlockGrid.Column="0" Grid.Row="1">Open:</TextBlock>     <TextBoxGrid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" />     <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="2">OK</Button>     <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="3">Cancel</Button>     <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="4">Browse ...</Button>   </Grid>

45. Stack Panel     <StackPanelHorizontalAlignment="Left" VerticalAlignment="Top">         <Button>Button 1</Button>         <Button>Button 2</Button>         <Button>Button 3</Button>     </StackPanel>

46. Stack Panel (C#) mainWindow = new Window (); mainWindow.Title = "StackPanel Sample"; // Define the StackPanel myStackPanel = new StackPanel(); // Define child content Button myButton1 = new Button(); myButton1.Content = "Button 1"; Button myButton2 = new Button(); myButton2.Content = "Button 2"; Button myButton3 = new Button(); myButton3.Content = "Button 3"; // Add child elements to the parent StackPanel myStackPanel.Children.Add(myButton1); myStackPanel.Children.Add(myButton2); myStackPanel.Children.Add(myButton3);           mainWindow.Content = myStackPanel; mainWindow.Show ();

47. PART 1-3. WPF Animation WPF에서 가장 중심적인 그래픽의 활용방법과 각 종 애니메이션 기법들을 살펴 봅니다. 지오메트리와 패스 그리고 스토리보드와 같은 개념들을 알려 드립니다.

48. Timer Animation

49. DispatcherTimer • Interval 속성에 지정된 시간마다 Tick Event를 발생시켜 준다. • Start(), Stop()을 통해서 타이머를 시작, 종료 할 수 있다. • IsEnabled속성을 통해서 사용여부를 지정할 수 있다.

50. Timer Based Animation DispatcherTimertmr = new DispatcherTimer(); tmr.Interval = TimeSpan.FromSeconds(0.1); tmr.Tick += TimerOnTick; tmr.Start(); void TimeOnTick(object sender, EventArgs e) {btn.FontSize += 2; }