Windows Presentation Foundation

2016. 8. 26. 15:16

Windows Presentation Foundation 프로그래밍/WPF2016. 8. 26. 15:16

https://msdn.microsoft.com/ko-kr/library/ms754130(v=vs.110).aspx

WPF 연습

https://msdn.microsoft.com/ko-kr/library/ee649089(v=vs.110).aspx

연습: WPF Designer를 사용하여 간단한 WPF 응용 프로그램 만들기

XAML

<Window x:Class="WpfApplication2.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:my="clr-namespace:WpfApplication2"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:WpfApplication2"

mc:Ignorable="d"

Title="Folder Explorer" Height="350" Width="525">

<Window.Resources>

<ObjectDataProvider.ObjectInstance>

<my:Folder FullPath="d:\"/>

</ObjectDataProvider.ObjectInstance>

</ObjectDataProvider>

<HierarchicalDataTemplate

DataType = "{x:Type my:Folder}"

ItemsSource = "{Binding Path=SubFolders}">

</HierarchicalDataTemplate>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</TreeView>

<ListView Name="listView1"

ItemsSource="{Binding Path=SelectedItem.SubFolders, ElementName=treeView1, Mode=OneWay}"

Grid.Column="1"

Grid.RowSpan="1" />

<ListView Name="listView2"

ItemsSource="{Binding Path=SelectedItem.Files, ElementName=treeView1, Mode=OneWay}"

Grid.Column="1"

Grid.Row="1" />

</Grid>

</Window>

Folder.cs

using System;

using System.IO;

using System.Linq;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Text;

namespace WpfApplication2

