연습: 내 첫 WPF 데스크톱 응용 프로그램Walkthrough: My First WPF Desktop Application

이 연습에서는 WPF(Windows Presentation Foundation) 개발에 대해 소개합니다.This walkthrough provides an introduction to Windows Presentation Foundation (WPF) development. XAML 태그, 코드 숨김, 응용 프로그램 정의, 컨트롤, 레이아웃, 데이터 바인딩, 스타일 등 대부분의 WPF 데스크톱 응용 프로그램에 공통된 요소를 포함하는 기본 응용 프로그램을 만듭니다.You'll create a basic application that includes the elements that are common to most WPF desktop applications: XAML markup, code-behind, application definitions, controls, layout, data binding, and styles.

응용 프로그램 프로젝트 만들기Creating the Application Project

이 섹션에서는 프로젝트와 주 창 또는 폼을 포함하는 응용 프로그램 인프라를 만듭니다.In this section, you'll create the application infrastructure, which includes the project and a main window or form.

프로젝트를 만들려면To create the project

  1. 메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.On the menu bar, choose File, New, Project.

  2. 새 프로젝트 대화 상자에서 Visual C# 또는 Visual Basic 노드를 확장하고 Windows 노드를 선택한 다음 Windows 노드를 확장하고 클래식 바탕 화면 노드를 선택합니다.In the New Project dialog, expand either the Visual C# or Visual Basic node and choose the Windows node, and then expand the Windows node and choose the Classic Desktop node.

  3. 템플릿 목록에서 WPF 응용 프로그램 템플릿을 선택합니다.In the template list, choose the WPF Application template.

  4. 이름 텍스트 상자에 ExpenseIt를 입력하고 확인 단추를 선택합니다.In the Name textbox enter ExpenseIt, and then choose the OK button.

    프로젝트가 생성되고 프로젝트 파일이 솔루션 탐색기에 추가된 다음 MainWindow.xaml 이라는 기본 응용 프로그램 창에 대한 디자이너가 표시됩니다.The project is created and the project files are added to Solution Explorer, and the designer for the default application window named MainWindow.xaml is displayed.

주 창을 수정하려면To modify the main window

  1. 디자이너에서 활성 디자이너 탭이 아닌 경우 MainWindow.xaml 탭을 선택합니다.In the designer, choose the MainWindow.xaml tab if it isn't already the active designer tab.

  2. C#을 사용하는 경우 <Window x:Class="ExpenseIt.MainWindow" 줄을 찾아서 <NavigationWindow x:Class="ExpenseIt.MainWindow"로 바꿉니다.If you're using C#, find the line <Window x:Class="ExpenseIt.MainWindow" and replace it with <NavigationWindow x:Class="ExpenseIt.MainWindow".

    Visual Basic을 사용하는 경우 <Window x:Class=" MainWindow" 줄을 찾아서 <NavigationWindow x:Class="MainWindow"로 바꿉니다.If you're using Visual Basic, find the line <Window x:Class=" MainWindow" and replace it with <NavigationWindow x:Class="MainWindow".

    <Window 태그를 <NavigationWindow로 변경하는 경우 Intellisense가 자동으로 닫는 태그를 </NavigationWindow> 로 변경합니다.Notice that when you change the <Window tag to <NavigationWindow, Intellisense automatically changes the closing tag to </NavigationWindow> as well.

    참고

    태그를 변경한 후 오류 목록 창이 열려 있으면 여러 오류가 표시될 수도 있습니다.After changing the tag, if the Error List window is open you may notice several errors. 다음 몇 단계의 변경 작업을 수행하면 이러한 오류가 사라집니다.Don't worry, the changes you make in the next few steps will make these go away.

  3. <Grid></Grid> 태그를 선택하고 삭제합니다.Choose the <Grid> and </Grid> tags and delete them.

    NavigationWindowGrid와 같은 기타 UI 요소를 포함할 수 없습니다.A NavigationWindow can't contain other UI elements such as a Grid.

  4. 속성 창에서 일반 범주 노드를 확장하고 Title 속성을 선택한 다음 ExpenseIt 를 입력하고 Enter 키를 누릅니다.In the Properties window, expand the Common category node and choose the Title property, and then enter ExpenseIt and press the Enter key.

    XAML 창의 Title 요소가 새 값과 일치하도록 변경됩니다.Notice that the Title element in the XAML window changes to match the new value. XAML 창 또는 속성 창에서 XAML 속성을 수정할 수 있으며 변경 내용이 동기화됩니다.You can modify XAML properties in either the XAML window or the Properties window, and the changes are synchronized.

  5. XAML 창에서 Height 요소의 값을 375로 설정하고 Width 속성의 값을 500서 무료 평가판 계정을 등록할 수 있습니다.In the XAML window, set the value of the Height element to 375, and set the value of the Width property to 500.

    이러한 요소는 속성 창의 레이아웃 범주에 있는 HeightWidth 속성에 해당합니다.These elements correspond to the Height and Width properties, found in the Layout category in the Properties window.

    이제 C#에서 MainWindow.xaml 파일이 다음과 같이 표시됩니다.Your MainWindow.xaml file should now look like this in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"  
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500">    
    </NavigationWindow>  
    

    또는 Visual Basic에서 다음과 같이 표시됩니다.Or like this in Visual Basic:

    <NavigationWindow x:Class="MainWindow"  
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500">    
    </NavigationWindow>  
    

