WinForms Designer가 비주얼 스튜디오 없이 폼을 편집한다

WinForms Designer는 Windows Forms(WinForms) 폼을 편집하고 C# 프로젝트 코드를 생성하는 독립형 디자이너다. Windows에서 실행되며, 비주얼 스튜디오나 디자인 시점 어셈블리가 필요하지 않다. 프로젝트 설명에 따르면 앱은 AI로 생성됐다.

기능과 편집 방법

디자인 화면에서 기존 .designer.cs 파일을 열어 컨트롤을 옮기고 크기를 조절할 수 있다. 정렬 가이드와 그리드 맞춤 기능을 제공하며, 픽셀 눈금자는 선택해 사용할 수 있다. 도구 상자에는 일반적인 WinForms 컨트롤과 Timer, ToolTip, NotifyIcon, ErrorProvider 같은 비시각적 구성 요소가 범주별로 들어 있다. 항목을 화면으로 끌어다 놓거나 두 번 클릭해 추가한다.

속성 창에서는 범주별 속성을 확인하고 텍스트, 숫자, 색상, 글꼴, 이미지, 컬렉션, 구성 요소 참조를 편집할 수 있다. 선택한 컨트롤의 일반 이벤트에 이름이 지정된 처리기 스텁을 연결할 수도 있다. 잘라내기, 복사, 붙여넣기, 삭제, 전체 선택, 정렬, 앞으로 가져오기, 뒤로 보내기 기능과 실행 취소·다시 실행도 지원한다. 확정된 편집 한 건이 실행 취소 단계 하나가 된다.

기존 폼을 불러오려면 File ▸ Open…을 선택하거나 Ctrl+O를 누른 뒤 WinForms .designer.cs 파일을 지정한다. 로더는 표준 컨트롤 필드, 일반적인 속성 대입, 이벤트 처리기 이름, Controls.Add 및 Controls.AddRange 계층 항목을 읽는다. 소스 코드를 실행하지는 않는다.

도구 상자에서 컨트롤을 끌어 폼에 놓을 수 있으며, 두 번 클릭하면 폼 중앙에 추가된다. View 메뉴나 리본에서 도구 상자, 속성 창, 그리드 맞춤, 정렬 가이드, 눈금자를 켜고 끈다. 컨트롤을 선택하면 오른쪽에서 속성을 편집할 수 있다.

File ▸ Generate Code…를 선택하거나 Ctrl+G를 누르면 생성된 디자이너 파일을 미리 본 뒤 프로젝트 전체를 폴더에 기록할 수 있다. 결과 폴더에는 실행 가능한 프로젝트가 들어가며, 해당 폴더에서 dotnet build를 실행하면 애플리케이션을 빌드한다. 생성 파일은 Form1.cs, Form1.designer.cs, .csproj, Program.cs다.

설치와 실행

빌드하려면 Windows와 .NET 10 SDK가 필요하다. 게시된 실행 파일은 Windows만 있으면 실행할 수 있다고 프로젝트는 설명한다. 저장소에서 빌드하고 실행하는 명령은 다음과 같다.

dotnet build WinFormsDesigner.slnx
dotnet run --project src/WinFormsDesigner.App/WinFormsDesigner.App.csproj

단일 파일 형태의 실행 파일을 게시하려면 다음 명령을 사용한다.

dotnet publish src/WinFormsDesigner.App/WinFormsDesigner.App.csproj `
 -c Release -r win-x64 --self-contained true -p:PublishSingleFile=true `
 -p:EnableCompressionInSingleFile=true -o publish/win-x64

결과물은 런타임 전체를 포함하는 약 49MB 크기의 WinFormsDesigner.exe다. 프로젝트 설명에 따르면 이를 원하는 위치에 복사해 실행할 수 있다.

생성 코드와 구현 방식

생성되는 .designer.cs 파일은 비주얼 스튜디오의 레이아웃을 따른다. 모든 컨트롤을 먼저 생성하고, 각 컨테이너를 채우기 전에 일시 중단한 뒤 역순으로 다시 시작한다. 프로젝트는 이를 통해 비주얼 스튜디오가 작성하는 파일과 같은 방식으로 동작한다고 설명한다.

문서 모델이 단일 기준 데이터다. 디자이너는 세션의 컨트롤 트리를 자체 그리기 캔버스에 비트맵으로 렌더링하며, 실제 컨트롤을 캔버스의 자식 창으로 두지 않는다. 캔버스가 포인터의 위치 판별과 동작을 처리하고 이를 세션에 적용한다. 작업 공간 배치를 위해 루트 폼을 캔버스에서 옮길 수 있지만, 이 화면상의 위치는 생성되는 폼에 포함되지 않는다. 새 컨트롤은 선택된 삽입 컨테이너의 가운데에 놓인다.

