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 Physical User Interface 실용적인 U I

7. User Interface Trends ? Desktop Application 견고함 Web Application 허술함 Hardware 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를 사용해 디자이너와 협업하는 과정에 대해 간략하게 소개합니다.

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

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의 분리 31/ 21

32. XAML != WPF 32/ 21

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

34. 34/ 21

35. WPF UI의 필수 요소는? 35/ 21

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

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

38. Page VS Window

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

40. Layout Control Canvas Dock Panel Grid StackPanel WrapPanel 40/ 21

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> 41/ 21

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> 42/ 21

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> 43/ 21

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> 44/ 21

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

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 (); 46/ 21

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

48. Timer Animation 48/ 32

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

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; } 50/ 32

51. Timer Based Animation 51/ 32 +2 +2 +2 +2 +2 버튼 버튼 버튼 버튼 버튼 버튼 균일하게 2씩 증가 하지만, 사이사이가 비어있는 Animation 처럼 보임

52. WPF Animation 52/ 32

53. XAML의 Animation <Button FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"> Expanding Button <Button.Triggers> <EventTriggerRoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard TargetProperty="FontSize"> <DoubleAnimation From="12" To="48" Duration="0:0:2" FillBehavior="Stop" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> 53/ 32

54. C#을 사용한 WPF Animation 54/ 32 DoubleAnimation anima = new DoubleAnimation(); anima.Duration = new Duration(TimeSpan.FromSeconds(2)); anima.From = 12; anima.To = 48; btn.BeginAnimation(Button.FontSizeProperty, anima);

55. +? Timer Based Animation 55/ 32 +? +? +? +? 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 자동으로 증가 값을 할당하여 보다 정교한 Animation 구현가능 증가 값에 대해 개발자가 신경 쓰지 않아도 됨 (원한다면 지정가능)

56. 쉬는 시간

57. PART 2. WPF활용 이번 에는 본격적으로 WPF를 활용하는 방법에 대해 소개합니다. Style, Template, DataBinding등을 사용해 다양한 UI를 구현하는 방법에 대해 소개합니다.

58. Extreme WPF Resource Style Transformations Data Binding Template 58/ 48

59. 자원 [資源,Resources] 인간생활에 도움이 되는 자연계의 일부 59/ 48

60. 자원 [資源,Resources] User Interface를 구성하기 위해서 필요한 다양한 형태의 데이터 60/ 48

61. [.Net Assembly] Mainifest + Execute Code + Resource 61/ 48

62. Resource User Interface 를 구성하기 위해서 필요한 각종 데이터가 저장 될 수 있다. Color, Image, Video, Audio, Text 등 Binary로 표현될 수 있는 모든 정보는 모두 Resource가 될 수 있다. WPF에서도 .NET과 동일한 방법으로 활용할 수 있고 객체의 속성이나 스타일을 저장하는 용도로 활용할 수도 있다. 62/ 48

63. Resource의 구분 Static Resource 선언적으로 미리 정의되어 있다. 특정한 값이나 속성으로 주로 활용된다. Dynamic Resource Runtime중에 변화하는 값이나 속성을 지정할 때 사용된다. http://msdn.microsoft.com/ko-kr/library/ms750613.aspx 63/ 48

64. None Resource <Button Background="Yellow" Margin="5,5">Button1</Button> <Button Background="Yellow" Margin="5,5">Button2</Button> <Button Background="Yellow" Margin="5,5">Button3</Button> 64/ 48

65. Static Resource <Window.Resources> <SolidColorBrush x:Key="yellowBrush" Color="Yellow"/> </Window.Resources> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button1</Button> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button2</Button> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button3</Button> 65/ 48

66. Dynamic Resource <Window.Resources> <SolidColorBrush x:Key="yellowBrush" Color="Yellow"/> </Window.Resources> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button1</Button> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button2</Button> <Button Background="{StaticResourceyellowBrush}" Margin="5,5">Button3</Button> 66/ 48

67. Resource Dictionary Resource는 정의된 위치에 따라 접근이 한정된다. Resource를 반복적으로 사용하기 위해서는Resource Dictionary를 사용 MyResource.xaml UserControl.xaml Windows.xaml Page.xaml 67/ 48

68. Resource Dictionary 리소스 파일의 생성 <ResourceDictionary > <SolidColorBrush x:Key="myBrush" Color="Yellow"/> </ResourceDictionary> 리소스 파일의 참조 <Window.Resources> <ResourceDictionary Source="MyResources.xaml"/> </Window.Resources> 68/ 48

69. 밀착취재 69/ 48

70. Resource Dictionary Demo 70/ 48

71. Style 동일한 스타일을 여러 번 반복해서 적용하려고 할 때 스타일을 사용한다. <Style> 로 스타일을 지정한다. <Setter> 로 속성을 지정한다. Property : 스타일을 지정할 속성 Value : 스타일의 값 명시적으로 스타일이 지정될 종류의 컨트롤을 지정할 수 있다. 71/ 48

72. Style <Window.Resources> <Style x:Key="fontStyle"> <Setter Property="Control.FontSize" Value="30"/> </Style> </Window.Resources> <StackPanel> <Button Style="{StaticResourcefontStyle}">Hello, World</Button> <TextBlock Style="{StaticResourcefontStyle}">안녕하세요</TextBlock> </StackPanel> 72/ 48

73. Style의 명시적 지정 명시적으로 스타일이 지정될 종류의 컨트롤을 지정할 수 있다. <Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Button.FontSize" Value="30"/> </Style> </Window.Resources> <StackPanel> <Button>Hello, World</Button> <Button>안녕하세요</Button> </StackPanel> 73/ 48