{

public class Folder

{

private DirectoryInfo _folder;

private ObservableCollection<Folder> _subFolders;

private ObservableCollection<FileInfo> _files;

public Folder()

{

this.FullPath = @"c:\";

}

public string Name

{

get

{

return this._folder.Name;

}

public string FullPath

{

get

{

return this._folder.FullName;

}

set

{

if (Directory.Exists(value))

{

this._folder = new DirectoryInfo(value);

}

else

{

throw new ArgumentException("must exist", "fullPath");

}

public ObservableCollection<FileInfo> Files

{

get

{

if (this._files == null)

{

this._files = new ObservableCollection<FileInfo>();

FileInfo[] fi = this._folder.GetFiles();

for (int i = 0; i < fi.Length; i++)

{

this._files.Add(fi[i]);

}

return this._files;

}

public ObservableCollection<Folder> SubFolders

{

get

{

if (this._subFolders == null)

{

this._subFolders = new ObservableCollection<Folder>();

DirectoryInfo[] di = this._folder.GetDirectories();

for (int i = 0; i < di.Length; i++)

{

Folder newFolder = new Folder();

newFolder.FullPath = di[i].FullName;

this._subFolders.Add(newFolder);

}

return this._subFolders;

}

WPF 소개

https://msdn.microsoft.com/ko-kr/library/mt149842.aspx

1. WPF(Windows Presentation Foundation)를 사용하면 시각적으로 뛰어난 사용자 환경을 통해 Windows용 데스크톱 클라이언트 응용 프로그램을 만들 수 있습니다.

2. WPF의 핵심은 최신 그래픽 하드웨어를 활용하도록 작성된 해상도 독립적인 벡터 기반 렌더링 엔진입니다.

3. WPF는 XAML(Extensible Application Markup Language), 컨트롤, 데이터 바인딩, 레이아웃, 2차원 및 3차원 그래픽, 애니메이션, 스타일, 템플릿, 문서, 미디어, 텍스트 및 입력 체계를 포함하는 포괄적인 응용 프로그램 개발 기능을 사용하여 핵심을 확장합니다.

4. WPF는 .NET Framework에 포함되어 있으므로 .NET Framework 클래스 라이브러리의 다른 요소를 통합하는 응용 프로그램을 빌드할 수 있습니다.

5. 이 개요는 초보자를 위한 것이며 WPF의 주요 기능 및 개념에 대해 설명합니다.

WPF를 사용한 프로그래밍

1. WPF는 대부분 System.Windows 네임스페이스에 있는 .NET Framework 형식의 하위 집합으로 존재합니다.

2. 이전에 ASP.NET 및 Windows Forms와 같은 관리되는 기술을 사용하여 .NET Framework로 응용 프로그램을 빌드한 적이 있는 경우 기본적인 WPF 프로그래밍 환경이 친숙할 것입니다.

3. 모두 C# 또는 Visual Basic과 같은 원하는 .NET 프로그래밍 언어를 사용하여 클래스를 인스턴스화하고, 속성을 설정하고, 메서드를 호출하고, 이벤트를 처리합니다.

4. WPF에는 속성 및 이벤트를 향상시키는 종속성 속성 및 라우트된 이벤트와 같은 추가 프로그래밍 구문이 포함되어 있습니다.

태그 및 코드 숨김

1. WPF를 사용하면 ASP.NET 개발자에게 익숙한 환경인 태그 및 코드 숨김 둘 다를 통해 응용 프로그램을 개발할 수 있습니다.

2. 일반적으로 XAML 태그를 사용하여 응용 프로그램의 모양을 구현하고 관리되는 프로그래밍 언어(코드 숨김)를 사용하여 해당 동작을 구현합니다. 모양 및 동작의 이러한 분리는 다음과 같은 이점이 있습니다.

1) 모양 관련 태그가 동작 관련 코드와 밀접하게 결합되지 않으므로 개발 및 유지 관리 비용이 줄어듭니다.

2) 디자이너가 응용 프로그램의 동작을 구현하는 개발자와 동시에 응용 프로그램의 모양을 구현할 수 있으므로 개발이 보다 효율적입니다.

3) WPF 응용 프로그램에 대한 전역화 및 지역화가 간소화됩니다.

3. 다음은 WPF 태그 및 코드 숨김에 대한 간략한 소개입니다.

태그

1. XAML은 선언적으로 응용 프로그램의 모양을 구현하는 데 사용되는 XML 기반 태그 언어입니다.

2. 일반적으로 창, 대화 상자, 페이지 및 사용자 정의 컨트롤을 만들고 컨트롤, 도형 및 그래픽으로 채우는 데 사용됩니다.

3. 다음 예제에서는 XAML을 사용하여 단일 단추가 포함된 창의 모양을 구현합니다.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="Window with Button" Width="250" Height="100"> <!-- Add button to window --> <Button Name="button">Click Me!</Button> </Window>

4. 특히, 이 XAML은 각각 Window 및 Button 요소를 사용하여 창과 단추를 정의합니다.

5. 각 요소는 창의 제목 표시줄 텍스트를 지정하는 Window 요소의 Title 특성과 같은 특성으로 구성됩니다.

6. 런타임에 WPF는 태그에 정의된 요소와 특성을 WPF 클래스 인스턴스로 변환합니다.

7. 예를 들어 Window 요소는 Title 속성이 Title 특성의 값인 Window 클래스 인스턴스로 변환됩니다.

8. 다음 그림은 이전 예제에서 XAML로 정의된 UI(사용자 인터페이스)를 보여 줍니다.

9. XAML은 XML 기반이기 때문에 XAML로 작성한 UI는 요소 트리라고 하는 중첩된 요소 계층 구조로 어셈블됩니다. 10. 요소 트리는 UI를 만들고 관리하는 논리적이고 직관적인 방법을 제공합니다.

코드 숨김

1. 응용 프로그램의 기본 동작은 이벤트 처리(예: 메뉴, 도구 모음 또는 단추 클릭) 및 응답으로 비즈니스 논리 및 데이터 액세스 논리 호출을 포함하여 사용자 조작에 응답하는 기능을 구현하는 것입니다.

2. WPF에서 이 동작은 일반적으로 태그와 연결된 코드에서 구현됩니다.

3. 이러한 종류의 코드를 코드 숨김이라고 합니다.

4. 다음 예제에서는 이전 예제의 업데이트된 태그 및 코드 숨김을 보여 줍니다.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SDKSample.AWindow" Title="Window with Button" Width="250" Height="100"> <!-- Add button to window --> <Button Name="button" Click="button_Click">Click Me!</Button> </Window>

using System.Windows; // Window, RoutedEventArgs, MessageBox namespace SDKSample { public partial class AWindow : Window { public AWindow() { // InitializeComponent call is required to merge the UI // that is defined in markup with this class, including // setting properties and registering event handlers InitializeComponent(); } void button_Click(object sender, RoutedEventArgs e) { // Show message box when button is clicked MessageBox.Show("Hello, Windows Presentation Foundation!"); } } }

5. 이 예제에서 코드 숨김은 Window 클래스에서 파생된 클래스를 구현합니다.

6. x:Class 특성은 태그를 코드 숨김 클래스와 연결하는 데 사용됩니다.

7. InitializeComponent는 코드 숨김 클래스를 사용하여 태그에서 정의된 UI를 병합하기 위해 코드 숨김 클래스의 생성자에서 호출됩니다.

8. InitializeComponent는 응용 프로그램을 빌드할 때 자동으로 생성되므로 직접 구현할 필요가 없습니다.

9. x:Class 및 InitializeComponent를 조합하면 구현을 만들 때마다 올바르게 초기화됩니다.

10. 코드 숨김 클래스는 단추의 Click 이벤트에 대한 이벤트 처리기도 구현합니다.

11. 단추를 클릭하면 이벤트 처리기가 MessageBox.Show 메서드를 호출하여 메시지 상자를 표시합니다.

12. 다음 그림은 단추를 클릭할 때의 결과를 보여 줍니다.

컨트롤

1. 응용 프로그램 모델에서 제공하는 사용자 환경은 생성된 컨트롤입니다.

2. WPF에서 "컨트롤"은 창이나 페이지에서 호스트되고 사용자 인터페이스가 있으며 일부 동작을 구현하는 WPF 클래스의 한 범주에 적용되는 포괄적인 용어입니다.

3. 자세한 내용은 컨트롤을 참조하세요.

기능별 WPF 컨트롤

1. 기본 제공 WPF 컨트롤은 다음과 같습니다.

1. 단추: Button 및 RepeatButton

2. 데이터 표시: DataGrid, ListView 및 TreeView

3. 날짜 표시 및 선택: Calendar 및 DatePicker

4. 대화 상자: OpenFileDialog, PrintDialog 및 SaveFileDialog

5. 디지털 잉크: InkCanvas 및 InkPresenter

6. 문서: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer 및 StickyNoteControl

7. 입력: TextBox, RichTextBox 및 PasswordBox

8. 레이아웃: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window 및 WrapPanel

9. 미디어: Image, MediaElement 및 SoundPlayerAction

10. 메뉴: ContextMenu, Menu 및 ToolBar

11. 탐색: Frame, Hyperlink, Page, NavigationWindow 및 TabControl

12. 선택: CheckBox, ComboBox, ListBox, RadioButton 및 Slider

13. 사용자 정보: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock 및 ToolTip

입력 및 명령

1. 컨트롤은 대체로 사용자 입력을 감지하고 응답합니다.

2. WPF 입력 시스템은 직접 및 라우트된 이벤트를 사용하여 텍스트 입력, 포커스 관리 및 마우스 위치 지정을 지원합니다.

3. 응용 프로그램에 복잡한 입력 요구 사항이 있는 경우가 많습니다.

4. WPF는 사용자 입력 작업을 이러한 작업에 응답하는 코드에서 분리하는 명령 시스템을 제공합니다.

레이아웃

1. 사용자 인터페이스를 만들 때 위치 및 크기별로 컨트롤을 정렬하여 레이아웃을 구성합니다.

2. 모든 레이아웃의 주요 요구 사항은 창 크기와 표시 설정의 변경 내용에 맞게 조정되는 것입니다.

3. 이러한 상황에서 레이아웃을 조정하는 코드를 작성하도록 요구하는 대신 WPF는 확장 가능한 뛰어난 레이아웃 시스템을 제공합니다.

4. 이 레이아웃 시스템의 토대는 상대 위치 지정으로, 변화하는 창과 표시 조건에 맞게 조정하는 기능을 향상시킵니다.

5. 또한 이 레이아웃 시스템은 레이아웃을 결정하기 위한 컨트롤 간의 협상을 관리합니다.

6. 협상은 2단계 프로세스입니다.

7. 첫 번째로, 컨트롤이 필요한 위치 및 크기를 부모에게 알립니다.

8. 두 번째로, 부모가 사용할 수 있는 공간을 컨트롤에 알립니다.

9. 이 레이아웃 시스템은 기본 WPF 클래스를 통해 자식 컨트롤에 노출됩니다.

10. 그리드, 스택 및 도킹과 같은 일반적인 레이아웃을 위해 WPF는 여러 레이아웃 컨트롤을 포함합니다.

1. Canvas: 자식 컨트롤이 자체 레이아웃을 제공합니다.

2. DockPanel: 자식 컨트롤이 패널 가장자리에 맞춰집니다.

3. Grid: 자식 컨트롤이 행 및 열별로 배치됩니다.

4. StackPanel: 자식 컨트롤이 가로 또는 세로로 포개집니다.

5. VirtualizingStackPanel: 자식 컨트롤이 가상화되고 가로 또는 세로 방향인 한 줄에 정렬됩니다.

6. WrapPanel: 자식 컨트롤이 왼쪽에서 오른쪽 순서로 배치되고 공간에 허용되는 것보다 더 많은 컨트롤이 현재 줄에 있는 경우 다음 줄로 줄 바꿈됩니다.

11. 다음 예제에서는 DockPanel 하나를 사용하여 여러 TextBox 컨트롤을 레이아웃합니다.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">

  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

12. DockPanel을 사용하면 자식 TextBox 컨트롤이 정렬 방법을 알려줄 수 있습니다.

13. 이 작업을 수행하기 위해 DockPanel은 각각 도킹 스타일을 지정할 수 있도록 자식 컨트롤에 노출되는 Dock 속성을 구현합니다.

참고

자식 컨트롤에서 사용할 수 있도록 부모 컨트롤이 구현하는 속성은 연결된 속성이라는 WPF 구문입니다.

14. 다음 그림에서는 이전 예제의 XAML 태그 결과를 보여 줍니다.

데이터 바인딩

1. 대부분의 응용 프로그램은 데이터를 보고 편집할 수 있는 수단을 사용자에게 제공하기 위해 생성됩니다.

2. WPF 응용 프로그램의 경우 데이터를 저장 및 액세스하는 작업이 SQL Server 및 ADO .NET과 같은 기술에 의해 이미 제공됩니다.

3. 데이터에 액세스하고 응용 프로그램의 관리되는 개체에 로드한 후 WPF 응용 프로그램에 대한 힘든 작업이 시작됩니다.

4. 기본적으로 다음 두 가지가 포함됩니다.

1) 관리되는 개체에서 데이터를 표시 및 편집할 수 있는 컨트롤로 데이터 복사

2) 컨트롤을 사용한 데이터 변경 내용이 관리되는 개체에 다시 복사되는지 확인

5. 응용 프로그램 개발을 간소화하기 위해 WPF는 이러한 단계를 자동으로 수행하는 데이터 바인딩 엔진을 제공합니다.

6. 데이터 바인딩 엔진의 핵심 단위는 Binding 클래스로, 컨트롤(바인딩 대상)을 데이터 개체(바인딩 소스)에 바인딩하는 작업을 수행합니다.

7. 이 관계는 다음 그림에 나와 있습니다.

8. 다음 예제에서는 TextBox를 사용자 지정 Person 개체의 인스턴스에 바인딩하는 방법을 보여 줍니다.

9. Person 구현은 다음 코드에 나와 있습니다.

namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.DataBindingWindow">

<!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />

</Window>

using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

10. 이 예제에서 Person 클래스는 코드 숨김에서 인스턴스화되고 DataBindingWindow에 대한 데이터 컨텍스트로 설정됩니다.

11. 태그에서 TextBox의 Text 속성은 "{Binding ... }" XAML 구문을 사용하여 Person.Name 속성에 바인딩됩니다.

12. 이 XAML은 창의 DataContext 속성에 저장된 Person 개체에 TextBox 컨트롤을 바인딩하도록 WPF에 알립니다.

13. WPF 데이터 바인딩 엔진은 유효성 검사, 정렬, 필터링 및 그룹화를 포함하는 추가 지원을 제공합니다.

14. 또한 데이터 바인딩은 표준 WPF 컨트롤에 의해 표시되는 사용자 인터페이스가 적절하지 않은 경우 데이터 템플릿을 사용하여 바인딩된 데이터에 대한 사용자 지정 사용자 인터페이스를 만들 수 있도록 지원합니다.

15. 자세한 내용은 데이터 바인딩 개요를 참조하세요.

그래픽

1. WPF는 다음과 같은 이점이 있는 광범위하고 확장 가능하며 유연한 그래픽 집합을 도입합니다.

1. 해상도 및 장치 독립적인 그래픽. WPF 그래픽 시스템의 기본 측정 단위는 실제 화면 해상도에 관계없이 1/96 인치인 장치 독립적 픽셀이며, 해상도 및 장치 독립적인 렌더링을 위한 토대를 제공합니다. 각 장치 독립적 픽셀은 렌더링되는 시스템의 dpi(인치당 도트 수) 설정에 맞게 자동으로 확장됩니다.

2. 향상된 정밀도. WPF 좌표계는 단정밀도 대신 배정밀도 부동 소수점 숫자로 측정됩니다. 변환 및 불투명도 값도 배정밀도로 표현됩니다. 또한 WPF는 광범위한 색 영역(scRGB)을 지원하며 여러 색 공간의 입력을 관리하기 위한 통합 지원을 제공합니다.

3. 고급 그래픽 및 애니메이션 지원. WPF는 애니메이션 장면을 관리하여 그래픽 프로그래밍을 간소화합니다. 장면 처리, 렌더링 루프 및 쌍선형 보간에 대해 걱정할 필요가 없습니다. 또한 WPF는 적중 테스트 및 전체 알파 합치기를 지원합니다.

4. 하드웨어 가속. WPF 그래픽 시스템은 그래픽 하드웨어를 활용하여 CPU 사용량을 최소화합니다.

2차원 도형

1. WPF는 다음 그림에 표시된 사각형 및 타원과 같은 일반적인 벡터 기반의 2차원 도형 라이브러리를 제공합니다.

2. 도형의 흥미로운 기능은 표시에 사용되는 것뿐 아니라 키보드 및 마우스 입력을 비롯하여 컨트롤에서 기대하는 기능을 대부분 구현한다는 것입니다.

3. 다음 예제에서는 Ellipse의 MouseUp 이벤트가 처리되는 과정을 보여 줍니다.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>

using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

4. 다음 그림은 위의 코드에서 생성되는 내용을 보여 줍니다.

5. 자세한 내용은 WPF에서 Shape 및 기본 그리기 개요를 참조하세요.

2차원 기하 도형

1. WPF에서 제공하는 2차원 도형은 기본 도형의 표준 집합을 다룹니다.

2. 그러나 사용자 지정 사용자 인터페이스의 디자인이 용이하도록 사용자 지정 도형을 만들어야 할 수도 있습니다.

3. 이 용도로 WPF는 기하 도형을 제공합니다. 다음 그림은 기하 도형을 사용하여 직접 그리거나, 브러시로 사용하거나, 다른 도형 및 컨트롤을 자르는 데 사용할 수 있는 사용자 지정 도형을 만드는 과정을 보여 줍니다.

4. Path 개체는 닫혔거나 열린 도형, 여러 도형 및 곡선 도형을 그리는 데 사용할 수 있습니다.

5. Geometry 개체는 자르기, 적중 테스트 및 2차원 그래픽 데이터 렌더링에 사용할 수 있습니다.

2차원 효과

1. WPF 2차원 기능의 하위 집합에는 그라데이션, 비트맵, 그리기, 비디오로 그리기, 회전, 크기 조정 및 기울이기와 같은 시각 효과가 포함됩니다. 브러시를 통해 이러한 모든 효과를 얻을 수 있습니다.

2. 다음 그림에서는 몇 가지 예를 보여 줍니다.

3차원 렌더링

1. WPF에는 더 흥미로운 사용자 인터페이스를 만들 수 있도록 2차원 그래픽을 통합하는 3차원 렌더링 기능도 포함되어 있습니다.

2. 예를 들어 다음 그림에서는 3차원 도형에 렌더링된 2차원 이미지를 보여 줍니다.

애니메이션

1. WPF 애니메이션 지원을 사용하면 컨트롤이 커지거나, 흔들리거나, 회전하거나, 사라지도록 하여 흥미로운 페이지 전환 등을 만들 수 있습니다.

2. 사용자 지정 클래스를 비롯한 대부분의 WPF 클래스에 애니메이션 효과를 줄 수 있습니다.

3. 다음 그림에서는 간단한 애니메이션의 작동을 보여 줍니다.

4. 자세한 내용은 애니메이션 개요를 참조하세요.

미디어

1. 풍부한 콘텐츠를 전달하는 한 가지 방법은 시청각 미디어를 사용하는 것입니다.

2. WPF는 이미지, 비디오 및 오디오에 대한 특별한 지원을 제공합니다.

이미지

1. 이미지는 대부분의 응용 프로그램에서 공통적으로 사용되며 WPF는 이미지를 사용하는 여러 방법을 제공합니다.

2. 다음 그림에서는 미리 보기 이미지를 포함하는 목록 상자가 있는 사용자 인터페이스를 보여 줍니다.

3. 미리 보기를 선택하면 이미지가 전체 크기로 표시됩니다.

4. 자세한 내용은 이미징 개요를 참조하세요.

비디오 및 오디오

1. MediaElement 컨트롤은 비디오와 오디오를 둘 다 재생할 수 있으며 사용자 지정 미디어 플레이어의 토대가 될 수 있을 정도로 유연합니다.

2. 다음 XAML 태그는 미디어 플레이어를 구현합니다.

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

3. 다음 그림의 창에서는 MediaElement 컨트롤의 작동을 보여 줍니다.

4. 자세한 내용은 WPF 그래픽, 애니메이션 및 미디어 개요를 참조하세요.

텍스트 및 입력 체계

1. 고품질 텍스트 렌더링이 용이하도록 WPF는 다음 기능을 제공합니다.

1) OpenType 글꼴 지원

2) ClearType 향상

3) 하드웨어 가속을 활용하는 고성능

4) 미디어, 그래픽 및 애니메이션과 텍스트 통합

