Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wpf세미나

2,330 views

Published on

  • Be the first to comment

Wpf세미나

  1. 1. Windows Presentation Foundation<br />데브피아WPF & Silverlight시삽 / 김 대욱 / kdw234@naver.com / http://whatisthat.co.kr<br />
  2. 2. About<br />DaeWook, Kim<br />UX Designer & Software Developer<br />kdw234@naver.com<br />http://whatisthat.co.kr<br />Microsoft C# MVP<br />Devpia WPF & Silverlight Sysop<br />Samsung Software Membership (Suwon)<br />
  3. 3. UX<br />(User eXperience)<br />사용자가 보고서 얼마나 빨리 직관적으로(경험적 판단을 통해 ) <br />편리하게 인식하여 사용할 수 있는가<br />
  4. 4. 사용자 경험의 발전<br />
  5. 5.
  6. 6. User Interface Trends<br />?<br />재미있고 <br />유용한 UI<br />Graphic User Interface <br />직관적이고<br />편리한U I<br />Character User Interface<br />Physical User Interface<br />실용적인<br />U I<br />
  7. 7. User Interface Trends<br />?<br />Desktop Application<br />견고함<br />Web Application<br />허술함<br />Hardware Application<br />동적<br />정적<br />
  8. 8. User Interface Trends<br />개발자 생산성<br />“생산성과 UX의 조화”<br />ASP .NET<br />(ATLAS)<br />ASP .NET 2.0<br />(HTML)<br />Window Presentation Foundation<br />Win From<br />Win32<br />DHTML<br />(AJAX)<br />Direct 3D<br />UX의 풍부함<br />
  9. 9. Agenda<br />WPF로의 여행 (30분)<br />WPF Overview<br />XAML<br />Layout<br />Animation<br />WPF 활용 ( 1시간 30분)<br />WPF Template (Listbox, Treeview, TabControl)<br />Custom User Control<br />WPF Pixel Snapper<br />Condensed TextBlock<br />WPF 활용 실습 : Interactive Search Engine(1시간 30분)<br />
  10. 10. PART 1-1. WPFOverview<br />여러분을 WPF로의 여행으로 초대합니다.<br />이번 여행에서는 .Net Framework3.0중에서도 가장 눈에 띄는 기술인 WPF의 전반적인 내용을 향하여 알아봅니다. <br />또한 WPF의 구현방법과 개발환경 그리고 주요기능들을 알아보며 WPF를 사용해 디자이너와 협업하는 과정에 대해 간략하게 소개합니다.<br />
  11. 11. Windows Presentation Foundation<br />Next generation user experience<br />“CardSpace”<br />Digital identity management<br />Windows Workflow Foundation<br />Business process modeling<br />Windows Communication Foundation<br />Service-oriented development<br />- Windows Vista 시대의 새로운 UX를 제공해주기 위해서 탄생<br />- XML로 설계되는 새로운 UI<br />- WPF를 위한 새로운 디자인 툴 제공<br /><ul><li>그래픽 가속칩에 의한 성능 최적화</li></li></ul><li>
  12. 12. Presentation Framework<br />Presentation Core<br />Common Language Runtime<br />User32<br />milcore<br />DirectX<br />Kernel<br /><ul><li>WPF는 기존의 닷넷 응용프로그램과는 달리 GDI+를 사용하지 않는다. 대신 Milcore라는 형태의 중간 레이어를 통해서 Direct X에 직접 접근한다.
  13. 13. Milcore는 WPF에서 유일하게 Unmanaged파일이다.</li></ul>Hardware<br />
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18. XAML<br />C#<br />VB.NET<br />&lt;Button Width=&quot;100&quot;&gt; OK<br /> &lt;Button.Background&gt;<br />LightBlue<br /> &lt;/Button.Background&gt;<br />&lt;/Button&gt;<br />Button b1 = new Button();<br />b1.Content = &quot;OK&quot;;<br />b1.Background = new SolidColorBrush(Colors.LightBlue);<br />b1.Width = 100;<br />Dim b1 As New Button<br />b1.Content = &quot;OK&quot;<br />b1.Background = New _SolidColorBrush(Colors.LightBlue)<br />b1.Width = 100<br />XAML<br />(Extensible Application Markup Language)<br />응용 프로그램의 객체를 표현하는 XML 기반의 선언적 프로그래밍 모델<br />사용자 상호작용과, 화면 출력과 관계된 클래스와 메서드를 지원하도록 설계<br />진정한 User Interface와 Logic그리고 Code와 Content의 분리<br />
  19. 19. WPF Application = Code + Mark Up<br />
  20. 20. XAML<br />XAML 파일은 다양한 툴에서 지원(Microsoft Expression, Visual Studio, ZAM3D)<br />XAML은 WPF혹은 XAML Browser에서 인식<br />XAML 요소는 내부적으로 객체들과 Mapping<br />개발자와 디자이너의 협업을 위한 최선의 방법<br />
  21. 21. ZAM3D<br />XAML<br />Microsoft Expression Design<br />Microsoft Expression Blend<br />Microsoft Visual Studio<br />XAML<br />XAML<br />
  22. 22. WPF<br />(Windows Presentation Foundation)<br />시각적으로 뛰어난 사용자 환경에서 Windows 클라이언트 응용 프로그램을 <br />만들 수 있는 차세대 프레젠테이션 시스템으로 세련되고 편리한 사용자 인터페이스를<br />개발자와 디자이너의 협업을 통해 보다 쉽게 만들 수 있는 통합 개발 환경<br />“디자이너/기획자의 생각을 자유롭게 표현”<br />
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28. WPF 구조에 대한 이해 필요<br />
  29. 29. http://whatisthat.co.kr/124<br />
  30. 30. PART 1-2. WPF와 XAML<br />이번 에는 XAML에 대해서 좀더 자세하게 살펴보도록 하겠습니다.<br />기본적인 문법부터 WPF를 가장 WPF 답게 만드는 기술들인 Content와 Dependency Property, <br />Routed Event와 같은 개념들을 살펴 봅니다.<br />
  31. 31. XAML<br />C#<br />VB.NET<br />&lt;Button Width=&quot;100&quot;&gt; OK<br /> &lt;Button.Background&gt;<br />LightBlue<br /> &lt;/Button.Background&gt;<br />&lt;/Button&gt;<br />Button b1 = new Button();<br />b1.Content = &quot;OK&quot;;<br />b1.Background = new SolidColorBrush(Colors.LightBlue);<br />b1.Width = 100;<br />Dim b1 As New Button<br />b1.Content = &quot;OK&quot;<br />b1.Background = New _SolidColorBrush(Colors.LightBlue)<br />b1.Width = 100<br />XAML<br />(Extensible Application Markup Language)<br />응용 프로그램의 객체를 표현하는 XML 기반의 선언적 프로그래밍 모델<br />사용자 상호작용과, 화면 출력과 관계된 클래스와 메서드를 지원하도록 설계<br />진정한 User Interface와 Logic그리고 Code와 Content의 분리<br />31/ 21<br />
  32. 32. XAML != WPF<br />32/ 21<br />
  33. 33. XAML = XML + CLR<br />&lt;System.Object&gt;<br />33/ 21<br />
  34. 34. 34/ 21<br />
  35. 35. WPF UI의 필수 요소는?<br />35/ 21<br />
  36. 36. UI의 필수 요소<br />Window, Page<br />Button, CheckBox, RadioButton…<br />TextBlock, TextBox…<br />Slider, ScrollBar, ProgressBar…<br />ListBox, Treeview, Listview…<br />Grid, Canvas, StackPanel, WarpPanel…<br />Etc…<br />36/ 21<br />
  37. 37. Visual Tree<br />XAML은 XML을 기반으로 하기 때문에 이를 사용하여 <br />작성한 UI는 요소 트리라는 중첩된 요소 계층으로 표현된다.<br />37/ 21<br />
  38. 38. Page VS Window<br />
  39. 39. Page<br />Internet Explorer, NavigationWindow, Frame에서 탐색 및 호스팅할 수 있는 콘텐츠 페이지<br />NavigationService를 사용하여 프로그래밍 방식으로 탐색 가능<br />Page를 사용해서 구현된 Application 예<br />WordTravel<br />39/ 21<br />
  40. 40. Layout Control<br />Canvas<br />Dock Panel<br />Grid<br />StackPanel<br />WrapPanel<br />40/ 21<br />
  41. 41. Canvas<br />  &lt;Canvas Height=&quot;400&quot; Width=&quot;400&quot; Background=&quot;Black&quot;&gt; <br />    &lt;Canvas Height=&quot;100&quot; Width=&quot;100&quot; Canvas.Top=&quot;0&quot; Canvas.Left=&quot;0&quot; Background=&quot;Red&quot;/&gt; <br />    &lt;Canvas Height=&quot;100&quot; Width=&quot;100&quot; Canvas.Top=&quot;100&quot; Canvas.Left=&quot;100&quot; Background=&quot;Green&quot;/&gt; <br />    &lt;Canvas Height=&quot;100&quot; Width=&quot;100&quot; Canvas.Top=&quot;50&quot; Canvas.Left=&quot;50&quot; Background=&quot;Blue&quot;/&gt; <br />  &lt;/Canvas&gt; <br />41/ 21<br />
  42. 42. DockPanel<br />  &lt;DockPanelLastChildFill=&quot;True&quot;&gt; <br />     &lt;Border Height=&quot;25&quot; Background=&quot;SkyBlue“ DockPanel.Dock=&quot;Top&quot;&gt; <br />       &lt;TextBlock Foreground=&quot;Black&quot;&gt;Dock = &quot;Top&quot;&lt;/TextBlock&gt; <br /> &lt;/Border&gt; <br />     &lt;Border Height=&quot;25&quot; Background=&quot;SkyBlue” DockPanel.Dock=&quot;Top&quot;&gt; <br />       &lt;TextBlock Foreground=&quot;Black&quot;&gt;Dock = &quot;Top&quot;&lt;/TextBlock&gt;  <br /> &lt;/Border&gt; <br /> &lt;Border Height=&quot;25&quot; Background=&quot;LemonChiffon” DockPanel.Dock=&quot;Bottom&quot;&gt; <br />       &lt;TextBlock Foreground=&quot;Black&quot;&gt;Dock = &quot;Bottom&quot;&lt;/TextBlock&gt; <br /> &lt;/Border&gt; <br />     &lt;Border Width=&quot;200&quot; Background=&quot;PaleGreen“ DockPanel.Dock=&quot;Left&quot;&gt; <br />       &lt;TextBlock Foreground=&quot;Black&quot;&gt;Dock = &quot;Left&quot;&lt;/TextBlock&gt; <br /> &lt;/Border&gt; <br />     &lt;Border Background=&quot;White“ &gt; <br />       &lt;TextBlock Foreground=&quot;Black“&gt;remaining space..&lt;/TextBlock&gt; <br /> &lt;/Border&gt; <br />  &lt;/DockPanel&gt; <br />42/ 21<br />
  43. 43. Grid<br />  &lt;Grid Background=&quot;#DCDCDC&quot; <br />        Width=&quot;425&quot; <br />        Height=&quot;165&quot; <br />        HorizontalAlignment=&quot;Left&quot; <br />        VerticalAlignment=&quot;Top&quot; <br />        ShowGridLines=&quot;True&quot;&gt; <br />    &lt;Grid.ColumnDefinitions&gt; <br />       &lt;ColumnDefinition Width=&quot;Auto&quot; /&gt; <br />       &lt;ColumnDefinition Width=&quot;*&quot; /&gt; <br />       &lt;ColumnDefinition Width=&quot;*&quot;/&gt; <br />       &lt;ColumnDefinition Width=&quot;*&quot;/&gt; <br />       &lt;ColumnDefinition Width=&quot;*&quot;/&gt; <br />    &lt;/Grid.ColumnDefinitions&gt; <br />    &lt;Grid.RowDefinitions&gt; <br /> &lt;RowDefinition Height=&quot;Auto&quot; /&gt; <br /> &lt;RowDefinition Height=&quot;Auto&quot; /&gt; <br /> &lt;RowDefinition Height=&quot;*&quot; /&gt; <br /> &lt;RowDefinition Height=&quot;Auto&quot; /&gt; <br />    &lt;/Grid.RowDefinitions&gt; <br />43/ 21<br />
  44. 44. Grid<br />    &lt;Image Grid.Column=&quot;0&quot; Grid.Row=&quot;0&quot; Source=&quot;RunIcon.png&quot; /&gt; <br />    &lt;TextBlockGrid.Column=&quot;1&quot; Grid.ColumnSpan=&quot;4&quot; Grid.Row=&quot;0&quot; TextWrapping=&quot;Wrap&quot;&gt; <br />      Type the name of a program, folder, document, or <br />      Internet resource, and Windows will open it for you. <br />    &lt;/TextBlock&gt; <br />    &lt;TextBlockGrid.Column=&quot;0&quot; Grid.Row=&quot;1&quot;&gt;Open:&lt;/TextBlock&gt; <br />    &lt;TextBoxGrid.Row=&quot;1&quot; Grid.Column=&quot;1&quot; Grid.ColumnSpan=&quot;5&quot; /&gt; <br />    &lt;Button Margin=&quot;10, 0, 10, 15&quot; Grid.Row=&quot;3&quot; Grid.Column=&quot;2&quot;&gt;OK&lt;/Button&gt; <br />    &lt;Button Margin=&quot;10, 0, 10, 15&quot; Grid.Row=&quot;3&quot; Grid.Column=&quot;3&quot;&gt;Cancel&lt;/Button&gt; <br />    &lt;Button Margin=&quot;10, 0, 10, 15&quot; Grid.Row=&quot;3&quot; Grid.Column=&quot;4&quot;&gt;Browse ...&lt;/Button&gt; <br />  &lt;/Grid&gt; <br />44/ 21<br />
  45. 45. Stack Panel<br />    &lt;StackPanelHorizontalAlignment=&quot;Left&quot; <br />                VerticalAlignment=&quot;Top&quot;&gt; <br />        &lt;Button&gt;Button 1&lt;/Button&gt; <br />        &lt;Button&gt;Button 2&lt;/Button&gt; <br />        &lt;Button&gt;Button 3&lt;/Button&gt; <br />    &lt;/StackPanel&gt; <br />45/ 21<br />
  46. 46. Stack Panel (C#)<br />mainWindow = new Window (); <br />mainWindow.Title = &quot;StackPanel Sample&quot;; <br />// Define the StackPanel<br />myStackPanel = new StackPanel(); <br />// Define child content <br />Button myButton1 = new Button(); <br />myButton1.Content = &quot;Button 1&quot;; <br />Button myButton2 = new Button(); <br />myButton2.Content = &quot;Button 2&quot;; <br />Button myButton3 = new Button(); <br />myButton3.Content = &quot;Button 3&quot;; <br />// Add child elements to the parent StackPanel<br />myStackPanel.Children.Add(myButton1); <br />myStackPanel.Children.Add(myButton2); <br />myStackPanel.Children.Add(myButton3);           <br />           <br />mainWindow.Content = myStackPanel; <br />mainWindow.Show (); <br />46/ 21<br />
  47. 47. PART 1-3. WPF Animation<br />WPF에서 가장 중심적인 그래픽의 활용방법과 각 종 애니메이션 기법들을 살펴 봅니다. <br />지오메트리와 패스 그리고 스토리보드와 같은 개념들을 알려 드립니다.<br />47/ 32<br />
  48. 48. Timer Animation<br />48/ 32<br />
  49. 49. DispatcherTimer<br />Interval 속성에 지정된 시간마다 Tick Event를 발생시켜 준다.<br />Start(), Stop()을 통해서 타이머를 시작, 종료 할 수 있다. <br />IsEnabled속성을 통해서 사용여부를 지정할 수 있다.<br />49/ 32<br />
  50. 50. Timer Based Animation<br />DispatcherTimertmr = new DispatcherTimer();<br />tmr.Interval = TimeSpan.FromSeconds(0.1);<br />tmr.Tick += TimerOnTick;<br />tmr.Start();<br />void TimeOnTick(object sender, EventArgs e)<br />{btn.FontSize += 2;<br />}<br />50/ 32<br />
  51. 51. Timer Based Animation<br />51/ 32<br />+2<br />+2<br />+2<br />+2<br />+2<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />균일하게 2씩 증가 하지만, 사이사이가 비어있는 Animation 처럼 보임<br />
  52. 52. WPF Animation<br />52/ 32<br />
  53. 53. XAML의 Animation<br /> &lt;Button FontSize=&quot;12&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot;&gt;<br /> Expanding Button<br /> &lt;Button.Triggers&gt;<br /> &lt;EventTriggerRoutedEvent=&quot;Button.Click&quot;&gt;<br /> &lt;BeginStoryboard&gt;<br /> &lt;Storyboard TargetProperty=&quot;FontSize&quot;&gt;<br /> &lt;DoubleAnimation From=&quot;12&quot; To=&quot;48&quot; Duration=&quot;0:0:2&quot; FillBehavior=&quot;Stop&quot; /&gt;<br /> &lt;/Storyboard&gt;<br /> &lt;/BeginStoryboard&gt;<br /> &lt;/EventTrigger&gt;<br /> &lt;/Button.Triggers&gt;<br /> &lt;/Button&gt;<br />53/ 32<br />
  54. 54. C#을 사용한 WPF Animation<br />54/ 32<br />DoubleAnimation anima = new DoubleAnimation();<br />anima.Duration = new Duration(TimeSpan.FromSeconds(2));<br />anima.From = 12;<br />anima.To = 48;<br />btn.BeginAnimation(Button.FontSizeProperty, anima);<br />
  55. 55. +?<br />Timer Based Animation<br />55/ 32<br />+?<br />+?<br />+?<br />+?<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />버튼<br />자동으로 증가 값을 할당하여 보다 정교한 Animation 구현가능<br />증가 값에 대해 개발자가 신경 쓰지 않아도 됨 (원한다면 지정가능)<br />
  56. 56. 쉬는 시간<br />
  57. 57. PART 2. WPF활용<br />이번 에는 본격적으로 WPF를 활용하는 방법에 대해 소개합니다.<br />Style, Template, DataBinding등을 사용해 다양한 UI를 구현하는 방법에 대해 소개합니다.<br />
  58. 58. Extreme WPF<br />Resource<br />Style<br />Transformations<br />Data Binding<br />Template<br />58/ 48<br />
  59. 59. 자원 [資源,Resources] <br />인간생활에 도움이 되는 자연계의 일부<br />59/ 48<br />
  60. 60. 자원 [資源,Resources] <br />User Interface를 구성하기 위해서 필요한 다양한 형태의 데이터<br />60/ 48<br />
  61. 61. [.Net Assembly]<br />Mainifest + Execute Code + Resource<br />61/ 48<br />
  62. 62. Resource<br />User Interface 를 구성하기 위해서 필요한 각종 데이터가 저장 될 수 있다. <br />Color, Image, Video, Audio, Text 등 Binary로 표현될 수 있는 모든 정보는 모두 Resource가 될 수 있다.<br />WPF에서도 .NET과 동일한 방법으로 활용할 수 있고 객체의 속성이나 스타일을 저장하는 용도로 활용할 수도 있다.<br />62/ 48<br />
  63. 63. Resource의 구분<br />Static Resource<br />선언적으로 미리 정의되어 있다.<br />특정한 값이나 속성으로 주로 활용된다.<br />Dynamic Resource<br />Runtime중에 변화하는 값이나 속성을 지정할 때 사용된다.<br />http://msdn.microsoft.com/ko-kr/library/ms750613.aspx<br />63/ 48<br />
  64. 64. None Resource<br />&lt;Button Background=&quot;Yellow&quot; Margin=&quot;5,5&quot;&gt;Button1&lt;/Button&gt;<br />&lt;Button Background=&quot;Yellow&quot; Margin=&quot;5,5&quot;&gt;Button2&lt;/Button&gt;<br />&lt;Button Background=&quot;Yellow&quot; Margin=&quot;5,5&quot;&gt;Button3&lt;/Button&gt;<br />64/ 48<br />
  65. 65. Static Resource<br /> &lt;Window.Resources&gt;<br /> &lt;SolidColorBrush x:Key=&quot;yellowBrush&quot; Color=&quot;Yellow&quot;/&gt;<br />&lt;/Window.Resources&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button1&lt;/Button&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button2&lt;/Button&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button3&lt;/Button&gt;<br />65/ 48<br />
  66. 66. Dynamic Resource<br /> &lt;Window.Resources&gt;<br /> &lt;SolidColorBrush x:Key=&quot;yellowBrush&quot; Color=&quot;Yellow&quot;/&gt;<br />&lt;/Window.Resources&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button1&lt;/Button&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button2&lt;/Button&gt;<br />&lt;Button Background=&quot;{StaticResourceyellowBrush}&quot; Margin=&quot;5,5&quot;&gt;Button3&lt;/Button&gt;<br />66/ 48<br />
  67. 67. Resource Dictionary<br />Resource는 정의된 위치에 따라 접근이 한정된다.<br />Resource를 반복적으로 사용하기 위해서는Resource Dictionary를 사용<br />MyResource.xaml<br />UserControl.xaml<br />Windows.xaml<br />Page.xaml<br />67/ 48<br />
  68. 68. Resource Dictionary<br />리소스 파일의 생성<br />&lt;ResourceDictionary &gt;<br /> &lt;SolidColorBrush x:Key=&quot;myBrush&quot; Color=&quot;Yellow&quot;/&gt;<br />&lt;/ResourceDictionary&gt;<br />리소스 파일의 참조<br />&lt;Window.Resources&gt;<br /> &lt;ResourceDictionary Source=&quot;MyResources.xaml&quot;/&gt;<br />&lt;/Window.Resources&gt;<br />68/ 48<br />
  69. 69. 밀착취재<br />69/ 48<br />
  70. 70. Resource Dictionary Demo<br />70/ 48<br />
  71. 71. Style<br />동일한 스타일을 여러 번 반복해서 적용하려고 할 때 스타일을 사용한다. <br />&lt;Style&gt; 로 스타일을 지정한다.<br />&lt;Setter&gt; 로 속성을 지정한다.<br />Property : 스타일을 지정할 속성<br />Value : 스타일의 값<br />명시적으로 스타일이 지정될 종류의 컨트롤을 지정할 수 있다. <br />71/ 48<br />
  72. 72. Style<br />&lt;Window.Resources&gt;<br /> &lt;Style x:Key=&quot;fontStyle&quot;&gt;<br /> &lt;Setter Property=&quot;Control.FontSize&quot; Value=&quot;30&quot;/&gt;<br /> &lt;/Style&gt;<br />&lt;/Window.Resources&gt;<br />&lt;StackPanel&gt;<br /> &lt;Button Style=&quot;{StaticResourcefontStyle}&quot;&gt;Hello, World&lt;/Button&gt;<br /> &lt;TextBlock Style=&quot;{StaticResourcefontStyle}&quot;&gt;안녕하세요&lt;/TextBlock&gt;<br />&lt;/StackPanel&gt;<br />72/ 48<br />
  73. 73. Style의 명시적 지정<br />명시적으로 스타일이 지정될 종류의 컨트롤을 지정할 수 있다. <br />&lt;Window.Resources&gt;<br /> &lt;Style TargetType=&quot;{x:Type Button}&quot;&gt;<br /> &lt;Setter Property=&quot;Button.FontSize&quot; Value=&quot;30&quot;/&gt;<br /> &lt;/Style&gt;<br />&lt;/Window.Resources&gt;<br />&lt;StackPanel&gt;<br /> &lt;Button&gt;Hello, World&lt;/Button&gt;<br /> &lt;Button&gt;안녕하세요&lt;/Button&gt;<br />&lt;/StackPanel&gt;<br />73/ 48<br />
  74. 74. Style의 상속<br />스타일을 상속해서 필요한 만큼 확장해서 사용할 수도 있다.<br />&lt;Window.Resources&gt;<br /> &lt;Style x:Key=&quot;parentStyle&quot;&gt;<br /> &lt;Setter Property=&quot;Control.Background“ alue=&quot;Yellow“/&gt;<br /> &lt;/Style&gt;<br /> &lt;Style x:Key=&quot;childStyle&quot; BasedOn=&quot;{StaticResourceparentStyle}&quot;&gt;<br /> &lt;Setter Property=&quot;Control.FontSize&quot; Value=&quot;30“/&gt;&lt;/Style&gt;<br />&lt;/Window.Resources&gt;<br />&lt;Button Style=&quot;{StaticResourceparentStyle}&quot;&gt;Hello, World&lt;/Button&gt;<br />&lt;Button Style=&quot;{StaticResourcechildStyle}“&gt;안녕하세요&lt;/Button&gt;<br />74/ 48<br />
  75. 75. Style Demo<br />75/ 48<br />
  76. 76. Transformations<br />All elements support them<br />Transform Types<br />&lt;RotateTransform /&gt;<br />&lt;ScaleTransform /&gt;<br />&lt;SkewTransform /&gt;<br />&lt;TranslateTransform /&gt;<br />&lt;MatrixTransform /&gt;<br />76/ 48<br />
  77. 77. RotateTransform (XAML)<br />&lt;TextBlock Text=&quot;Hello World&quot;&gt;<br /> &lt;TextBlock.RenderTransform&gt;<br /> &lt;RotateTransform Angle=&quot;45&quot; /&gt;<br /> &lt;/TextBlock.RenderTransform&gt;<br />&lt;/TextBlock&gt;<br />Hello World<br />Hello World<br />77/ 48<br />
  78. 78. RotateTransform (C#)<br />TextBlock block = new TextBlock();<br />RotateTransform Transform = new RotateTransform();<br />Transform.Angle = 45;<br />block.RenderTransform = transform;<br />Hello World<br />Hello World<br />78/ 48<br />
  79. 79. 79/ 48<br />
  80. 80. Data Binding<br />데이터를 표시하고 데이터와 상호 작용하는 간단하고 편리한 방법<br />Binding Source<br />Binding Target<br />DependencyObject<br />Object<br />Dependency Property<br />Property<br />Binding Object<br />80/ 48<br />
  81. 81. Data Binding<br />AuctionItem Class<br />Description<br />StartPrice<br />StartDate<br />Category<br />SpecialFeatures<br />81/ 48<br />
  82. 82. Data Binding<br />ElementName<br />Source<br />Path<br />Mode<br />82/ 48<br />
  83. 83. Data Binding Mode<br />Data Binding Mode를 통해 데이터의 흐름을 제어 할 수 있다.<br />Binding Source<br />Binding Target<br />Binding Object<br />DependencyObject<br />Object<br />Dependency Property<br />Property<br />One Way<br />Two Way<br />One Way Two Source<br />83/ 48<br />
  84. 84. Data Binding Demo<br />&lt;Slider Name=&quot;MySlider“ Minimum=&quot;10“ Maximum=&quot;200“ Value=&quot;50“ Margin=&quot;10&quot; /&gt;<br />&lt;Rectangle <br /> Width=&quot;{Binding ElementName=MySlider, Path=Value}&quot; <br /> Height=&quot;{Binding ElementName=MySlider, Path=Value}&quot; <br /> Fill=&quot;Orange“ VerticalAlignment=&quot;Center“ HorizontalAlignment=&quot;Center&quot; /&gt;<br />84/ 48<br />
  85. 85. Data Binding Data Conversion<br />Binding Source<br />Binding Target<br />Button Object<br />MyData Object<br />Binding Object<br />Background<br />Property (Brush)<br />Color Name<br />Property (String)<br />“RED”<br />Default Convertor<br />Red Button<br />문자열에서 의미하는 색상을 Brush Object로 변환 시켜주는 Default Converter를 지원하여 문자만으로도 원하는 색의 Brush로 변환이 가능하다.<br />85/ 48<br />
  86. 86. Data Binding Data Conversion<br />Binding Source<br />Binding Target<br />Button Object<br />MyData Object<br />Binding Object<br />Background<br />Property (Brush)<br />Color Name<br />Property (COLOR)<br />“RED” Object<br />Default Converter<br />?<br />Red Button<br />Default Converter가 지원 하지 않는 형식의 변환에 대해서는 직접 IValueConverter를 사용하여 Converter를 구현 할 수 있다.<br />86/ 48<br />
  87. 87. Data Binding Data Conversion<br />Binding Source<br />Binding Target<br />Button Object<br />MyData Object<br />Binding Object<br />Background<br />Property (Brush)<br />Color Name<br />Property (String)<br />“RED”<br />IValueConverter<br />Color Brush<br />Convertor<br />Red Button<br />87/ 48<br />
  88. 88. Template<br />Control<br />Template<br />Style<br />Property<br />Property<br />Property<br />Property<br />Control Logic<br />Event Trigger<br />88/ 48<br />
  89. 89. Template<br />&lt;(UIElement).Template&gt; 를 사용해 Template를 지정한다.<br />명시적으로 템플릿이 지정될 종류의 컨트롤을 지정할 수 있다. <br /> &lt;Button&gt;<br /> &lt;Button.Template&gt;<br /> &lt;ControlTemplate&gt;<br /> &lt;Ellipse Fill=&quot;Red&quot;&gt;&lt;/Ellipse&gt;<br /> &lt;/ControlTemplate&gt;<br /> &lt;/Button.Template&gt;<br /> &lt;/Button&gt;<br />89/ 48<br />
  90. 90. Template<br />&lt;Button Content=&quot;OK&quot;&gt;<br /> &lt;Button.Template&gt;<br /> &lt;ControlTemplate&gt;<br /> &lt;Grid&gt;<br /> &lt;Ellipse Fill=&quot;Red&quot; x:Name=&quot;Circle&quot;/&gt;<br /> &lt;/Grid&gt;<br /> &lt;ControlTemplate.Triggers&gt;<br /> &lt;Trigger Property=&quot;IsMouseOver&quot; Value=&quot;True&quot;&gt;<br /> &lt;Setter TargetName=&quot;Circle&quot; Property=&quot;Fill&quot; Value=&quot;Green&quot;/&gt;<br /> &lt;/Trigger&gt;<br /> &lt;/ControlTemplate.Triggers&gt;<br /> &lt;/ControlTemplate&gt;<br /> &lt;/Button.Template&gt;<br />&lt;/Button&gt;<br />90/ 48<br />
  91. 91. Template Binding<br />템플릿을 적용하는 부모의 Property를 Binding 하기 위해 사용<br />{ TemplateBinding (Property) } 과 같은 형식으로 사용<br />임의의 객체에 Binding 가능<br />ContentControl또는 ContentPresenter를 사용하면 다양한 형태의 Content를 Binding 할 수 있다.<br />91/ 48<br />
  92. 92. Template<br />&lt;Button Content=&quot;OK&quot;&gt;<br /> &lt;Button.Template&gt;<br /> &lt;ControlTemplate&gt;<br /> &lt;Grid&gt;<br /> &lt;Ellipse Fill=&quot;Red&quot; x:Name=&quot;Circle&quot;/&gt;<br /> &lt;TextBlock Text=&quot;{TemplateBindingButton.Content}&quot; <br />HorizontalAlignment=&quot;Center“ VerticalAlignment=&quot;Center&quot;/&gt;<br /> &lt;/Grid&gt;<br /> &lt;ControlTemplate.Triggers&gt;<br /> &lt;Trigger Property=&quot;IsMouseOver&quot; Value=&quot;True&quot;&gt;<br /> &lt;Setter TargetName=&quot;Circle&quot; Property=&quot;Fill&quot; Value=&quot;Green&quot;/&gt;<br /> &lt;/Trigger&gt;<br /> &lt;/ControlTemplate.Triggers&gt;<br /> &lt;/ControlTemplate&gt;<br /> &lt;/Button.Template&gt;<br />&lt;/Button&gt;<br />92/ 48<br />
  93. 93. Template<br />&lt;Button Content=&quot;OK&quot;&gt;<br /> &lt;Button.Template&gt;<br /> &lt;ControlTemplate&gt;<br /> &lt;Grid&gt;<br /> &lt;Ellipse Fill=&quot;Red&quot; x:Name=&quot;Circle&quot;/&gt;<br /> &lt;ContentControl Content=&quot;{TemplateBindingButton.Content}&quot; <br />HorizontalAlignment=&quot;Center“ VerticalAlignment=&quot;Center&quot;/&gt;<br /> &lt;/Grid&gt;<br /> &lt;ControlTemplate.Triggers&gt;<br /> &lt;Trigger Property=&quot;IsMouseOver&quot; Value=&quot;True&quot;&gt;<br /> &lt;Setter TargetName=&quot;Circle&quot; Property=&quot;Fill&quot; Value=&quot;Green&quot;/&gt;<br /> &lt;/Trigger&gt;<br /> &lt;/ControlTemplate.Triggers&gt;<br /> &lt;/ControlTemplate&gt;<br /> &lt;/Button.Template&gt;<br />&lt;/Button&gt;<br />93/ 48<br />
  94. 94. Template<br />&lt;Button &gt;<br /> &lt;Button.Template&gt;<br /> &lt;ControlTemplate&gt;<br /> &lt;Grid&gt;<br /> &lt;Ellipse Fill=&quot;Red&quot; x:Name=&quot;Circle&quot;/&gt;<br /> &lt;ContentControl Content=&quot;{TemplateBindingButton.Content}&quot; <br />HorizontalAlignment=&quot;Center“ VerticalAlignment=&quot;Center&quot;/&gt;<br /> &lt;/Grid&gt;<br /> &lt;ControlTemplate.Triggers&gt;<br /> &lt;Trigger Property=&quot;IsMouseOver&quot; Value=&quot;True&quot;&gt;<br /> &lt;Setter TargetName=&quot;Circle&quot; Property=&quot;Fill&quot; Value=&quot;Green&quot;/&gt;<br /> &lt;/Trigger&gt;<br /> &lt;/ControlTemplate.Triggers&gt;<br /> &lt;/ControlTemplate&gt;<br /> &lt;/Button.Template&gt;<br /> &lt;Image Source=&quot;Test.jpg&quot; Width=&quot;80&quot;&gt;&lt;/Image&gt;<br />&lt;/Button&gt;<br />94/ 48<br />
  95. 95. Skin<br />Skinning<br />95/ 48<br />
  96. 96. Skin<br />&lt;Grid&gt;<br /> &lt;StackPanel Style=“{DynamicResourceDialogStyle}” &gt;<br /> &lt;Label Style = “{DynamicResourceHeadingStyle}”&gt; Loading…&lt;/Label&gt;<br /> &lt;ProgressBar Value=“35” Margin=“20” /&gt;<br /> &lt;Button Style=“{DynamicResourceCancelButtonStyle}” Width=“70” Content=“Cancel”/&gt;<br /> &lt;/StackPanel&gt;<br />&lt;/Grid&gt;<br />96/ 48<br />
  97. 97. Skin<br />&lt;ResourceDictionary&gt;<br />&lt;Style x:Key=&quot;DialogStyle&quot; TargetType=&quot;{x:Type StackPanel}&quot;&gt;<br /> &lt;Setter Property=&quot;Background&quot; Value=&quot;Red&quot;/&gt;<br />&lt;/Style&gt;<br />&lt;Style x:Key=&quot;HeadingStyle&quot; TargetType=&quot;{x:Type Label}&quot;&gt;<br /> &lt;Setter Property=&quot;FontSize&quot; Value=&quot;18&quot;/&gt;<br /> &lt;Setter Property=&quot;FontWeight&quot; Value=&quot;Bold&quot; /&gt; <br />&lt;/Style&gt;<br />&lt;/ResourceDictionary&gt;<br />97/ 48<br />

×