코드 숨김 파일을 수정하려면(C#)To modify the code-behind file (C#)

  1. 솔루션 탐색기에서 MainWindow.xaml 노드를 확장하고 MainWindow.xaml.cs 파일을 엽니다.In Solution Explorer, expand the MainWindow.xaml node and open the MainWindow.xaml.cs file.

  2. public partial class MainWindow : Window 줄을 찾아서 public partial class MainWindow : NavigationWindow로 바꿉니다.Find the line public partial class MainWindow : Window and replace it with public partial class MainWindow : NavigationWindow.

    이렇게 하면 MainWindow 클래스가 NavigationWindow에서 파생되도록 변경됩니다.This changes the MainWindow class to derive from NavigationWindow. Visual Basic에서는 XAML에서 창을 변경할 때 이 작업이 자동으로 수행되므로 코드를 변경해야 합니다.In Visual Basic, this happens automatically when you change the window in XAML, so no code changes are necessary.

응용 프로그램에 파일 추가Adding Files to the Application

이 섹션에서는 응용 프로그램에 두 페이지와 이미지를 추가합니다.In this section, you'll add two pages and an image to the application.

홈 화면을 추가하려면To add a home screen

  1. 솔루션 탐색기에서 ExpenseIt 노드의 바로 가기 메뉴를 열고 추가, 페이지를 선택합니다.In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Page.

  2. 새 항목 추가 대화 상자에서 이름 텍스트 상자를 선택하고 ExpenseItHome를 입력하고 추가 단추를 선택합니다.In the Add New Item dialog, choose the Name text box and enter ExpenseItHome, and then choose the Add button.

    이 페이지는 응용 프로그램을 시작할 때 표시되는 첫 번째 창입니다.This page is the first window that is displayed when the application is launched.

  3. 디자이너에서 활성 디자이너 탭이 아닌 경우 ExpenseItHome.xaml 탭을 선택합니다.In the designer, choose the ExpenseItHome.xaml tab if it isn't already the active designer tab.

  4. <Title> 요소를 선택하고 제목을 ExpenseIt – Home으로 변경합니다.Choose the <Title> element and change the title to ExpenseIt - Home.

    이제 C#에서 ExpenseItHome.xaml 파일이 다음과 같이 표시됩니다.Your ExpenseItHome.xaml file should now look like this in C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"  
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - Home">    
        <Grid>  
    
        </Grid>  
    </Page>  
    

    Visual Basic에서 첫 번째 줄은 약간 다릅니다.In Visual Basic, the first line will by slightly different:

    <Page x:Class="ExpenseItHome"  
    
  5. 디자이너에서 MainWindow.xaml 탭을 선택합니다.In the designer, choose the MainWindow.xaml tab.

  6. Title="ExpenseIt" Height="375" Width="500"> 요소를 찾아서 Source="ExpenseItHome.xaml" 속성을 추가합니다.Find the line Title="ExpenseIt" Height="375" Width="500"> element and add a Source="ExpenseItHome.xaml" property.

    이렇게 하면 ExpenseItHome.xaml 이 응용 프로그램을 시작할 때 열리는 첫 페이지로 설정됩니다.This sets ExpenseItHome.xaml to be the first page opened when the application starts. 이제 C#에서 MainWindow.xaml 파일이 다음과 같이 표시됩니다.Your MainWindow.xaml file should now look like this in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"  
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500" Source="ExpenseItHome.xaml">    
    </NavigationWindow>  
    

    Visual Basic에서 첫 번째 줄은 약간 다릅니다.In Visual Basic, the first line will by slightly different:

    <NavigationWindow x:Class="MainWindow"
    

    앞에서 설정한 속성과 마찬가지로 Source 속성 창의 기타 범주에서 속성을 설정했을 수 있습니다.As with the properties that you set earlier, you could have set the Source property in the Miscellaneous category of the Properties window.

세부 정보 창을 추가하려면To add a details window

  1. 솔루션 탐색기에서 ExpenseIt 노드의 바로 가기 메뉴를 열고 추가, 페이지를 선택합니다.In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Page.

  2. 새 항목 추가 대화 상자에서 이름 텍스트 상자를 선택하고 ExpenseReportPage를 입력하고 추가 단추를 선택합니다.In the Add New Item dialog, choose the Name text box and enter ExpenseReportPage, and then choose the Add button.

    이 창에는 개별 경비 보고서가 표시됩니다.This window will display an individual expense report.

  3. 디자이너에서 활성 디자이너 탭이 아닌 경우 ExpenseReportPage.xaml 탭을 선택합니다.In the designer, choose the ExpenseReportPage.xaml tab if it isn't already the active designer tab.

  4. <Title> 요소를 선택하고 제목을 ExpenseIt – View Expense로 변경합니다.Choose the <Title> element and change the title to ExpenseIt - View Expense.

    이제 C#에서 ExpenseReportPage.xaml 파일이 다음과 같이 표시됩니다.Your ExpenseReportPage.xaml file should now look like this in C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"  
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - View Expense">    
        <Grid>  
    
        </Grid>  
    </Page>  
    

    Visual Basic에서 첫 번째 줄은 약간 다릅니다.In Visual Basic, the first line will be slightly different:

    <Page x:Class="ExpenseReportPage"  
    
  5. 메뉴 모음에서 디버그, 디버깅 시작 을 선택하거나 F5 키를 눌러 응용 프로그램을 실행합니다.On the menu bar, choose Debug, Start Debugging (or press F5) to run the application.

    다음 그림에서는 탐색 창 단추가 포함된 응용 프로그램을 보여 줍니다.The following illustration shows the application with the navigation window buttons.

    ExpenseIt 샘플 스크린샷ExpenseIt sample screen shot

  6. 디자인 모드로 돌아가려면 응용 프로그램을 닫습니다.Close the application to return to design mode.

사용자 인터페이스 만들기Creating the User Interface

레이아웃은 요소를 배치하는 순서가 지정된 방법을 제공하며 폼의 크기를 조정할 때 해당 요소의 크기와 위치도 관리합니다.Layout provides an ordered way to place elements, and also manages the size and position of those elements when a form is resized. 이 섹션에서는 3개의 행이 있는 단일 열 그리드를 만듭니다.In this section, you'll create a single-column grid with three rows. 두 페이지에 컨트롤을 추가하고, 일부 코드를 추가하고, 마지막으로 컨트롤에 대해 재사용 가능한 스타일을 정의합니다.You'll add controls to the two pages, add some code, and finally define reusable styles for the controls.

레이아웃을 만들려면To create the layout

  1. ExpenseItHome.xaml 을 열고 <Grid> 요소를 선택합니다.Open ExpenseItHome.xaml and choose the <Grid> element.

  2. 속성 창에서 Height 범주 노드를 확장하고 여백 값을 왼쪽, 오른쪽, 위쪽 및 아래쪽 여백에 해당하는 10, 10, 010으로 설정합니다.In the Properties window, expand the Layout category node and set the Margin values to 10, 10, 0, and 10, which corresponds to left, right, top and bottom margins.

    Margin="10,0,10,10" 요소가 XAML의 <Grid> 요소에 추가됩니다.The element Margin="10,0,10,10" is added to the <Grid> element in the XAML. 속성 창이 아니라 XAML 코드에서 직접 이러한 값을 입력하여 동일한 결과를 얻을 수도 있습니다.Once again, you could have entered these values directly in the XAML code instead of in the Properties window with the same result.

  3. 다음 XAML 코드를 Grid 요소에 추가하여 행 및 열 정의를 만듭니다.Add the following XAML code to the Grid element to create the row and column definitions:

    <Grid.ColumnDefinitions>  
        <ColumnDefinition />  
    </Grid.ColumnDefinitions>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto"/>  
        <RowDefinition />  
        <RowDefinition Height="Auto"/>  
    </Grid.RowDefinitions>  
    

컨트롤을 추가하려면To add controls

  1. ExpenseItHome.xaml을 엽니다.Open ExpenseItHome.xaml.

  2. </Grid> 태그 바로 위에 다음 XAML 코드를 추가하여 Border, ListBoxButton 컨트롤을 만듭니다.Add the following XAML code just above the </Grid> tag to create the Border, ListBox and Button controls:

    <!-- People list -->  
      <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">  
          <Label VerticalAlignment="Center" Foreground="White">Names</Label>  
      </Border>  
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">  
          <ListBoxItem>Mike</ListBoxItem>  
          <ListBoxItem>Lisa</ListBoxItem>  
          <ListBoxItem>John</ListBoxItem>  
          <ListBoxItem>Mary</ListBoxItem>  
      </ListBox>  
    
      <!-- View report button -->  
      <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"  
    Height="25" HorizontalAlignment="Right">View</Button>    
    

    컨트롤이 디자인 창에 나타납니다.Notice that the controls appear in the design window. 또한 도구 상자 창에서 디자인 창으로 끌고 속성 창에서 해당 속성을 설정하여 컨트롤을 만들었을 수도 있습니다.You could also have created the controls by dragging them from the Toolbox window onto the design window and setting their properties in the Properties window.

  3. 응용 프로그램을 빌드 및 실행합니다.Build and run the application. 다음 그림은 이 절차에서 XAML로 생성된 컨트롤의 런타임 모양을 보여 줍니다.The following illustration shows the run time appearance of the controls that are created by the XAML in this procedure.

    ExpenseIt 샘플 스크린샷ExpenseIt sample screen shot

  4. 디자인 모드로 돌아가려면 응용 프로그램을 닫습니다.Close the application to return to design mode.

배경 이미지를 추가하려면To add a background image

  1. 다음 이미지를 선택하여 watermark.png로 저장합니다.Choose the following image and save it as watermark.png.

    연습용 워터마크 이미지Watermark image for walkthrough

    참고

    이미지를 직접 만들어 watermark.png로 저장할 수도 있습니다.Alternatively you can create your own image and save it as watermark.png.

  2. 솔루션 탐색기에서 ExpenseIt 노드의 바로 가기 메뉴를 열고 추가, 기존 항목을 선택합니다.In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Existing Item.

  3. 기존 항목 추가 대화 상자에서 방금 추가한 watermark.png 이미지를 찾아서 선택한 다음 추가 단추를 선택합니다.In the Add Existing Item dialog, find the watermark.png image that you just added, choose it and then choose the Add button.

    참고

    파일 형식 목록을 확장하고 이미지 파일을 선택해야 할 수도 있습니다.You may need to expand the File Types list and choose Image Files.

  4. ExpenseItHome.xaml 파일을 열고 다음 XAML 코드를 </Grid> 태그 바로 위에 추가하여 배경 이미지를 만듭니다.Open the ExpenseItHome.xaml file and add the following XAML code just above the </Grid> tag to create a background image:

    <Grid.Background>  
        <ImageBrush ImageSource="watermark.png"/>  
    </Grid.Background>    
    

제목을 추가하려면To add a title

  1. ExpenseItHome.xaml을 엽니다.Open ExpenseItHome.xaml.

  2. <Grid.ColumnDefinitions> 줄을 찾은 다음 바로 아래에 다음을 추가합니다.Find the line <Grid.ColumnDefinitions> and add the following just below it:

    <ColumnDefinition Width="230" />    
    

    이렇게 하면 다른 열의 왼쪽에 고정 너비가 230픽셀인 열이 추가로 만들어집니다.This creates an additional column to the left of the other columns with a fixed width of 230 pixels.

  3. <Grid.RowDefinitions> 줄을 찾은 다음 바로 아래에 다음을 추가합니다.Find the line <Grid.RowDefinitions> and add the following just below it:

    <RowDefinition />    
    

    이렇게 하면 그리드의 맨 위에 행이 추가됩니다.This adds a row to the top of the grid.

  4. Grid.Column 값을 1로 설정하여 컨트롤을 두 번째 열로 이동합니다.Move the controls to the second column by setting the Grid.Column value to 1. Grid.Row 값을 1씩 증가하여 각 컨트롤을 한 행 아래로 이동합니다.Move each control down a row, by increasing each Grid.Row value by 1.

    1. <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">줄을 찾습니다.Find the line <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">. Grid.Column="0"Grid.Column="1" 로 변경하고 Grid.Row="0"Grid.Row="1"로 변경합니다.Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="0" to Grid.Row="1".

    2. <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1"줄을 찾습니다.Find the line <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1". Grid.Column="0"Grid.Column="1" 로 변경하고 Grid.Row="1"Grid.Row="2"로 변경합니다.Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="1" to Grid.Row="2".

    3. <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"줄을 찾습니다.Find the line <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125". Grid.Column="0"Grid.Column="1" 로 변경하고 Grid.Row="2"Grid.Row="3"로 변경합니다.Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="2" to Grid.Row="3".

  5. <Border 요소 바로 앞에 다음 XAML 코드를 추가하여 제목을 표시합니다.Just before the <Border element add the following XAML code to display the title:

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS"   
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">  
        View Expense Report  
    </Label>    
    

    이제 C#에서 ExpenseItHome.xaml 의 내용이 다음과 같이 표시됩니다.The contents of ExpenseItHome.xaml should now look like this in C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"  
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - Home">  
        <Grid Margin="10,0,10,10">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="230" />  
                <ColumnDefinition />  
            </Grid.ColumnDefinitions>  
            <Grid.RowDefinitions>  
                <RowDefinition />  
                <RowDefinition Height="Auto"/>  
                <RowDefinition />  
                <RowDefinition Height="Auto"/>  
            </Grid.RowDefinitions>  
            <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">  
                <Label VerticalAlignment="Center" Foreground="White">Names</Label>  
            </Border>  
            <!-- People list -->  
            <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS"   
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">  
                View Expense Report  
            </Label>  
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">  
                <ListBoxItem>Mike</ListBoxItem>  
                <ListBoxItem>Lisa</ListBoxItem>  
                <ListBoxItem>John</ListBoxItem>  
                <ListBoxItem>Mary</ListBoxItem>  
            </ListBox>  
    
            <!-- View report button -->  
            <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"  
    Height="25" HorizontalAlignment="Right">View</Button>  
            <Grid.Background>  
                <ImageBrush ImageSource="watermark.png"/>  
            </Grid.Background>  
        </Grid>  
    </Page>  
    

    Visual Basic에서 첫 번째 줄은 약간 다릅니다.In Visual Basic, the first line will be slightly different:

    <Page x:Class="ExpenseItHome"  
    
  6. 이때 응용 프로그램을 빌드 및 실행하는 경우 다음 그림과 같이 표시되어야 합니다.If you build and run the application at this point, it should look like the following illustration:

    ExpenseIt 샘플 스크린샷ExpenseIt sample screen shot

단추에 코드를 추가하려면To add code to the button

  1. ExpenseItHome.xaml을 엽니다.Open ExpenseItHome.xaml.

  2. Button 요소를 선택하고 HorizontalAlignment="Right" 요소 바로 뒤에 Click="Button_Click" XAML 코드를 추가합니다.Chose the Button element and add the following XAML code immediately after the HorizontalAlignment="Right" element: Click="Button_Click".

    이렇게 하면 단추의 Click 이벤트에 대한 이벤트 처리기가 추가됩니다.This adds an event handler for the button's Click event. 이제 Button 요소 코드가 다음과 같이 표시됩니다.The Button element code should now look like this:

    <!-- View report button -->  
      <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"  
    Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>  
    
  3. ExpenseItHome.xaml.cs 또는 ExpenseItHome.xaml.vb 파일을 엽니다.Open the ExpenseItHome.xaml.cs or ExpenseItHome.xaml.vb file.

  4. ExpenseItHome 클래스에 다음 코드를 추가합니다.Add the following code to the ExpenseItHome class:

    private void Button_Click(object sender, RoutedEventArgs e)  
    {  
        // View Expense Report  
        ExpenseReportPage expenseReportPage = new ExpenseReportPage();  
        this.NavigationService.Navigate(expenseReportPage);    
    }  
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)  
        ' View Expense Report  
        Dim expenseReportPage As New ExpenseReportPage()  
    Me.NavigationService.Navigate(expenseReportPage)  
    End Sub  
    

    이 이벤트 처리기는 단추를 클릭할 때 경비 보고서 페이지를 엽니다.This event handler opens the Expense Report Page when the button is clicked.