속성을 편집하면 값이 문서에 기록되고 실제 컨트롤 트리에도 적용된다. 기본값과 다른 값만 저장하므로 생성 코드가 비주얼 스튜디오가 만드는 코드만큼 작게 유지된다고 프로젝트는 설명한다. 컨트롤의 앞뒤 순서도 보존한다. Controls.Add는 컨트롤을 뒤에 추가하고 인덱스 0은 가장 앞에 놓이며, 생성기는 같은 순서로 Controls.Add 호출을 작성한다.

Timer, ToolTip, NotifyIcon, ErrorProvider처럼 화면에 표시되지 않는 구성 요소는 구성 요소 컨테이너를 통해 생성하고, 생성 파일의 components 필드에 기록한다. 폼은 AutoScaleMode = Font와 기록된 AutoScaleDimensions를 사용해 시스템 글꼴에 맞춰 레이아웃을 조정하도록 생성된다.

프로젝트 구성과 확인 범위

저장소는 공통 컴파일러 설정을 담은 Directory.Build.props와 src/WinFormsDesigner.Core/, src/WinFormsDesigner.App/로 구성된다. Core에는 모델, 리플렉션, 코드 생성이 들어가며 UI는 포함되지 않는다. App은 디자이너 애플리케이션이다.

Core의 주요 파일은 다음과 같다.

• Model/DesignDocument.cs: 클래스 이름, 네임스페이스, 프로젝트 이름, 루트 노드를 담는다.
• Model/DesignNode.cs: 컨트롤 트리의 유형, 이름, 자식, 속성, 이벤트를 나타낸다.
• Model/PropertyBag.cs: 컨트롤 기본값과 다른 값만 저장한다.
• Model/ColorText.cs: 속성 창에 표시할 색상 형식을 지정한다.
• Reflection/ControlTypeRegistry.cs: 도구 상자 목록과 비주얼 스튜디오 스타일의 이름 규칙을 관리한다.
• Reflection/ControlFactory.cs: 실제 컨트롤 인스턴스를 만들고 기본값을 읽는다.
• Reflection/PropertyCatalog.cs: 컨트롤 유형별로 표시할 속성을 나열한다.
• Reflection/PropertyMetadataTable.cs: 알려진 속성의 범주와 편집기 유형을 지정한다.
• Codegen/CSharpFormGenerator.cs: 디자이너 파일, 코드 비하인드, 프로젝트 파일을 작성한다.
• Codegen/CSharpValueFormatter.cs: 속성 값을 C# 리터럴 형식으로 만든다.

App의 주요 파일은 다음과 같다.

• MainForm.cs: 메뉴, 도구 모음, 상태 표시줄, 세 개 패널 레이아웃을 담당한다.
• Designer/DesignSession.cs: 문서, 실제 컨트롤 트리, 선택 항목, 실행 취소 기록을 관리한다.
• Designer/DesignerSurface.cs: 스크롤 가능한 모델 그리기 캔버스와 위치 판별, 포인터 입력, 이동, 크기 조절, 가이드를 담당한다.
• Toolbox/ToolboxPanel.cs: 범주별 도구 상자 목록과 드래그 데이터를 관리한다.
• Toolbox/GlyphFactory.cs: 실행 중 도구 상자 아이콘을 그린다.
• Properties/PropertyGridView.cs: 속성 창을 제공한다.
• Properties/PropertyGridEditors.cs: 속성 창의 인라인 편집기를 제공한다.
• Properties/CollectionEditorDialog.cs: 컬렉션 속성 편집기를 제공한다.
• GenerateCodeDialog.cs: 생성된 프로젝트를 미리 보고 기록한다.

프로젝트는 다음 명령으로 Windows용 스모크 테스트 하네스를 실행해 .designer.cs 파싱, 호스팅된 자식 컨트롤이 없는 상태의 렌더링, 컨테이너 기준 삽입, 중첩 컨트롤 이동과 크기 조절, 루트 폼 이동과 크기 조절, 커서 복원, 다시 그리기, 실행 취소를 확인하도록 안내한다.

dotnet run --project tests/ParserSmoke/ParserSmoke.csproj

솔루션 빌드는 컴파일을 확인한다. 스모크 테스트 하네스는 캔버스에 마우스 메시지를 전달하지만, 마우스로 직접 끌고 크기를 조절하는 동작은 데스크톱에서 별도로 확인해야 한다. 생성한 프로젝트를 비주얼 스튜디오 디자이너에서 열고 다시 저장하는 과정도 대화형 확인이 필요하다.