! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

ComponentOne WinUI 컨트롤 시작하기 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

ComponentOne WinUI 컨트롤 시작하기

페이지 정보

작성자 GrapeCity 작성일 2021-09-29 09:58 조회 2,105회 댓글 0건

본문

ComponentOne 2021 v2 릴리스에는 모던 Windows 데스크톱 응용 프로그램을 개발하기 위한 WinUI 컨트롤의 베타 버전이 포함되어 있습니다. ComponentOne WinUI Edition은 WinUI3 프레임워크를 기반으로 하는 Windows 데스크톱 응용 프로그램용 기본 UI 라이브러리입니다. WinUI Edition을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

  • 뛰어난 셀 사용자 정의 및 고성능 가상화를 제공하는 강력한 DataGrid

  • 빈 간격(Gap)을 채우고 응용 프로그램의 기능을 확장하는 필수 달력 및 레이아웃 컨트롤

  • 최신 Windows 응용 프로그램을 빌드하기 위한 Fluent 디자인 데스크톱 컨트롤

ComponentOne WinUI 컨트롤은 데스크톱 플랫폼에서 WinUI를 지원하므로 MFC, WinForms, WPF 등과 같은 친숙한 기술을 사용하여 작성한 기존 앱을 점진적으로 마이그레이션할 수 있습니다. 따라서 사용자는 이러한 응용 프로그램을 원하는 속도로 개선할 수 있습니다.


ComponentOne WinUI 컨트롤을 설치하는 방법

C1ControlPanel(위 링크)을 다운로드하여 실행하고 WinUI Edition(베타) 타일을 찾습니다. 드롭다운에서 최신 버전을 선택하고 계속을 클릭하여 컨트롤과 샘플을 설치합니다.

이미지1


이 컨트롤은 C:\Users\user\Documents\ComponentOne Samples\WinUI에 샘플을 설치합니다.

또한 ComponentOne 제품을 설치하면 다음 위치에 NuGet 패키지의 로컬 사본이 생깁니다. C:\Program Files (x86)\ComponentOne\Packages. 해당 위치에서 패키지를 찾거나 NuGet.org에서 다운로드할 수 있는 퍼블릭 버전을 사용할 수 있습니다. 다음으로, 데스크톱 응용 프로그램에서 WinUI에 C1 컨트롤을 추가하는 방법을 살펴보겠습니다.


ComponentOne WinUI 컨트롤을 사용하여 개발하는 방법

Visual Studio 2019 버전 16.10.0 이상이 필요합니다. 또한 WinUI 프로젝트 템플릿을 제공하는 Windows App SDK(Project Reunion이라고도 함)를 설치해야 합니다. Visual Studio의 확장 관리자에서 Project Reunion을 다운로드할 수 있습니다.

이미지2


프로젝트 템플릿을 설치했으면 데스크톱 응용 프로그램에서 새 WinUI 또는 클래스 라이브러리를 만듭니다. 이렇게 하면 전체 UI 계층을 정의하는 데 XAML을 사용하는 Windows(Win32) 응용 프로그램이 생성되면서 Windows 기능을 계속 완벽하게 지원할 수 있습니다.

이미지3

이때, ComponentOne WinUI 컨트롤은 응용 프로그램의 UWP 유형에서 WinUI를 지원하지 않습니다.

WinUI 프로젝트 템플릿에는 MSIX 패키지가 포함되어 있고, 이 패키지는 Microsoft Store에서 앱을 테스트용으로 로드하기 위한 프로젝트 템플릿을 솔루션에 포함하고 있습니다.

기본 응용 프로그램 프로젝트를 마우스 오른쪽 버튼으로 클릭한 다음 NuGet 패키지 관리를 선택합니다. 이렇게 하면 프로젝트에 ComponentOne 컨트롤을 추가할 수 있습니다.

이미지4

nuget.org를 패키지 소스로 선택합니다. 그런 다음 C1.WinUI.*로 시작하는 패키지를 찾습니다.

이미지5

C1.WinUI.Grid 패키지를 선택하고 설치를 클릭합니다. 그러면 응용 프로그램에 FlexGrid 패키지가 추가됩니다.

ComponentOne WinUI 컨트롤을 사용하면 직관적인 API 및 XAML 덕분에 쉽게 개발할 수 있습니다. 다음 MVVM 모범 사례에 따라 XAML에서 컨트롤을 완전히 선언하거나 코드를 C#으로 완벽하게 작성할 수 있습니다. 안타깝게도 (이 글을 작성할 당시에는) WinUI 응용 프로그램을 위한 디자인 타임 환경이 없기 때문에 XAML 페이지에 컨트롤을 수동으로 추가해야 합니다.

MainWindow.xaml을 열고 C1.WinUI.Grid에 대한 다음 xml 네임스페이스 참조를 추가한 후 다음 XAML을 복사하여 FlexGrid를 정의합니다.

<Window
  x:Class="WinUIApp4.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUIApp4"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:c1="using:C1.WinUI.Grid"
  mc:Ignorable="d">
​
  <c1:FlexGrid x:Name="grid"/>
</Window>


그런 다음 MainWindow.xaml.cs를 열고 다음 C# 코드를 복사합니다. 이 코드는 FlexGrid를 데이터 바인딩할 개체의 더미 목록을 빠르게 생성합니다.

public sealed partial class MainWindow : Window
{
  public MainWindow()
  {
      this.InitializeComponent();
​
      ObservableCollection<DummyObject> dummyList = new ObservableCollection<DummyObject>();
      dummyList.Add(new DummyObject { Name = "Accordion", Number = 1 });
      dummyList.Add(new DummyObject { Name = "Calendar", Number = 2 });
      dummyList.Add(new DummyObject { Name = "FlexGrid", Number = 3 });
​
      grid.ItemsSource = dummyList;
  }
​
}
​
public class DummyObject
{
  public string Name { get; set; }
  public int Number { get; set; }
}


이제 응용 프로그램을 실행하고 FlexGrid가 실제로 어떻게 실행되는지 살펴볼 수 있습니다.

이미지6

물론, 이 데이터 세트는 간단해서 해야 할 일이 많지 않습니다. FlexGrid의 기능을 자세히 살펴보려면 문서 폴더에 설치된 FlexGridExplorer 샘플을 확인해 보시기 바랍니다. 또한 Windows 응용 프로그램에서 달력 및 아코디언 레이아웃을 만들기 위한 샘플도 있습니다.


ComponentOne WinUI Edition

ComponentOne Calendar WinUI 컨트롤은 기본 제공되는 서식 지정 및 사용자 정의가 가능한 템플릿과 함께 터치 지원 날짜 선택 기능을 제공합니다. 아코디언 컨트롤은 애니메이션과 함께 축소 가능한 패널 목록을 표시하는 컨테이너 컨트롤입니다. FlexGrid는 표 형식 데이터 편집, 정렬, 필터링, 그룹화 기능과 행 세부 정보, 전체 텍스트 필터링, 데이터 가상화 등의 고급 기능을 제공하는 빠른 WinUI DataGrid입니다. 온라인 문서에서 이러한 각 컨트롤을 사용하는 방법에 대해 알아보실 수 있습니다.

이미지7

ComponentOne WinUI Edition은 2021v3에 공식적으로 출시됩니다. 컨트롤 집합은 차트, TreeView 및 입력 편집기 등과 같은 더 많은 컨트롤로 계속 확장되고 늘어날 것입니다. 라이브러리의 베타 버전은 2022년 1월 이후에는 작동하지 않으므로 프로덕션 환경에서는 사용하지 않는 것이 좋습니다.




지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.