보고서 페이지에 대한 UI를 만들려면To create the UI for the report page

  1. ExpenseReportPage.xaml을 엽니다.Open ExpenseReportPage.xaml.

    이 페이지는 홈 페이지에서 선택된 사용자에 대한 경비 보고서를 표시합니다.This page will display the expense report for the person that is selected on the Home page.

  2. 다음 XAML 코드를 <Grid></Grid> 태그 사이에 추가합니다.Add the following XAML code between the <Grid> and </Grid> tags:

    <Grid.Background>  
        <ImageBrush ImageSource="watermark.png" />  
    </Grid.Background>  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="230" />  
        <ColumnDefinition />  
    </Grid.ColumnDefinitions>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto" />  
        <RowDefinition />  
    </Grid.RowDefinitions>  
    
    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS"   
    FontWeight="Bold" FontSize="18" Foreground="#0066cc">  
        Expense Report For:  
    </Label>  
    <Grid Margin="10" Grid.Column="1" Grid.Row="1">  
    
        <Grid.ColumnDefinitions>  
            <ColumnDefinition />  
            <ColumnDefinition />  
        </Grid.ColumnDefinitions>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto" />  
            <RowDefinition Height="Auto" />  
            <RowDefinition />  
        </Grid.RowDefinitions>  
    
        <!-- Name -->  
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">  
            <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>  
            <Label Margin="0,0,0,5" FontWeight="Bold"></Label>  
        </StackPanel>  
    
        <!-- Department -->  
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">  
            <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>  
            <Label Margin="0,0,0,5" FontWeight="Bold"></Label>  
        </StackPanel>  
    
        <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top"   
              HorizontalAlignment="Left">  
            <!-- Expense type and Amount table -->  
            <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >  
                <DataGrid.ColumnHeaderStyle>  
                    <Style TargetType="{x:Type DataGridColumnHeader}">  
                        <Setter Property="Height" Value="35" />  
                        <Setter Property="Padding" Value="5" />  
                        <Setter Property="Background" Value="#4E87D4" />  
                        <Setter Property="Foreground" Value="White" />  
                    </Style>  
                </DataGrid.ColumnHeaderStyle>  
                <DataGrid.Columns>  
                    <DataGridTextColumn Header="ExpenseType" />  
                    <DataGridTextColumn Header="Amount"  />  
                </DataGrid.Columns>  
            </DataGrid>  
        </Grid>  
    </Grid>  
    

    이 UI는 홈 페이지에 대해 만들어진 UI와 유사하지만 보고서 데이터가 DataGrid 컨트롤에 표시됩니다.This UI is similar to the UI created for the home page, but the report data is displayed in a DataGrid control.

  3. 응용 프로그램을 빌드 및 실행합니다.Build and run the application.

  4. 보기 단추를 선택합니다.Choose the View button.

    경비 보고서 페이지가 나타납니다.The expense report page appears.

    다음 그림에서는 경비 보고서 페이지를 보여 줍니다.The following illustration shows the Expense Report Page. 뒤로 탐색 단추를 사용할 수 있습니다.Notice that the back navigation button is enabled.

    ExpenseIt 샘플 스크린샷ExpenseIt sample screen shot

