WPF UI 컨트롤을 데스크톱 응용 프로그램에 추가하는 방법

WPF WPF UI 컨트롤을 데스크톱 응용 프로그램에 추가하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-04-25 15:43 조회 1,587회 댓글 0건

본문

관련링크

WPF(Windows Presentation Foundation)는 데스크톱 응용 프로그램을 생성하기 위한 사용자 인터페이스 프레임워크입니다. WPF는 XAML(Extensible Application Markup Language)을 사용하여 뷰를 정의하는 기능을 사용자에게 제공하여 Windows 응용 프로그램 사용자 인터페이스를 개발하기 위한 표준이 되었습니다. Microsoft의 .NET Core에 WPF를 포함함으로써 WPF가 향후 데스크톱 응용 프로그램을 개발하는 데 더욱 유망한 옵션이 되었습니다.

이 블로그에서는 Visual Studio 2022 및 .NET 6 프레임워크로 새로운 WPF(Windows Presentation Foundation) 응용 프로그램을 만드는 방법을 안내해드리겠습니다. 기본 응용 프로그램을 구성한 후 도구 상자에서 사용할 수 있는 기본 컨트롤을 추가하고 적절한 NuGet 패키지를 설치하여 도구 상자에서 사용할 수 있는 타사 컨트롤을 추가하는 방법에 대해 알아봅니다.

이제 WPF 응용 프로그램 만들기를 시작해 보겠습니다.

WPF 응용 프로그램 만들기

이 섹션에 설명된 단계에는 Visual Studio 2022가 필요하며 .NET 6 프레임워크를 사용하여 응용 프로그램을 만들겠습니다. 따라서 이러한 단계를 원활하게 따라가려면 Visual Studio 2022로 작업해야 합니다.

Visual Studio를 열고 새 프로젝트 만들기를 선택합니다. 검색 상자에 'WPF'를 입력하고 표시된 프로젝트 템플릿을 최소화합니다. 아래 스크린샷은 WPF 검색이 C# 및 VB 언어에 대한 WPF 응용 프로그램 템플릿을 나열함을 보여줍니다. C# 변형을 선택하여 WPF 응용 프로그램을 만들어 보겠습니다.
프로젝트 만들기는 프로젝트 이름 및 위치와 같은 기본 세부 정보를 제공하는 프로젝트 구성을 따릅니다. 프로젝트 구성의 마지막 단계에서 원하는 .NET 프레임워크를 선택하도록 아래 화면이 표시됩니다. 여기에서 응용 프로그램을 만들기 위해 .NET 6 를 선택합니다.
프로젝트를 만들고 구성한 후 아래와 같이 MainWindow.xaml 파일이 로드됩니다. 이 파일은 기본적으로 새로 만든 프로젝트에 추가된 WPF Window MainWindow에 대한 디자인 형식입니다. 앞선 단계에서 설명된 대로 Window 레이아웃을 정의하고 컨트롤을 추가하여 Window를 디자인하는 데 사용됩니다.

도구 상자에서 WPF 컨트롤 추가

이 섹션에서는 도구 상자에서 사용할 수 있는 기본 Microsoft .NET WPF 컨트롤을 WPF 응용 프로그램에 추가하는 방법에 대해 알아봅니다. 아래 스크린샷은 모든 WPF 컨트롤 탭 아래의 도구 상자에서 사용할 수 있는 일부 기본 컨트롤을 보여줍니다.

wpf

Window 레이아웃 디자인

WPF Window에 컨트롤을 추가하기 전에 WPF에서 사용할 수 있는 다양한 레이아웃 컨트롤을 이해해야 합니다. XAML에 제공된 기본 레이아웃 컨트롤은 <Grid> 컨트롤입니다. 그리드 컨트롤을 통해 표와 같이 행과 열을 정의하고 특정 행과 열 조합의 범위 내에 컨트롤을 배치할 수 있습니다.

그리드에 추가된 하위 컨트롤 또는 기타 레이아웃 컨트롤을 얼마든지 가질 수 있습니다. 그리드에는 항상 단일 행과 열이 선언되어 있습니다. 기타 레이아웃 컨트롤의 세부 정보는 다음 링크를 참조해 주시기 바랍니다.

이 블로그에서는 두 개의 행이 있는 기본 그리드 컨트롤을 사용하여 작업합니다. 하나의 행은 응용 프로그램에 추가할 컨트롤 이름을 표시하며 다른 행은 실제 컨트롤을 포함합니다. 원하는 Window 레이아웃은 다음 마크업을 XAML에 추가하여 구성할 수 있습니다.

