Wpf세미나

2,145 views
2,025 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,145
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×