컨트롤의 스타일을 지정하려면To style controls

  1. App.xaml 파일(C#) 또는 Application.xaml 파일(Visual Basic)을 엽니다.Open the App.xaml file (C#) or Application.xaml file (Visual Basic).

  2. 다음 XAML을 <Application.Resources></Application.Resources> 태그 사이에 추가합니다.Add the following XAML between the <Application.Resources> and </Application.Resources> tags:

    <!-- Header text style -->  
    <Style x:Key="headerTextStyle">  
        <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>  
        <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>  
        <Setter Property="Label.FontWeight" Value="Bold"></Setter>  
        <Setter Property="Label.FontSize" Value="18"></Setter>  
        <Setter Property="Label.Foreground" Value="#0066cc"></Setter>  
    </Style>  
    
    <!-- Label style -->  
    <Style x:Key="labelStyle" TargetType="{x:Type Label}">  
        <Setter Property="VerticalAlignment" Value="Top" />  
        <Setter Property="HorizontalAlignment" Value="Left" />  
        <Setter Property="FontWeight" Value="Bold" />  
        <Setter Property="Margin" Value="0,0,0,5" />  
    </Style>  
    
    <!-- DataGrid header style -->  
    <Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">  
        <Setter Property="Height" Value="35" />  
        <Setter Property="Padding" Value="5" />  
        <Setter Property="Background" Value="#4E87D4" />  
        <Setter Property="Foreground" Value="White" />  
    </Style>  
    
    <!-- List header style -->  
    <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">  
        <Setter Property="Height" Value="35" />  
        <Setter Property="Padding" Value="5" />  
        <Setter Property="Background" Value="#4E87D4" />  
    </Style>  
    
    <!-- List header text style -->  
    <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">  
        <Setter Property="Foreground" Value="White" />  
        <Setter Property="VerticalAlignment" Value="Center" />  
        <Setter Property="HorizontalAlignment" Value="Left" />  
    </Style>  
    
    <!-- Button style -->  
    <Style x:Key="buttonStyle" TargetType="{x:Type Button}">  
        <Setter Property="Width" Value="125" />  
        <Setter Property="Height" Value="25" />  
        <Setter Property="Margin" Value="0,10,0,0" />  
        <Setter Property="HorizontalAlignment" Value="Right" />  
    </Style>  
    

    이 XAML은 다음 스타일을 추가합니다.This XAML adds the following styles:

    • headerTextStyle: 페이지 제목 Label의 형식을 지정합니다.headerTextStyle: To format the page title Label.

    • labelStyle: Label 컨트롤의 형식을 지정합니다.labelStyle: To format the Label controls.

    • columnHeaderStyle: DataGridColumnHeader의 형식을 지정합니다.columnHeaderStyle: To format the DataGridColumnHeader.

    • listHeaderStyle: 목록 헤더 Border 컨트롤의 형식을 지정합니다.listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: 목록 헤더 Label의 형식을 지정합니다.listHeaderTextStyle: To format the list header Label.

    • buttonStyle: Button ExpenseItHome.xaml pppage에 있는 의 형식을 지정합니다.buttonStyle: To format the Button on the ExpenseItHome.xaml pppage.

  3. ExpenseItHome.xaml을 열고 <Grid></Grid> 요소 사이에 있는 모든 내용을 다음 XAML로 바꿉니다.Open ExpenseItHome.xaml and replace everything between the <Grid> and </Grid> elements with the following XAML:

    <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="230" />  
                <ColumnDefinition />  
            </Grid.ColumnDefinitions>  
    
            <Grid.RowDefinitions>  
                <RowDefinition/>  
                <RowDefinition Height="Auto"/>  
                <RowDefinition />  
                <RowDefinition Height="Auto"/>  
            </Grid.RowDefinitions>  
            <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >  
                View Expense Report  
            </Label>  
            <!-- People list -->  
                  <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">  
                <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>  
            </Border>  
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">  
                <ListBoxItem>Mike</ListBoxItem>  
                <ListBoxItem>Lisa</ListBoxItem>  
                <ListBoxItem>John</ListBoxItem>  
                <ListBoxItem>Mary</ListBoxItem>  
            </ListBox>  
    
            <!-- View report button -->  
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>  
            <Grid.Background>  
                <ImageBrush ImageSource="watermark.png"  />  
            </Grid.Background>  
    

    스타일을 적용하면 각 컨트롤의 모양을 정의하는 VerticalAlignmentFontFamily 와 같은 속성이 제거되고 바뀝니다.The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles.

  4. ExpenseReportPage.xaml을 열고 <Grid> 및 최종 </Grid> 요소 사이에 있는 모든 내용을 다음 XAML로 바꿉니다.Open ExpenseReportPage.xaml and replace everything between the <Grid> and final </Grid> elements with the following XAML:

    <Grid.Background>  
        <ImageBrush ImageSource="watermark.png" />  
    </Grid.Background>  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="230" />  
        <ColumnDefinition />  
    </Grid.ColumnDefinitions>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto" />  
        <RowDefinition />  
    </Grid.RowDefinitions>  
    <Label Grid.Column="1" Style="{StaticResource headerTextStyle}">  
        Expense Report For:  
    </Label>  
    <Grid Margin="10" Grid.Column="1" Grid.Row="1">  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition />  
            <ColumnDefinition />  
        </Grid.ColumnDefinitions>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto" />  
            <RowDefinition Height="Auto" />  
            <RowDefinition />  
        </Grid.RowDefinitions>  
    
        <!-- Name -->  
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">  
            <Label Style="{StaticResource labelStyle}">Name:</Label>  
            <Label Style="{StaticResource labelStyle}"></Label>  
        </StackPanel>  
    
        <!-- Department -->  
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1"   
    Orientation="Horizontal">  
            <Label Style="{StaticResource labelStyle}">Department:</Label>  
            <Label Style="{StaticResource labelStyle}"></Label>  
        </StackPanel>  
    
        <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top"   
              HorizontalAlignment="Left">  
            <!-- Expense type and Amount table -->  
            <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}"   
                      AutoGenerateColumns="False" RowHeaderWidth="0" >  
                <DataGrid.Columns>  
                    <DataGridTextColumn Header="ExpenseType" />  
                    <DataGridTextColumn Header="Amount"  />  
                </DataGrid.Columns>  
            </DataGrid>  
        </Grid>  
    </Grid>    
    

    이렇게 하면 <Label><Border> 요소에 스타일이 추가됩니다.This adds styles to the <Label> and <Border> elements.