<Window x:Class="UIControlsDemo.MainWindow"  
      xmlns="[http://schemas.microsoft.com/winfx/2006/xaml/presentation](http://schemas.microsoft.com/winfx/2006/xaml/presentation)"  
      xmlns:x="[http://schemas.microsoft.com/winfx/2006/xaml](http://schemas.microsoft.com/winfx/2006/xaml)"  
      xmlns:d="[http://schemas.microsoft.com/expression/blend/2008](http://schemas.microsoft.com/expression/blend/2008)"  
      xmlns:mc="[http://schemas.openxmlformats.org/markup-compatibility/2006](http://schemas.openxmlformats.org/markup-compatibility/2006)"  
      xmlns:local="clr-namespace:UIControlsDemo"  
      mc:Ignorable="d"  
      Title="MainWindow" Height="800" Width="800" Loaded="Window_Loaded">  
  <Grid>  
      <Grid.RowDefinitions>  
          <RowDefinition Height="50"></RowDefinition>  
          <RowDefinition Height="400"></RowDefinition>  
      </Grid.RowDefinitions>        
  </Grid>  
</Window>

아래 스크린샷은 위에 정의된 XAML 마크업을 추가하여 생성된 Window 레이아웃을 나타냅니다.

wpf

도구 상자에서 컨트롤 추가

이제 Window 레이아웃에 컨트롤을 추가하는 방법에 대해 빠르게 알아보겠습니다. WPF Window에 컨트롤 추가에는 도구 상자에서 원하는 컨트롤을 선택하는 것이 포함되며 Window에서 예상된 위치에 끌어 놓습니다.

첫 번째 그리드 행에서 레이블 컨트롤을 추가하여 시작합니다. 아래와 같이 컨트롤이 선택되었으며 도구 상자에서 끌어다 첫 번째 그리드 행에 놓았습니다. 컨트롤을 놓은 후에는 컨트롤을 구성하도록 기본 속성 목록이 표시됩니다.

wpf

레이블 컨트롤을 추가한 후에는 마크업에서 다음 속성을 설정하여 구성됩니다.

<Label Grid.Row="0" Content="MS Grid" FontSize="24" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Center"></Label>

아래 스크린샷은 구성된 레이블 컨트롤을 보여줍니다.

wpf

다음으로 두 번째 그리드 행에 DataGrid 컨트롤을 추가합니다. 기본적으로 DataGrid 컨트롤은 DataGrid의 ItemsSource 속성을 사용하여 샘플 데이터 소스 집합과 함께 추가됩니다. DataGrid 컨트롤을 구성하도록 다음 코드로 기본 코드를 바꿉니다.

<DataGrid Grid.Row="1" x:Name="MSGrid" Height="300px" Width="600"/>

Window 레이아웃이 DataGrid 컨트롤을 추가하고 구성한 후에 보이는 모습입니다.

wpf

DataGrid를 데이터에 바인딩

DataGrid 컨트롤을 유효한 데이터 소스에 빠르게 바인딩하여 컨트롤의 기본 모양과 느낌을 이해해 보겠습니다.

고객 클래스 추가

다음 코드를 추가하여 Customer라는 새로운 클래스를 추가합니다. 이 클래스는 데이터 소스를 생성하는 데 사용됩니다.