5) 국가별 글꼴 지원 및 대체(fallback) 메커니즘

2. 텍스트와 그래픽 통합의 데모로, 다음 그림에서는 텍스트 장식의 응용을 보여 줍니다.

WPF 응용 프로그램 사용자 지정

1. 지금까지 응용 프로그램을 개발하기 위한 핵심 WPF 구성 요소를 살펴봤습니다.

2. 응용 프로그램 모델을 사용하여 주로 컨트롤로 구성된 응용 프로그램 콘텐츠를 호스트 및 제공합니다.

3. 사용자 인터페이스에서 컨트롤 정렬을 간소화하고 창 크기 및 디스플레이 설정이 변경되어도 정렬이 유지되도록 하기 위해 WPF 레이아웃 시스템을 사용합니다.

4. 대부분의 응용 프로그램은 사용자의 데이터 조작을 허용하므로 데이터 바인딩을 사용하여 사용자 인터페이스와 데이터 통합 작업을 줄입니다.

5. 응용 프로그램의 시각적 모양을 개선하려면 WPF에서 제공하는 광범위한 그래픽, 애니메이션 및 미디어 지원을 사용합니다.

6. 하지만 기본 사항이 고유하고 시각적으로 멋진 사용자 환경을 만들고 관리하는 데 충분하지 않은 경우도 많습니다.

7. 표준 WPF 컨트롤이 원하는 응용 프로그램 모양과 통합되지 않을 수 있습니다.

8. 데이터가 가장 효율적인 방식으로 표시되지 않을 수도 있습니다.