데이터에 연결Connecting to Data

이 섹션에서는 데이터 공급자 및 데이터 템플릿을 만들고 컨트롤을 연결하여 데이터를 표시합니다.In this section, you'll create a data provider and a data template, and then connect the controls to display the data.

데이터를 컨트롤에 바인딩하려면To bind data to a control

  1. ExpenseItHome.xaml 을 열고 <Grid> 요소를 선택합니다.Open ExpenseItHome.xaml and choose the <Grid> element..

  2. 다음 XAML 코드를 추가합니다.Add the following XAML code:

    <Grid.Resources>  
    <!-- Expense Report Data -->  
    <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">  
        <x:XData>  
            <Expenses xmlns="">  
                <Person Name="Mike" Department="Legal">  
                    <Expense ExpenseType="Lunch" ExpenseAmount="50" />  
                    <Expense ExpenseType="Transportation" ExpenseAmount="50" />  
                </Person>  
                <Person Name="Lisa" Department="Marketing">  
                    <Expense ExpenseType="Document printing"  
          ExpenseAmount="50"/>  
                    <Expense ExpenseType="Gift" ExpenseAmount="125" />  
                </Person>  
                <Person Name="John" Department="Engineering">  
                    <Expense ExpenseType="Magazine subscription"   
         ExpenseAmount="50"/>  
                    <Expense ExpenseType="New machine" ExpenseAmount="600" />  
                    <Expense ExpenseType="Software" ExpenseAmount="500" />  
                </Person>  
                <Person Name="Mary" Department="Finance">  
                    <Expense ExpenseType="Dinner" ExpenseAmount="100" />  
                </Person>  
            </Expenses>  
        </x:XData>  
    </XmlDataProvider>  
    </Grid.Resources>  
    

    이 코드에서는 각 사용자에 대한 데이터를 포함하는 XmlDataProvider 클래스를 만듭니다.This code creates an XmlDataProvider class that contains the data for each person. 일반적으로 파일로 로드되지만 편의상 데이터가 인라인으로 추가됩니다.Normally this would be loaded as a file, but for simplicity the data is added inline.

  3. <Grid.Resources> 요소 내에 다음 XAML 코드를 추가합니다.Inside the <Grid.Resources> element, add the following XAML code:

    <!-- Name item template -->  
    <DataTemplate x:Key="nameItemTemplate">  
        <Label Content="{Binding XPath=@Name}"/>  
    </DataTemplate>  
    

    이렇게 하면 Data Template ListBox 에 데이터를 표시하는 방법을 정의하는이 추가됩니다.This adds a Data Template which defines how to display the data in the ListBox.

  4. 기존 <ListBox> 요소를 다음 XAML로 바꿉니다.Replace the existing <ListBox> element with the following XAML:

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"   
             ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"  
             ItemTemplate="{StaticResource nameItemTemplate}">  
    </ListBox>  
    

    이렇게 하면 ItemsSourceListBox 속성이 데이터 원본에 바인딩되고 데이터 템플릿이 ItemTemplate으로 적용됩니다.This code binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