74. Style의 상속 스타일을 상속해서 필요한 만큼 확장해서 사용할 수도 있다. <Window.Resources> <Style x:Key="parentStyle"> <Setter Property="Control.Background“ alue="Yellow“/> </Style> <Style x:Key="childStyle" BasedOn="{StaticResourceparentStyle}"> <Setter Property="Control.FontSize" Value="30“/></Style> </Window.Resources> <Button Style="{StaticResourceparentStyle}">Hello, World</Button> <Button Style="{StaticResourcechildStyle}“>안녕하세요</Button> 74/ 48

75. Style Demo 75/ 48

76. Transformations All elements support them Transform Types <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> <MatrixTransform /> 76/ 48

77. RotateTransform (XAML) <TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock> Hello World Hello World 77/ 48

78. RotateTransform (C#) TextBlock block = new TextBlock(); RotateTransform Transform = new RotateTransform(); Transform.Angle = 45; block.RenderTransform = transform; Hello World Hello World 78/ 48

79. 79/ 48

80. Data Binding 데이터를 표시하고 데이터와 상호 작용하는 간단하고 편리한 방법 Binding Source Binding Target DependencyObject Object Dependency Property Property Binding Object 80/ 48

81. Data Binding AuctionItem Class Description StartPrice StartDate Category SpecialFeatures 81/ 48

82. Data Binding ElementName Source Path Mode 82/ 48

83. Data Binding Mode Data Binding Mode를 통해 데이터의 흐름을 제어 할 수 있다. Binding Source Binding Target Binding Object DependencyObject Object Dependency Property Property One Way Two Way One Way Two Source 83/ 48

84. Data Binding Demo <Slider Name="MySlider“ Minimum="10“ Maximum="200“ Value="50“ Margin="10" /> <Rectangle Width="{Binding ElementName=MySlider, Path=Value}" Height="{Binding ElementName=MySlider, Path=Value}" Fill="Orange“ VerticalAlignment="Center“ HorizontalAlignment="Center" /> 84/ 48

85. Data Binding Data Conversion Binding Source Binding Target Button Object MyData Object Binding Object Background Property (Brush) Color Name Property (String) “RED” Default Convertor Red Button 문자열에서 의미하는 색상을 Brush Object로 변환 시켜주는 Default Converter를 지원하여 문자만으로도 원하는 색의 Brush로 변환이 가능하다. 85/ 48

86. Data Binding Data Conversion Binding Source Binding Target Button Object MyData Object Binding Object Background Property (Brush) Color Name Property (COLOR) “RED” Object Default Converter ? Red Button Default Converter가 지원 하지 않는 형식의 변환에 대해서는 직접 IValueConverter를 사용하여 Converter를 구현 할 수 있다. 86/ 48

87. Data Binding Data Conversion Binding Source Binding Target Button Object MyData Object Binding Object Background Property (Brush) Color Name Property (String) “RED” IValueConverter Color Brush Convertor Red Button 87/ 48

88. Template Control Template Style Property Property Property Property Control Logic Event Trigger 88/ 48

89. Template <(UIElement).Template> 를 사용해 Template를 지정한다. 명시적으로 템플릿이 지정될 종류의 컨트롤을 지정할 수 있다. <Button> <Button.Template> <ControlTemplate> <Ellipse Fill="Red"></Ellipse> </ControlTemplate> </Button.Template> </Button> 89/ 48

90. Template <Button Content="OK"> <Button.Template> <ControlTemplate> <Grid> <Ellipse Fill="Red" x:Name="Circle"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Circle" Property="Fill" Value="Green"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 90/ 48

91. Template Binding 템플릿을 적용하는 부모의 Property를 Binding 하기 위해 사용 { TemplateBinding (Property) } 과 같은 형식으로 사용 임의의 객체에 Binding 가능 ContentControl또는 ContentPresenter를 사용하면 다양한 형태의 Content를 Binding 할 수 있다. 91/ 48

92. Template <Button Content="OK"> <Button.Template> <ControlTemplate> <Grid> <Ellipse Fill="Red" x:Name="Circle"/> <TextBlock Text="{TemplateBindingButton.Content}" HorizontalAlignment="Center“ VerticalAlignment="Center"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Circle" Property="Fill" Value="Green"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 92/ 48

93. Template <Button Content="OK"> <Button.Template> <ControlTemplate> <Grid> <Ellipse Fill="Red" x:Name="Circle"/> <ContentControl Content="{TemplateBindingButton.Content}" HorizontalAlignment="Center“ VerticalAlignment="Center"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Circle" Property="Fill" Value="Green"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 93/ 48

94. Template <Button > <Button.Template> <ControlTemplate> <Grid> <Ellipse Fill="Red" x:Name="Circle"/> <ContentControl Content="{TemplateBindingButton.Content}" HorizontalAlignment="Center“ VerticalAlignment="Center"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Circle" Property="Fill" Value="Green"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> <Image Source="Test.jpg" Width="80"></Image> </Button> 94/ 48

95. Skin Skinning 95/ 48

96. Skin <Grid> <StackPanel Style=“{DynamicResourceDialogStyle}” > <Label Style = “{DynamicResourceHeadingStyle}”> Loading…</Label> <ProgressBar Value=“35” Margin=“20” /> <Button Style=“{DynamicResourceCancelButtonStyle}” Width=“70” Content=“Cancel”/> </StackPanel> </Grid> 96/ 48

97. Skin <ResourceDictionary> <Style x:Key="DialogStyle" TargetType="{x:Type StackPanel}"> <Setter Property="Background" Value="Red"/> </Style> <Style x:Key="HeadingStyle" TargetType="{x:Type Label}"> <Setter Property="FontSize" Value="18"/> <Setter Property="FontWeight" Value="Bold" /> </Style> </ResourceDictionary> 97/ 48