9. 응용 프로그램의 전반적인 사용자 환경이 Windows 테마의 기본 모양과 느낌에 적합하지 않을 수 있습니다.

10. 여러 측면에서 프레젠테이션 기술은 다른 종류의 확장성만큼 시각적 확장성을 필요로 합니다.

11. 이런 이유로 WPF는 컨트롤, 트리거, 컨트롤 및 데이터 템플릿, 스타일, 사용자 인터페이스 리소스, 테마 및 스킨에 대한 풍부한 콘텐츠 모델을 포함하여 고유한 사용자 환경을 만들기 위한 다양한 메커니즘을 제공합니다.

콘텐츠 모델

1. 대부분의 WPF 컨트롤은 주로 콘텐츠를 표시하는 데 사용됩니다.

2. WPF에서 컨트롤의 콘텐츠를 구성할 수 있는 항목의 유형과 개수를 컨트롤의 콘텐츠 모델이라고 합니다.

3. 일부 컨트롤은 단일 항목 및 유형의 콘텐츠를 포함할 수 있습니다.

4. 예를 들어 TextBox의 콘텐츠는 Text 속성에 할당되는 문자열 값입니다.

5. 다음 예제에서는 TextBox의 콘텐츠를 설정합니다.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">

<TextBox Text="This is the content of a TextBox." />

</Window>

6. 다음 그림에서는 결과를 보여 줍니다.

7. 그러나 다른 컨트롤은 다양한 콘텐츠 형식의 여러 항목을 포함할 수 있습니다.

8. Content 속성으로 지정된 Button의 콘텐츠에는 레이아웃 컨트롤, 텍스트, 이미지 및 도형을 포함하여 다양한 항목이 포함될 수 있습니다.

9. 다음 예제에서는 DockPanel, Label, Border 및 MediaElement를 포함하는 콘텐츠가 있는 Button을 보여 줍니다.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">

<Button Margin="20">
  <!-- Button Content -->
  <DockPanel Width="200" Height="180">
    <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
    <Border Background="Black" BorderBrush="Yellow" BorderThickness="2" 
      CornerRadius="2" Margin="5">
      <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
    </Border>
  </DockPanel>
</Button>

</Window>

10. 다음 그림에서는 이 단추의 콘텐츠를 보여 줍니다.

11. 다양한 컨트롤에서 지원하는 콘텐츠 종류에 대한 자세한 내용은 WPF 콘텐츠 모델을 참조하세요.

트리거

1. XAML 태그의 주요 용도는 응용 프로그램의 모양을 구현하는 것이지만 XAML을 사용하여 응용 프로그램 동작의 일부 측면을 구현할 수도 있습니다.

2. 한 가지 예는 트리거를 사용하여 사용자 조작에 따라 응용 프로그램의 모양을 변경하는 것입니다.

3. 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.

컨트롤 템플릿

1. WPF 컨트롤의 기본 사용자 인터페이스는 일반적으로 다른 컨트롤 및 도형에서 구성됩니다.

2. 예를 들어 Button은 ButtonChrome 및 ContentPresenter 컨트롤 둘 다로 구성됩니다.

3. ButtonChrome은 표준 단추 모양을 제공하는 반면, ContentPresenter는 Content 속성에 지정된 대로 단추의 콘텐츠를 표시합니다.

4. 컨트롤의 기본 모양이 응용 프로그램의 전반적인 모양에 맞지 않을 수도 있습니다.

5. 이 경우 ControlTemplate을 사용하여 해당 콘텐츠 및 동작을 변경하지 않고 컨트롤의 사용자 인터페이스 모양을 변경할 수 있습니다.

6. 예를 들어 다음 예제에서는 ControlTemplate을 사용하여 Button의 모양을 변경하는 방법을 보여 줍니다.

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

7. 이 예제에서는 기본 단추 사용자 인터페이스가 진한 파란색 테두리가 있는 Ellipse로 대체되고 RadialGradientBrush를 사용하여 채워집니다.

8. ContentPresenter 컨트롤은 Button의 콘텐츠인 "Click Me!"를 표시합니다. Button을 클릭하면 Click 이벤트가 Button 컨트롤의 기본 동작의 일부로 여전히 발생합니다. 결과는 다음 그림에 나와 있습니다.

데이터 템플릿

1. 컨트롤 템플릿을 사용하면 컨트롤의 모양을 지정할 수 있는 반면 데이터 템플릿을 사용하면 컨트롤 콘텐츠의 모양을 지정할 수 있습니다.

2. 데이터 템플릿은 바인딩된 데이터가 표시되는 방식을 개선하는 데 자주 사용됩니다.

3. 다음 그림은 각 작업에 이름, 설명 및 우선 순위가 있는 Task 개체의 컬렉션에 바인딩된 ListBox의 기본 모양을 보여 줍니다.

4. 기본 모양은 ListBox에서 예상되는 모양입니다.

5. 그러나 각 작업의 기본 모양은 작업 이름만 포함합니다.

6. 작업 이름, 설명 및 우선 순위를 표시하려면 DataTemplate을 사용하여 ListBox 컨트롤의 바인딩된 목록 항목에 대한 기본 모양을 변경해야 합니다.

7. 다음 XAML은 ItemTemplate 특성을 사용하여 각 작업에 적용되는 이러한 DataTemplate을 정의합니다.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">

<Window.Resources>

  <!-- Data Template (applied to each bound task item in the task collection) -->
  <DataTemplate x:Key="myTaskTemplate">
    <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2" 
      CornerRadius="2" Padding="5" Margin="5">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
      </Grid>
    </Border>  
  </DataTemplate>
</Window.Resources>

<!-- UI -->
<DockPanel>
  <!-- Title -->
  <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

  <!-- Data template is specified by the ItemTemplate attribute -->
  <ListBox 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource myTaskTemplate}" 
    HorizontalContentAlignment="Stretch" 
    IsSynchronizedWithCurrentItem="True" 
    Margin="5,0,5,5" />

</DockPanel>

</Window>

8. 다음 그림에서는 이 코드의 영향을 보여 줍니다.

9. ListBox의 동작과 전반적인 모양은 유지되고 목록 상자에 표시되는 콘텐츠의 모양만 변경되었습니다.

10. 자세한 내용은 데이터 템플릿 개요를 참조하세요.

스타일

1. 스타일을 사용하면 개발자와 디자이너가 해당 제품에 대해 특정 모양을 표준화할 수 있습니다.

2. WPF는 Style 요소를 기반으로 하는 강력한 스타일 모델을 제공합니다.

3. 다음 예제에서는 창에 있는 모든 Button의 배경색을 Orange로 설정하는 스타일을 만듭니다.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">

<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="Crimson" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Margin" Value="5" />
</Style>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

<!-- This label will not have the style applied to it -->
<Label>Don't Click Me!</Label>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

</Window>

4. 이 스타일은 모든 Button 컨트롤을 대상으로 하기 때문에 다음 그림과 같이 창에 있는 모든 단추에 스타일이 자동으로 적용됩니다.

5. 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.

리소스

1. 응용 프로그램의 컨트롤은 글꼴 및 배경색부터 컨트롤 템플릿, 데이터 템플릿 및 스타일까지 모든 항목을 포함할 수 있는 동일한 모양을 공유해야 합니다.

2. 사용자 인터페이스 리소스에 대한 WPF 지원을 사용하여 재사용을 위해 이러한 리소스를 단일 위치에 캡슐화할 수 있습니다.

3. 다음 예제에서는 Button 및 Label에서 공유하는 공통 배경색을 정의합니다.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>

<!-- Button background is defined by window-scoped resource -->
<Button Background="{StaticResource defaultBackground}">One Button</Button>

<!-- Label background is defined by window-scoped resource -->
<Label Background="{StaticResource defaultBackground}">One Label</Label>

</Window>

4. 이 예제에서는 Window.Resources 속성 요소를 사용하여 배경색 리소스를 구현합니다.

5. 이 리소스는 Window의 모든 자식에서 사용할 수 있습니다.