데이터를 컨트롤에 연결하려면To connect data to controls

  1. ExpenseReportPage.xaml.vb 또는 ExpenseReportPage.xaml.cs를 엽니다.Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. C#에서 다음 생성자를 ExpenseReportPage 클래스에 추가하거나 Visual Basic에서 기존 클래스를 다음으로 바꿉니다.In C#, add the following constructor to the ExpenseReportPage class, or in Visual Basic replace the existing class with the following:

    // Custom constructor to pass expense report data  
    public ExpenseReportPage(object data):this()  
    {  
        // Bind to expense report data.  
        this.DataContext = data;  
    }  
    
    Partial Public Class ExpenseReportPage  
    Inherits Page  
        Public Sub New()  
        InitializeComponent()  
        End Sub  
    
        ' Custom constructor to pass expense report data  
        Public Sub New(ByVal data As Object)  
            Me.New()  
            ' Bind to expense report data.  
            Me.DataContext = data  
        End Sub    
    End Class  
    

    이 생성자는 데이터 개체를 매개 변수로 사용합니다.This constructor takes a data object as a parameter. 이 경우 데이터 개체에 선택한 사용자의 이름이 포함됩니다.In this case the data object will contain the name of the selected person.

  3. ExpenseItHome.xaml.vb 또는 ExpenseItHome.xaml.cs를 엽니다.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Click 이벤트 처리기 코드를 다음으로 바꿉니다.Replace the Click event handler code with the following:

    private void Button_Click(object sender, RoutedEventArgs e)  
    {  
        // View Expense Report  
        ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);  
        this.NavigationService.Navigate(expenseReportPage);    
    }  
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)  
        ' View Expense Report  
        Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)  
        Me.NavigationService.Navigate(expenseReportPage)  
    End Sub  
    

    이 코드는 새 생성자를 호출합니다.This code calls the new constructor.