internal class Customer  
  {  
      //fields  
      int _id, _countryID;  
      string _first, _last;  
      double _weight;  
      bool _active;

      //data generators  
      static Random _rnd = new Random();  
      static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jim|Elena|Stefan|Alaric|Gina".Split('|');  
      static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Salvatore|Spencer|Saltzman|Rodriguez".Split('|');  
      static string[] _countries = "China|India|United States|Japan|Myanmar".Split('|');

      public Customer()  
          : this(_rnd.Next())  
      {  
      }  
      public Customer(int id)  
      {  
          ID = id;  
          Active = false;  
          FirstName = GetString(_firstNames);  
          LastName = GetString(_lastNames);  
          CountryID = _rnd.Next() % _countries.Length;  
          Weight = 50 + _rnd.NextDouble() * 50;  
      }  
      //Object model        
      public int ID  
      {  
          get { return _id; }  
          set  
          {  
              if (value != _id)  
              {  
                  _id = value;  
                  RaisePropertyChanged("ID");  
              }  
          }  
      }  
      public bool Active  
      {  
          get { return _active; }  
          set  
          {  
              _active = value;  
              RaisePropertyChanged("Active");  
          }  
      }  
      public string Name  
      {  
          get { return string.Format("{0} {1}", FirstName, LastName); }  
      }  
      public string Country  
      {  
          get { return _countries[_countryID]; }  
      }  
      public int CountryID  
      {  
          get { return _countryID; }  
          set  
          {  
              if (value != _countryID && value > -1 && value < _countries.Length)  
              {  
                  _countryID = value;  
                  RaisePropertyChanged(null);  
              }  
          }  
      }  
      public string FirstName  
      {  
          get { return _first; }  
          set  
          {  
              if (value != _first)  
              {  
                  _first = value;  
                  RaisePropertyChanged(null);  
              }  
          }  
      }  
      public string LastName  
      {  
          get { return _last; }  
          set  
          {  
              if (value != _last)  
              {  
                  _last = value;  
                  RaisePropertyChanged(null);  
              }  
          }  
      }  
      public double Weight  
      {  
          get { return _weight; }  
          set  
          {  
              if (value != _weight)  
              {  
                  _weight = value;  
                  RaisePropertyChanged("Weight");  
              }  
          }  
      }  
      // utilities  
      static string GetString(string[] arr)  
      {  
          return arr[_rnd.Next(arr.Length)];  
      }  
      static string GetName()  
      {  
          return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames));  
      }  
      // static list provider  
      public static ObservableCollection<Customer> GetCustomerList(int count)  
      {  
          var list = new ObservableCollection<Customer>();  
          for (int i = 0; i < count; i++)  
          {  
              list.Add(new Customer(i));  
          }  
          return list;  
      }

      // this interface allows bounds controls to react to changes in the data objects.  
      void RaisePropertyChanged(string propertyName)  
      {  
          OnPropertyChanged(new PropertyChangedEventArgs(propertyName));  
      }  
      public event PropertyChangedEventHandler PropertyChanged;  
      protected void OnPropertyChanged(PropertyChangedEventArgs e)  
      {  
          if (PropertyChanged != null)  
              PropertyChanged(this, e);  
      }  
  }

DataGrid로 데이터 바인딩

아래 코드는 Customer 클래스를 사용하여 데이터 소스를 생성하고 ItemsSource 속성을 사용하여 DataGrid 컨트롤에 바인딩합니다.

private void Window_Loaded(object sender, RoutedEventArgs e)  
{  
  //Generate grid data  
  var gridData = Customer.GetCustomerList(12);  
  //Binding the grid with data  
  MSGrid.ItemsSource = gridData;  
}

아래 스크린샷은 Customer 데이터 소스에 바인딩한 후 DataGrid 컨트롤을 나타냅니다.

wpf

NuGet에서 WPF 컨트롤 추가

기본 컨트롤과의 작업을 이해한 후 이제 복잡한 요구 사항으로 기능이 다양한 데스크톱 응용 프로그램을 만들려는 경우 필요할 수 있는 타사 공급 업체 제공 고급 컨트롤로 작업하는 방법을 확인해 보겠습니다.

타사 컨트롤로 작업하려면 맨 앞의 단계대로 도구 상자에 추가된 이러한 컨트롤러가 있어야 합니다. 메뉴 막대에서 도구 옵션을 통해 NuGet 패키지 관리에 액세스하면 됩니다. NuGet 패키지 관리자 메뉴에서 솔루션용 NuGet 패키지 관리를 선택하면 아래 스크린샷에 나타난 대로 패키지 관리 창이 열립니다.

특정 패키지를 로드하려면 찾아보기 탭에서 볼 수 있는 검색 패널에 패키지 이름을 입력해야 합니다. 왼쪽 패널에서 적절한 패키지를 선택하면 창의 오른쪽 패널에서 사용 가능한 설치 옵션을 사용하여 프로젝트에 설치할 수 있습니다.

이 블로그에서는 ComponentOne WPF 컨트롤로 작업하고 DataGrid 컨트롤과 비교하여 ComponentOne WPF 버전에서 FlexGrid 컨트롤을 소개합니다. 이에 따라 아래 스크린샷은 C1.WPF.Grid Nuget 패키지의 설치를 보여줍니다.

wpf

C1.WPF.Grid 패키지를 설치하면 다음 컨트롤이 즉시 시작되어 C1 WPF 컨트롤 탭의 도구 상자에 나타납니다. 제품군의 다른 컨트롤에 종속된 여러 기능이 FlexGrid 컨트롤에 있는 것처럼 FlexGrid 컨트롤을 비롯한 많은 컨트롤로 구성되어 있습니다.