6. 다음을 포함하여 다양한 리소스 범위가 있습니다(확인되는 순서대로 나열됨).

1) 개별 컨트롤(상속된 FrameworkElement.Resources 속성 사용)

2) Window 또는 Page(또한 상속된 FrameworkElement.Resources 속성 사용)

3) Application(Application.Resources 속성 사용)

7. 다양한 범위는 리소스를 정의 및 공유하는 방법과 관련해서 유연성을 제공합니다.

8. 리소스를 특정 범위에 직접 연결하는 대신, 응용 프로그램의 다른 부분에서 참조할 수 있는 별도 ResourceDictionary를 사용하여 하나 이상의 리소스를 패키지할 수 있습니다.

9. 예를 들어 다음 예제에서는 리소스 사전의 기본 배경색을 정의합니다.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->

</ResourceDictionary>

10. 다음 예제에서는 응용 프로그램 간에 공유되도록 이전 예제에서 정의된 리소스 사전을 참조합니다.

<Application

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>

</Application>

11. 리소스 및 리소스 사전은 테마 및 스킨에 대한 WPF 지원의 기반이 됩니다.

12. 자세한 내용은 리소스 개요를 참조하세요.

사용자 지정 컨트롤

1. WPF는 다양한 사용자 지정 지원을 제공하지만 기존 WPF 컨트롤이 응용 프로그램 또는 해당 사용자의 요구를 충족하지 않는 경우가 발생할 수 있습니다.

2. 이 오류는 다음과 같은 경우에 발생할 수 있습니다.

1) 기존 WPF 구현의 모양과 느낌을 사용자 지정하여 필요한 사용자 인터페이스를 만들 수 없는 경우

2) 필요한 동작이 기존 WPF 구현에서 지원되지 않는 경우(또는 쉽게 지원되지 않는 경우)

3. 그러나 이제 세 가지 WPF 모델 중 하나를 활용하여 새 컨트롤을 만들 수 있습니다.

4. 각 모델은 특정 시나리오를 대상으로 하며, 특정 WPF 기본 클래스에서 사용자 지정 컨트롤을 파생시켜야 합니다. 5. 세 가지 모델은 다음과 같습니다.

1) 사용자 정의 컨트롤 모델. 사용자 지정 컨트롤은 UserControl에서 파생되며 하나 이상의 다른 컨트롤로 구성됩니다.

2) 컨트롤 모델. 사용자 지정 컨트롤은 Control에서 파생되며 대부분의 WPF 컨트롤과 마찬가지로 템플릿을 사용하여 모양과 동작을 구분하는 구현을 작성하는 데 사용됩니다. Control에서 파생시키는 경우 사용자 정의 컨트롤보다 더 자유롭게 사용자 지정 사용자 인터페이스를 만들 수 있지만 더 많은 노력이 필요할 수 있습니다.

3) 프레임워크 요소 모델. 사용자 지정 컨트롤은 모양이 사용자 지정 렌더링 논리(템플릿 아님)에 의해 정의되는 경우 FrameworkElement에서 파생됩니다.

6. 다음 예제에서는 UserControl에서 파생되는 사용자 지정 숫자 위로/아래로 컨트롤을 보여 줍니다.

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>

using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback, 
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation

}
}

7. 다음 예제에서는 사용자 정의 컨트롤을 Window에 통합하는 데 필요한 XAML을 보여 줍니다.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">

<!-- Numeric Up/Down user control -->
<local:NumericUpDown />

</Window>

8. 다음 그림에서는 Window에 호스트된 NumericUpDown 컨트롤을 보여 줍니다.

9. 사용자 지정 컨트롤에 대한 자세한 내용은 컨트롤 제작 개요를 참조하세요.

WPF 모범 사례

1. 모든 개발 플랫폼과 마찬가지로 WPF를 다양한 방법으로 사용하여 원하는 결과를 얻을 수 있습니다.

2. WPF 응용 프로그램이 필요한 사용자 환경을 제공하고 일반적인 사용자 요구를 충족하도록 하는 한 가지 방법으로 접근성, 전역화 및 지역화, 성능에 대한 권장 모범 사례가 있습니다.

3. 자세한 내용은 다음을 참조하세요.

1) 접근성 모범 사례접근성 모범 사례

2) WPF 전역화 및 지역화 개요

3) WPF 응용 프로그램 성능 최적화

4) Windows Presentation Foundation 보안

요약

1. WPF는 시각적으로 멋진 다양한 클라이언트 응용 프로그램을 빌드하기 위한 포괄적인 프레젠테이션 기술입니다.

2. 이 소개에서는 WPF의 주요 기능을 살펴봤습니다.

3. 다음 단계는 WPF 응용 프로그램을 빌드하는 것입니다.

4. 빌드하는 동안 이 소개로 돌아와서 주요 기능을 복습하고 이 소개에 포함된 기능의 자세한 설명에 대한 참조를 찾을 수 있습니다.

연습: 동적 레이아웃 만들기

https://msdn.microsoft.com/ko-kr/library/bb514519(v=vs.110).aspx

1. 동적 위치 지정 방법에서는 자식 요소의 정렬 방식과 부모 요소를 기준으로 한 줄 바꿈 방식을 지정하여 자식 요소를 정렬합니다.

2. 창 및 컨트롤의 내용이 늘어날 때 해당 창 및 컨트롤이 자동으로 늘어나도록 설정할 수도 있습니다.

3. 자세한 내용은 절대 및 동적 위치를 사용하는 레이아웃을 참조하십시오.

4. WPF Designer for Visual Studio에서는 동적 위치를 지원하는 여러 가지 Panel 컨트롤을 제공합니다.

5. 한 패널 컨트롤을 다른 패널 컨트롤의 자식으로 추가하여 패널 컨트롤을 조합할 수 있습니다.

6. 다음 패널 컨트롤을 사용하여 응용 프로그램에서 요소의 동적 위치를 지정할 수 있습니다.

1) Grid

2) DockPanel

3) WrapPanel

4) StackPanel

5) UniformGrid

중요

1. 가능하면 동적 레이아웃을 사용하는 것이 좋습니다.

2. 동적 레이아웃은 가장 유연할 뿐 아니라 지역화되는 경우와 같이 내용이 변경될 경우 적절히 조정되고 최종 사용자가 사용 환경을 가장 잘 제어할 수 있게 해 줍니다.

3. 절대 레이아웃의 예제를 보려면 연습: 절대 위치를 기반으로 하는 레이아웃 만들기를 참조하십시오.

7. 이 연습에서는 다음 작업을 수행합니다.

1) WPF 응용 프로그램을 만듭니다.

2) 기본 Grid 패널 컨트롤을 구성합니다.

3) 패널에 컨트롤을 추가합니다.

4) 레이아웃을 테스트합니다.

8. 다음 그림에서는 응용 프로그램의 모양을 보여 줍니다.

Note

1. 표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다.

2. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다.

3. 자세한 내용은 Visual Studio 설정을 참조하십시오.

종합
1. 완 성된 MainWindow.xaml 파일은 다음과 같습니다.

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

다음 단계

1. 이 연습의 Grid 패널을 다음 패널로 대체해 보면 동적 레이아웃을 사용하여 다양한 효과를 얻는 방법을 알 수 있습니다.

1) DockPanel

2) WrapPanel

3) StackPanel

4) UniformGrid

연습: WPF Designer를 사용하여 크기를 조정할 수 있는 응용 프로그램 만들기

https://msdn.microsoft.com/ko-kr/library/bb546954(v=vs.110).aspx

1. GridSplitter 컨트롤과 Grid 컨테이너 컨트롤을 함께 사용하여 런타임에 사용자가 크기를 조정할 수 있는 창 레이아웃을 만들 수 있습니다.

2. 예를 들어 UI가 여러 영역으로 분할된 응용 프로그램의 경우 사용자가 분할자를 마우스로 끌어 더 많이 표시하려는 영역을 넓힐 수 있습니다.

3. 이 연습에서는 메신저 스타일 응용 프로그램의 레이아웃을 만듭니다.

4. 이 연습에서는 다음 작업을 수행합니다.