데이터 템플릿을 사용하여 UI를 업데이트하려면To update the UI with data templates

  1. ExpenseReportPage.xaml을 엽니다.Open ExpenseReportPage.xaml.

  2. 이름Department<StackPanel 요소에 대한 XAML 코드를 다음으로 바꿉니다.Replace the XAML code for the Name and Department<StackPanel elements with the following:

    <!-- Name -->  
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">  
        <Label Style="{StaticResource labelStyle}">Name:</Label>  
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>  
    </StackPanel>  
    
    <!-- Department -->  
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">  
        <Label Style="{StaticResource labelStyle}">Department:</Label>  
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>  
    </StackPanel>    
    

    이렇게 하면 Label 컨트롤이 해당 데이터 원본 속성에 바인딩됩니다.This binds the Label controls to the appropriate data source properties.

  3. <Grid> 요소 내에 다음 XAML 코드를 추가합니다.Add the following XAML code inside the <Grid> element:

    <!--Templates to display expense report data-->  
    <Grid.Resources>  
        <!-- Reason item template -->  
        <DataTemplate x:Key="typeItemTemplate">  
            <Label Content="{Binding XPath=@ExpenseType}"/>  
        </DataTemplate>  
        <!-- Amount item template -->  
        <DataTemplate x:Key="amountItemTemplate">  
            <Label Content="{Binding XPath=@ExpenseAmount}"/>  
        </DataTemplate>  
    </Grid.Resources>    
    

    이렇게 하면 경비 보고서 데이터를 표시하는 방법이 정의됩니다.This defines how to display the expense report data.

  4. <DataGrid> 요소를 다음으로 바꿉니다.Replace the <DataGrid> element with the following:

    <!-- Expense type and Amount table -->  
    <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >  
    
        <DataGrid.Columns>  
            <DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}"  />  
            <DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" />  
        </DataGrid.Columns>  
    
    </DataGrid>  
    

    이렇게 하면 ItemSource 가 추가되고 비용 항목에 대한 바인딩이 정의됩니다.This adds an ItemSource and defines the bindings for the expense items.

  5. 응용 프로그램을 빌드 및 실행합니다.Build and run the application.

  6. 사용자를 선택한 다음 보기 단추를 선택합니다.Choose a person and then choose the View button.

    다음 그림에서는 컨트롤, 레이아웃, 스타일, 데이터 바인딩 및 데이터 템플릿이 적용된 ExpenseIt 응용 프로그램의 페이지를 둘 다 보여 줍니다.The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied.

    ExpenseIt 샘플 스크린샷ExpenseIt sample screen shots