wpf

컨트롤을 도구 상자에 추가한 후에는 해당 컨트롤에 액세스할 수 있으며 기본 컨트롤을 추가하여 즉 도구 상자에서 끌어서 놓기를 사용하여 Window 양식에 이와 유사하게 추가할 수 있습니다.

ComponentOne FlexGrid를 사용하여 작업하기

이 섹션에서는 WPF 응용 프로그램에서 FlexGrid 컨트롤을 사용하여 작업하는 방법에 대해 간략히 설명합니다. 자세한 내용은 FlexGrid 빠른 시작을 참조할 수 있습니다.

시작하기 위해 먼저 FlexGridWindow 이름의 프로젝트에 새 WPF 창을 추가하여 아래와 같이 FlexGrid 컨트롤을 표시합니다.

wpf

MS DataGrid에 대해 설명한 대로 동일한 디자인 접근 방법을 따라 Window 레이아웃을 디자인하고 다음 마크업을 사용하여 Label 및 FlexGrid 컨트롤을 Window에 추가합니다.

<Window  
      xmlns="[http://schemas.microsoft.com/winfx/2006/xaml/presentation](http://schemas.microsoft.com/winfx/2006/xaml/presentation)"  
      xmlns:x="[http://schemas.microsoft.com/winfx/2006/xaml](http://schemas.microsoft.com/winfx/2006/xaml)"  
      xmlns:d="[http://schemas.microsoft.com/expression/blend/2008](http://schemas.microsoft.com/expression/blend/2008)"  
      xmlns:mc="[http://schemas.openxmlformats.org/markup-compatibility/2006](http://schemas.openxmlformats.org/markup-compatibility/2006)"  
      xmlns:local="clr-namespace:UIControlsDemo"  
      xmlns:c1="[http://schemas.componentone.com/winfx/2006/xaml](http://schemas.componentone.com/winfx/2006/xaml)" x:Class="UIControlsDemo.FlexGridWindow"  
      mc:Ignorable="d"  
      Title="FlexGridWindow" Height="450" Width="800" Loaded="Window_Loaded">  
  <Grid>  
      <Grid.RowDefinitions>  
          <RowDefinition Height="50"/>  
          <RowDefinition Height="*"/>  
      </Grid.RowDefinitions>  
      <Label Grid.Row="0" Content="C1 FlexGrid" FontSize="24" FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center"/>  
      <c1:FlexGrid x:Name="C1Flexgrid" Grid.Row="1" Grid.Column="1" Height="500px" VerticalAlignment="Center" HorizontalAlignment="Center"></c1:FlexGrid>  
  </Grid>  
</Window>

여기에서 유일한 차이점은 C1 컨트롤을 참조하기 위한 참조 'c1' 추가입니다. 위의 마크업을 추가한 후 창이 보이는 모습입니다.

wpf

이 마지막 단계에서는 FlexGrid 클래스의 ItemSource 속성을 사용하여 MS DataGrid 바인딩에 사용한 동일한 데이터 소스에 FlexGrid 컨트롤을 바인딩합니다.

private void Window_Loaded(object sender, RoutedEventArgs e)  
{  
  //Generate grid data  
  var gridData = Customer.GetCustomerList(12);  
  //Binding the grid with data  
  C1Flexgrid.ItemsSource = gridData;  
}

이제 App.xaml 파일에서 StartupUri 속성을 빠르게 업데이트하여 프로젝트 실행에 따라 기본 창으로 FlexGridWindow를 로드해 보겠습니다. 프로젝트를 실행하여 FlexGrid 컨트롤에 대해 다음 디스플레이를 관찰할 수 있습니다.

wpf

이미지는 서식이 지정된 프레젠테이션에 데이터를 표시하는 FlexGrid를 보여주며 충분한 행 높이, 글꼴 설정 및 데이터 유형에 따라 왼쪽 또는 오른쪽으로 정렬된 데이터와 사용자에게 더욱 익숙한 사용자 인터페이스가 있습니다. 이는 기본적인 컨트롤의 모양과 느낌으로, MS DataGrid 뷰와 비교하여 상당히 매력적입니다.

또한 FlexGrid는 기본적으로 아래 GIF에 나타난 대로 헤더를 클릭하여 사용 가능한 메뉴를 사용해 정렬, 필터링 및 열 자동 크기 조정에 대한 지원을 제공합니다.

wpf