1) WPF 응용 프로그램을 만듭니다.

2) 기본 모눈 패널을 구성합니다.

3) 가로 GridSplitter를 추가합니다.

4) 도킹 패널 및 컨트롤을 추가합니다.

5) 모눈 패널 및 컨트롤을 추가합니다.

6) 응용 프로그램을 테스트합니다.

5. 다음 그림에서는 응용 프로그램의 모양을 보여 줍니다.

종합

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

연습: WPF Designer를 사용하여 데이터 바인딩 만들기

https://msdn.microsoft.com/ko-kr/library/dd434207(v=vs.110).aspx

1. 이 연습에서는 WPF Designer for Visual Studio를 사용하여 데이터를 컨트롤에 연결하는 데이터 바인딩을 만드는 방법을 보여 줍니다.

2. 이 연습에서는 다음 작업을 수행합니다.

1) 프로젝트를 만듭니다.

2) Student 클래스 및 StudentList 컬렉션을 만듭니다.

3) 데이터 바인딩을 통해 StudentList 컬렉션을 표시하는 ListBox 컨트롤을 만듭니다.

4) IValueConverter 를 사용하여 부울 속성의 모양을 사용자 지정하는 사용자 지정 DataTemplate을 만듭니다.

3. 연습을 마치면 학생 목록에 바인딩된 목록 상자가 완성됩니다.

4. 목록 상자의 각 항목에 대해 학생이 현재 등록되어 있는지 여부를 나타내는 색칠된 사각형이 표시됩니다.

Student.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataBindingDemo
{
    // Student is a simple class that stores a name and an
    // IsEnrolled value.
    public class Student 
    {   
        // The default constructor is required for creation from XAML.
        public Student()
        {
        }

        // The StudentName property is a string that holds the first and last name.
        public string StudentName { get; set; }

        // The IsEnrolled property gets or sets a value indicating whether
        // the student is currently enrolled.
        public bool IsEnrolled { get; set; }
    }

    // The StudentList collection is declared for convenience,
    // because declaring generic types in XAML is inconvenient.
    public class StudentList : ObservableCollection<Student>
    {

    }
}

BoolToBrushConverter.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;

namespace DataBindingDemo
{
    // The BoolToBrushConverter class is a value converter
    // that helps to bind a bool value to a brush property.
    [ValueConversion(typeof(bool), typeof(Brush))]
    public class BoolToBrushConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            Brush b = null;

            // Only apply the conversion if value is assigned and
            // is of type bool.
            if (value != null &&
                value.GetType() == typeof(bool))
            {
                // true is painted with a green brush, 
                // false with a red brush.
                b = (bool)value ? Brushes.Green : Brushes.Red;
            }

            return b;
        }

        // Not used.
        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            return null;
        }
    }
}

MainWindow.xaml

    <Window x:Class="DataBindingDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingDemo"
        Title="Databinding Demo" Height="300" Width="300">
    <Window.Resources>

        <local:StudentList x:Key="studentCollection" >
            <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
            <local:Student StudentName="Lori Kane" IsEnrolled="true" />
            <local:Student StudentName="Steve Masters" IsEnrolled="false" />
            <local:Student StudentName="Tai Yee" IsEnrolled="true" />
            <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        </local:StudentList>

        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />

        <DataTemplate x:Key="listBoxTemplate">
            <StackPanel Orientation="Horizontal" >
                <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                           Height="10" 
                           Width="10" 
                           Margin="0,0,5,0" />
                <TextBlock Text="{Binding Path=StudentName}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid></Grid>

</Window>

데이터 바인딩

값 변환기를 사용하여 데이터 바인딩

연습: DesignInstance를 사용하여 디자이너의 데이터에 바인딩

https://msdn.microsoft.com/ko-kr/library/dd490796(v=vs.110).aspx

1. 이 연습에서는 WPF Designer for Visual Studio를 사용하여 런타임에 할당되는 데이터 컨텍스트에 대해 디자인 타임에 데이터 바인딩을 만드는 방법을 보여 줍니다.

2. 데이터 바인딩을 만들려면 데이터 바인딩 작성기를 사용하여 특수한 디자인 타임 데이터 컨텍스트를 만들고 DesignInstance를 비즈니스 개체 형식으로 설정합니다.

3. DesignInstance는 디자인 타임 속성입니다.

4. 이 연습에서는 다음 작업을 수행합니다.

1) • 프로젝트를 만듭니다.

2) • Customer 클래스 비즈니스 개체를 만듭니다.

3) • TextBox 컨트롤을 데이터 컨텍스트에 있는 Customer 클래스의 디자인 타임 인스턴스에 데이터 바인딩합니다.

5. 연습을 마치면 런타임에 비즈니스 개체에 바인딩된 텍스트 상자가 완성됩니다.