모범 사례Best Practices

이 샘플은 WPF의 기본 사항을 보여 주므로 응용 프로그램 개발 모범 사례를 따르지 않습니다.This sample demonstrates the basics of WPF and, consequently, does not follow application development best practices. WPF 및 .NET Framework 응용 프로그램 개발 모범 사례에 대한 자세한 내용은 다음 항목을 적절하게 참조하세요.For comprehensive coverage of WPF and .NET Framework application development best practices, see the following topics as appropriate:

새로운 기능What's Next

이제 WPF를 사용하여 데스크톱 응용 프로그램을 만들기 위한 다양한 기술을 사용할 수 있습니다.You now have a number of techniques at your disposal for creating a desktop application by using WPF. 데이터 바인딩된 WPF 응용 프로그램의 구성 요소에 대해 기본적인 내용을 이해하고 있을 것입니다.You should now have a basic understanding of the building blocks of a data-bound WPF application. 이 항목은 전체 목록이 아니며 이 항목에 설명된 기술 외의 가능성을 스스로 발견할 수도 있습니다.This topic is by no means exhaustive, but hopefully you also now have a sense of some of the possibilities you might discover on your own beyond the techniques in this topic.

WPF 아키텍처 및 프로그래밍 모델에 대한 자세한 내용은 다음 항목을 참조하세요.For more information about the WPF architecture and programming models, see the following topics:

참고 항목See Also

Windows Presentation Foundation으로 최신 데스크톱 응용 프로그램 만들기Create Modern Desktop Applications with Windows Presentation Foundation