6. 데이터 바인딩은 WPF Designer에서 설정됩니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DataBindingDemo
{
    public class Customer
    {   
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

1. Window 여는 태그 수정

xmlns:local="clr-namespace:DataBindingDemo"

2. Grid 여는 태그 수정

3. TextBox 컨트롤을 만든 후 Text 속성에서 Customer 개체의 FirstName 속성에 바인딩.

public MainWindow()
{
    InitializeComponent();

    Customer c = new Customer();
    c.FirstName = "Brenda";
    c.LastName = "Diaz";

    this._grid.DataContext = c;
}

연습: XAML을 사용하여 단추 만들기

https://msdn.microsoft.com/ko-kr/library/bb613545(v=vs.110).aspx

1. 이 연습에서는 WPF(Windows Presentation Foundation) 응용 프로그램에서 사용할 애니메이션 단추를 만드는 방법에 대해 알아 봅니다.

2. 이 연습에서는 스타일과 템플릿을 사용하여 코드를 다시 사용할 수 있고 단추 논리와 단추 선언을 분리할 수 있는 사용자 지정된 단추 리소스를 만듭니다.

3. 이 연습에서는 전체 코드를 XAML(Extensible Application Markup Language)로 작성합니다.

기본 단추 만들기

MainWindow.xaml

<Window x:Class="AnimatedButton.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="AnimatedButton" Height="300" Width="300" 
  Background="Black">

  <!-- Buttons arranged vertically inside a StackPanel. -->
  <StackPanel HorizontalAlignment="Left">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </StackPanel>

</Window>

기본 속성 설정

app.xaml

Application.Resources 블록 정의

<Application x:Class="AnimatedButton.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="Window1.xaml"
  >
  <Application.Resources>

    <!-- Resources for the entire application can be 
         defined here. -->

  </Application.Resources>
</Application>

스타일을 만들고 스타일을 사용하여 기본 속성 값 정의

<Application.Resources>

  <Style TargetType="Button">
    <Setter Property="Width" Value="90" />
    <Setter Property="Margin" Value="10" />
  </Style>

</Application.Resources>

스타일 속성 값을 리소스로 설정

<Application.Resources>

  <LinearGradientBrush x:Key="GrayBlueGradientBrush" 
    StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>

  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" 
      Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
  </Style>

</Application.Resources>

단추의 모양을 정의하는 템플릿 만들기

템플릿 설정

<Application.Resources>

  <LinearGradientBrush x:Key="GrayBlueGradientBrush" 
    StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>

  <Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
    <Setter Property="Template">
      <Setter.Value>
        <!-- The button template is defined here. -->
      </Setter.Value>
    </Setter>
  </Style>

</Application.Resources>

단추 표시 변경

<Setter.Value>
  <ControlTemplate TargetType="Button">
    <Grid Width="{TemplateBinding Width}" 
     Height="{TemplateBinding Height}" ClipToBounds="True">

      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Stroke="{TemplateBinding Background}" 
        RadiusX="20" RadiusY="20" StrokeThickness="5" 
        Fill="Transparent" />

      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" Stroke="Transparent" 
        StrokeThickness="20" 
        Fill="{TemplateBinding Background}" 
        RadiusX="20" RadiusY="20"   />

      <!-- Present Content (text) of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20" 
          Content="{TemplateBinding  Content}" 
          TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>
  </ControlTemplate>
</Setter.Value>

템플릿에 투명 효과 추가

<Application.Resources>
  <GradientStopCollection x:Key="MyGlassGradientStopsResource">
    <GradientStop Color="WhiteSmoke" Offset="0.2" />
    <GradientStop Color="Transparent" Offset="0.4" />
    <GradientStop Color="WhiteSmoke" Offset="0.5" />
    <GradientStop Color="Transparent" Offset="0.75" />
    <GradientStop Color="WhiteSmoke" Offset="0.9" />
    <GradientStop Color="Transparent" Offset="1" />
  </GradientStopCollection>

  <LinearGradientBrush x:Key="MyGlassBrushResource" 
   StartPoint="0,0" EndPoint="1,1" Opacity="0.75" 
   GradientStops="{StaticResource MyGlassGradientStopsResource}" />
<!-- Styles and other resources below here. -->

<Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
ClipToBounds="True">

    <!-- Outer Rectangle with rounded corners. -->
    <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" 
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

    <!-- Inner Rectangle with rounded corners. -->
    <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" 
      Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />

    <!-- Glass Rectangle -->
    <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
      Fill="{StaticResource MyGlassBrushResource}"
      RenderTransformOrigin="0.5,0.5">
      <Rectangle.Stroke>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.0" Color="LightBlue" />
            <GradientStop Offset="1.0" Color="Gray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Stroke>

      <!-- These transforms have no effect as they are declared here. 
           The reason the transforms are included is to be targets 
           for animation (see later). -->
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform />
          <RotateTransform />
        </TransformGroup>
      </Rectangle.RenderTransform>

      <!-- A BevelBitmapEffect is applied to give the button a 
           "Beveled" look. -->
      <Rectangle.BitmapEffect>
        <BevelBitmapEffect />
      </Rectangle.BitmapEffect>
    </Rectangle>

    <!-- Present Text of the button. -->
    <DockPanel Name="myContentPresenterDockPanel">
      <ContentPresenter x:Name="myContentPresenter" Margin="20" 
        Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
    </DockPanel>
  </Grid>
</ControlTemplate>
</Setter.Value>

단추 대화형 작업 만들기

템플릿 트리거 추가

<Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}" 
      Height="{TemplateBinding Height}" ClipToBounds="True">

      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" 
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" Stroke="Transparent" 
        StrokeThickness="20" 
        Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" 
      />

      <!-- Glass Rectangle -->
      <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
        Fill="{StaticResource MyGlassBrushResource}"
        RenderTransformOrigin="0.5,0.5">
        <Rectangle.Stroke>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0.0" Color="LightBlue" />
              <GradientStop Offset="1.0" Color="Gray" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Rectangle.Stroke>

        <!-- These transforms have no effect as they 
             are declared here. 
             The reason the transforms are included is to be targets 
             for animation (see later). -->
        <Rectangle.RenderTransform>
          <TransformGroup>
            <ScaleTransform />
            <RotateTransform />
          </TransformGroup>
        </Rectangle.RenderTransform>

          <!-- A BevelBitmapEffect is applied to give the button a 
               "Beveled" look. -->
        <Rectangle.BitmapEffect>
          <BevelBitmapEffect />
        </Rectangle.BitmapEffect>
      </Rectangle>

      <!-- Present Text of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20" 
          Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>

    <ControlTemplate.Triggers>
      <!-- Set action triggers for the buttons and define
           what the button does in response to those triggers. -->
    </ControlTemplate.Triggers>
  </ControlTemplate>
</Setter.Value>

속성 트리거 추가

<ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->
  <Trigger Property="IsMouseOver" Value="True">

    <!-- Below are three property settings that occur when the 
         condition is met (user mouses over button).  -->
    <!-- Change the color of the outer rectangle when user 
         mouses over it. -->
    <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

    <!-- Sets the glass opacity to 1, therefore, the 
         glass "appears" when user mouses over it. -->
    <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />

    <!-- Makes the text slightly blurry as though you 
         were looking at it through blurry glass. -->
    <Setter Property="ContentPresenter.BitmapEffect" 
      TargetName="myContentPresenter">
      <Setter.Value>
        <BlurBitmapEffect Radius="1" />
      </Setter.Value>
    </Setter>
  </Trigger>

<ControlTemplate.Triggers/>

포커스 트리거 추가

<ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->
  <Trigger Property="IsMouseOver" Value="True">

    <!-- Below are three property settings that occur when the 
         condition is met (user mouses over button).  -->
    <!-- Change the color of the outer rectangle when user          mouses over it. -->
    <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

    <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
    <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />

    <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
    <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
      <Setter.Value>
        <BlurBitmapEffect Radius="1" />
      </Setter.Value>
    </Setter>
  </Trigger>
  <!-- Set properties when button has focus. -->
  <Trigger Property="IsFocused" Value="true">
    <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />
    <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
    <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
  </Trigger>

</ControlTemplate.Triggers>

MouseEnter 및 MouseLeave 에 대한 애니메이션 추가

<!-- Animations that start when mouse enters and leaves button. -->
<EventTrigger RoutedEvent="Mouse.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard Name="mouseEnterBeginStoryboard">
      <Storyboard>

      <!-- This animation makes the glass rectangle shrink in the X direction. -->
        <DoubleAnimation Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
          By="-0.1" Duration="0:0:0.5" />

        <!-- This animation makes the glass rectangle shrink in the Y direction. -->
        <DoubleAnimation
        Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
          By="-0.1" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
  <EventTrigger.Actions>

    <!-- Stopping the storyboard sets all animated properties back to default. -->
    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
  </EventTrigger.Actions>
</EventTrigger>

단추를 클릭할 때를 위한 애니메이션 추가

<!-- Animation fires when button is clicked, causing glass to spin.  -->
<EventTrigger RoutedEvent="Button.Click">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)" 
          By="360" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

요약

1. 이 연습에서는 다음 연습을 수행했습니다.

1) Style의 대상을 개체 형식(Button)으로 지정했습니다.

2) Style을 사용하여 전체 응용 프로그램에서 단추의 기본 속성을 제어했습니다.

3) Style setter의 속성 값으로 사용할 그라데이션과 같은 리소스를 만들었습니다.

4) 단추에 템플릿을 적용하여 전체 응용 프로그램에서 단추 모양을 사용자 지정했습니다.

5) MouseEnter, MouseLeave 및 Click과 같은 사용자 작업에 응답하는 애니메이션 효과가 포함된 단추의 동작을 사용자 지정했습니다.

응용 프로그램 개발

https://msdn.microsoft.com/ko-kr/library/bb613549(v=vs.110).aspx

1. WPF(Windows Presentation Foundation)은 다음과 같은 종류의 응용 프로그램을 개발하는 데 사용할 수 있는 프레젠테이션 프레임워크입니다.

1) 독립 실행형 응용 프로그램(클라이언트 컴퓨터에 설치해서 운영하는 실행 어셈블리로 구성된 전형적인 창 응용 프로그램)

2) XAML browser applications (XBAPs)(탐색 페이지로 이루어져 있고 이 페이지가 Microsoft Internet Explorer 또는 Mozilla Firefox 등의 웹 브라우저를 통해 호스팅되는 실행 어셈블리로 구성된 응용 프로그램)

3) 사용자 지정 컨트롤 라이브러리(재사용 가능한 컨트롤이 들어 있는 비실행 어셈블리)

4) 클래스 라이브러리(재사용 가능한 클래스가 들어 있는 비실행 어셈블리)

참고

1. Windows 서비스에서 WPF 형식을 사용하지 않는 것이 좋습니다.

2. Windows 서비스에서 이러한 기능을 사용하려고 하면 기능이 예상대로 작동하지 않을 수 있습니다.

2. 이러한 응용 프로그램 집합을 빌드하기 위해 WPF는 서비스 호스트를 구현합니다.

3. 이 항목에서는 이러한 서비스에 대한 개요와 더 자세한 정보를 찾을 수 있는 링크를 제공합니다.

응용 프로그램 관리

1. 실행 가능한 WPF 응용 프로그램에는 일반적으로 다음과 같은 핵심 기능 집합이 필요합니다.

1) 진입점 메서드와 시스템 및 입력 메시지를 수신하는 Windows 메시지 루프 만들기를 비롯한 공통 응용 프로그램 인프라 만들기 및 관리

2) 응용 프로그램의 수명 추적 및 상호 작용

3) 명령줄 매개 변수 검색 및 처리

4) 응용 프로그램 범위에 속한 속성 및 UI 리소스 공유

5) 처리되지 않은 예외 검색 및 처리

6) 종료 코드 반환

7) 독립 실행형 응용 프로그램에서 창 관리

8) XAML browser applications (XBAPs)와 탐색 창 및 프레임이 있는 독립 실행형 응용 프로그램에서 탐색 추적

2. 이러한 기능은 응용 프로그램 정의를 사용하여 응용 프로그램에 추가하는 Application 클래스로 구현됩니다.

3. 자세한 내용은 응용 프로그램 관리 개요를 참조하십시오.

WPF 응용 프로그램 리소스, 콘텐츠 및 데이터 파일

1. WPF에서는 리소스, 콘텐츠 및 데이터를 비롯한 세 가지 종류의 비실행 데이터 파일에 대한 지원으로 포함 리소스에 대한 Microsoft .NET Framework의 핵심 지원을 확장합니다.

2. 자세한 내용은 WPF 응용 프로그램 리소스, 콘텐츠 및 데이터 파일을 참조하십시오.

3. WPF 비실행 데이터 파일에 대한 지원에서 중요한 구성 요소는 고유한 URI를 사용하여 데이터 파일을 식별하고 로드하는 기능입니다.

4. 자세한 내용은 WPF의 Pack URI를 참조하십시오.

창 및 대화 상자

1. 사용자는 창을 통해 WPF 독립 실행형 응용 프로그램과 상호 작용합니다.

2. 창의 용도는 응용 프로그램 콘텐츠를 호스팅하고, 대개 사용자가 콘텐츠와 상호 작용할 수 있게 만드는 응용 프로그램 기능을 노출하는 것입니다.

3. WPF에서 창은 다음을 지원하는 Window 클래스로 캡슐화됩니다.

1) 창 만들기 및 표시

2) 소유자/소유된 창 관계 설정

3) 창 모양 구성(예: 크기, 위치, 아이콘, 제목 표시줄 텍스트, 테두리)

4) 창의 수명 추적 및 상호 작용

4. 자세한 내용은 WPF 창 개요를 참조하십시오.

5. Window는 대화 상자라고 하는 특수한 유형의 창을 만드는 기능을 지원합니다.

6. 모달 및 모덜리스 유형의 대화 상자를 모두 만들 수 있습니다.

7. 사용 편의를 높이고 응용 프로그램 간의 재사용 및 일관성 있는 사용자 환경을 제공하기 위해 WPF에서는 세 가지 공용 Windows 대화 상자인 OpenFileDialog, SaveFileDialog 및 PrintDialog를 노출합니다.

8. 메시지 상자는 사용자에게 중요한 텍스트 정보를 표시하고 간단한 예/아니요/확인/취소 질문을 하는 데 사용되는 특수한 유형의 대화 상자입니다.

9. MessageBox 클래스를 사용하여 메시지 상자를 만들고 표시할 수 있습니다.

10. 자세한 내용은 대화 상자 개요를 참조하십시오.

탐색

1. WPF는 페이지(Page)와 하이퍼링크(Hyperlink)를 사용하는 웹 스타일의 탐색을 지원합니다.

2. 이러한 탐색 기능은 다음을 비롯한 다양한 방식으로 구현할 수 있습니다.

1) 웹 브라우저에서 호스팅되는 독립 실행형 페이지

2) 웹 브라우저에서 호스팅되는 XBAP로 컴파일되는 페이지

3) 독립 실행형 응용 프로그램으로 컴파일되고 탐색 창에서 호스팅되는 페이지(NavigationWindow)

4) 독립 실행형 페이지 또는 XBAP나 독립 실행형 응용 프로그램으로 컴파일되는 페이지에서 호스팅될 수 있는 프레임(Frame)을 통해 호스팅되는 페이지

3. WPF에서는 효과적인 탐색을 위해 다음을 구현합니다.

1) Frame, NavigationWindow 및 응용 프로그램 간 탐색을 지원하는 XBAP에서 사용되는 탐색 요청을 처리하기 위한 공유 탐색 엔진인 NavigationService

2) 탐색을 초기화하는 탐색 메서드

3) 탐색 수명을 추적하고 상호 작용하는 탐색 이벤트

4) 검사 및 조작이 가능한 저널을 사용한 후방 및 전방 탐색 기억

4. 자세한 내용은 탐색 개요를 참조하십시오.

5. WPF에서는 구조적 탐색이라고 하는 특수한 유형의 탐색도 지원합니다.

6. 구조적 탐색을 사용하면 호출 함수와 일관성을 유지하는 구조적이며 예측 가능한 방식으로 데이터를 반환하는 하나 이상의 페이지를 호출할 수 있습니다.

7. 이 기능은 PageFunction<T> 클래스에 따라 달라집니다.

8. 이 클래스에 대해서는 구조적 탐색 개요에서 자세히 설명합니다.

9. 탐색 토폴로지 개요에서 설명하는 것처럼 복잡한 탐색 토폴로지를 간단하게 생성하기 위해서도 PageFunction<T>이 사용됩니다.

호스팅

1. XBAP는 Microsoft Internet Explorer 또는 Firefox에서 호스팅될 수 있습니다.

2. 각 호스팅 모델에는 WPF 응용 프로그램 호스팅 항목에 설명되어 있는 고유한 고려 사항과 제약 조건 집합이 있습니다.

빌드 및 배포

1. 명령줄 컴파일러를 사용하면 명령 프롬프트에서 간단한 WPF 응용 프로그램을 빌드할 수 있지만 WPF에서는 Microsoft Visual Studio를 통합하여 개발 및 빌드 프로세스를 단순화하는 추가적인 지원을 제공합니다.

2. 자세한 내용은 WPF 응용 프로그램 만들기(WPF)를 참조하십시오.

3. 빌드하는 응용 프로그램의 형식에 따라 하나 이상의 배포 옵션을 선택하여 사용할 수 있습니다.

4. 자세한 내용은 WPF 응용 프로그램 배포(WPF)를 참조하십시오.

제목	설명
응용 프로그램 관리 개요	응용 프로그램 수명, 창, 응용 프로그램 리소스 및 탐색에 대한 관리를 비롯하여 Application 클래스에 대해 간략히 설명합니다.
WPF 응용 프로그램의 창	Window 클래스 및 대화 상자 사용 방법을 비롯하여 응용 프로그램에서 창을 관리하는 방법에 대한 정보를 제공합니다.
탐색 개요	응용 프로그램의 페이지 간 탐색 관리에 대해 간략히 설명합니다.
WPF 응용 프로그램 호스팅	XAML browser applications (XBAPs)를 간략하게 설명합니다.
WPF 응용 프로그램 빌드 및 배포	WPF 응용 프로그램을 만들고 배포하는 방법에 대해 설명합니다.
Visual Studio 2015에서의 WPF 소개	WPF의 주요 기능을 설명합니다.
연습: WPF 시작	페이지 탐색, 레이아웃, 컨트롤, 이미지, 스타일 및 바인딩을 사용하여 WPF 응용 프로그램을 만드는 방법을 보여 주는 연습을 제공합니다.

응용 프로그램 관리 개요

저작자표시

'프로그래밍 > WPF' 카테고리의 다른 글

WPF 고급 - 입력 (Input) (0)	2016.10.15
ObservableCollection<T>, INotifyPropertyChanged Interface (0)	2016.10.15
WPF 고급 - 아키텍처, XAML (0)	2016.09.23
WPF - Application Development (1)	2016.09.08
Data Binding (WPF) (0)	2016.09.04

Posted by 지훈2

달력

« 2024/11 »

Windows Presentation Foundation 프로그래밍/WPF2016. 8. 26. 15:16

'프로그래밍 > WPF' 카테고리의 다른 글

지훈

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바