WPF Visual Designer — VS Code

English quick start

On Windows, open a WPF project and choose Open With → WPF Designer on a XAML view. Use Toolbox and Properties Panel to show or hide the side panels, and Fit Width to fit the preview to the available canvas. In a narrow editor, the panels start collapsed unless you chose otherwise.

The interface follows your VS Code display language. Override it with WPF Designer: Language (wpfDesigner.language: auto, en, ko) and reload the window. XAML values and identifiers keep their original text; some low-level diagnostics are displayed as reported.

1.7.0 작업 공간·표시 언어

도구 상자, 속성 패널 버튼으로 패널을 접거나 열고, 폭 맞춤으로 화면을 가용 폭에 맞추세요. 좁은 화면에서는 기본으로 패널을 접어 캔버스를 확보합니다. WPF Designer: Language에서 자동·영어·한국어를 선택한 뒤 창을 다시 로드할 수 있습니다.

1.0.0 주요 기능

1. Grid: 도구 상자 컨트롤을 셀 위에 놓으면 해당 행·열에 추가합니다. 직속 자식은 방향키로 셀 이동이 가능합니다. 초록 경계를 우클릭하면 행·열 추가/삭제 선택창이 열립니다. 속성 패널에서 위치와 병합 수를 편집할 수 있으며 병합 범위를 벗어나는 이동은 적용하지 않습니다.
2. 여백 · 정렬: 오른쪽의 전용 영역에서 가로·세로 정렬과 네 방향 Margin을 편집합니다. Stretch 선택 시 고정 Width/Height를 함께 제거하고 한 번에 실행 취소합니다. 바인딩으로 지정한 크기는 보존합니다. 변환 없는 Grid 직속 자식은 선택 테두리의 주황 핸들을 끌어 여백을 조절합니다. 핸들의 방향키는 1, Shift+방향키는 10씩 변경합니다. 드래그 중 Esc로 취소합니다.
3. 리소스 선택: 속성 아래 ‘리소스…’를 눌러 현재 컨트롤에서 사용할 수 있는 문자열 키를 검색합니다. 로컬/상위/App 리소스와 병합 사전을 포함하고, 속성 타입과 Style TargetType에 맞는 항목을 표시합니다. 선택하면 StaticResource 식으로 연결합니다.
4. Binding…: DependencyProperty에서 Path, DataContext/ElementName/Self, Mode, UpdateSourceTrigger를 편집합니다. 복잡한 기존 식은 자동으로 단순화하지 않으며 덮어쓰기를 명시해야 합니다. Converter, MultiBinding, 사용자 지정 RelativeSource 등은 XAML 소스에서 편집하세요. 미리보기는 실행 시 ViewModel을 자동으로 생성하지 않습니다.
5. 프로젝트 UserControl: 같은 프로젝트의 UserControl XAML을 도구 상자에서 찾아 패널에 클릭 추가하거나 Grid/Canvas에 드롭합니다. 필요한 xmlns는 자동으로 추가합니다. 소스를 미리보기용으로 확장하며 코드 비하인드 생성자·이벤트와 사용자 정의 속성/외부 DLL은 실행하지 않습니다. 반복 배치의 내부 이름과 로컬 이미지 경로를 처리하며 순환 포함은 오류로 표시합니다. 내부 요소 편집은 해당 UserControl.xaml을 여세요.
6. 오류 이동: 미리보기 오류 아래 버튼으로 XAML 소스를 엽니다. 원본 위치를 확인할 수 있는 XML/속성 오류는 해당 행으로 이동합니다. 위치가 불명확하거나 문서 버전이 바뀐 경우에는 임의 위치로 이동하지 않습니다.

Image Source의 … 버튼으로 이미지 파일을 선택할 수 있습니다. 선택한 이미지를 프로젝트 Images 폴더로 복사하고 .csproj에 WPF Resource로 등록한 뒤 pack URI로 연결합니다. 동일한 파일은 재사용하고 같은 이름의 다른 파일은 새 이름으로 복사합니다. XAML과 프로젝트 파일을 모두 저장(Ctrl+K, S)한 뒤 실행하세요. 연결 실행 취소 시 프로젝트 등록과 Source는 함께 복원되며 복사된 이미지 파일은 남습니다. 프로젝트를 찾을 수 없으면 가져오기를 적용하지 않습니다.

실습용 프로젝트: samples/DesignerFeatures/DesignerFeatures.csproj. MainWindow.xaml을 디자이너로 열어 위 기능을 시험할 수 있습니다.

Windows용 기본 WPF XAML 디자이너입니다. 실제 WPF 렌더링 화면에서 컨트롤을 선택하고 Canvas에서 이동·크기 조절할 수 있습니다.

설치 / 업데이트

1. Windows에 .NET 10 Desktop Runtime을 설치합니다. 소스 빌드에는 .NET 10 SDK가 필요합니다.
2. VS Code 확장 화면의 … → Install from VSIX… → wpf-visual-designer-1.0.4.vsix를 선택합니다. 기존 버전도 같은 방식으로 업데이트합니다.
3. 명령 팔레트에서 Developer: Reload Window를 실행합니다.
4. 이 폴더의 samples/CanvasDesigner.xaml을 엽니다.
5. 명령 팔레트에서 WPF: Open Designer, 또는 Reopen Editor With… → WPF Designer를 실행합니다. 신뢰하는 작업 영역에서 사용하세요.

제거하려면 VS Code 확장 목록에서 WPF Visual Designer의 제거를 선택하세요. 재설치는 같은 VSIX로 진행합니다. 프로젝트의 XAML 파일은 유지됩니다.

패널 크기 조절

왼쪽 도구 상자와 오른쪽 속성 패널 경계의 분할선을 좌우로 드래그하세요. 패널 너비는 해당 편집기의 상태로 저장됩니다. 더블 클릭하면 기본 너비로 돌아갑니다. 분할선에 포커스를 두고 좌우 방향키(10px), Shift+방향키(40px), Home/End(최소/최대), Esc(드래그 취소)도 사용할 수 있습니다. 가운데 작업 영역의 최소 너비를 유지하며 좁은 창에서는 패널 너비가 제한됩니다.

직접 편집

• 선택: 화면에서 컨트롤을 클릭합니다. 파란 선택 테두리가 나타납니다. 겹친 부모 요소는 왼쪽 트리에서 선택합니다.
• 이동: Canvas의 직속 자식을 드래그합니다. 드래그 중 테두리로 위치를 확인하고 놓으면 XAML 및 WPF 화면이 갱신됩니다.
• 크기: 선택 테두리 오른쪽 아래 핸들을 끌면 Width/Height가 바뀝니다. 현재는 Canvas의 직속 자식만 지원합니다.
• 추가: 도구 상자의 Button/TextBox 등을 Canvas 위에 끌어 놓습니다. 도구 버튼을 클릭하면 선택한 패널에 추가합니다.
• 맞춤: 상단의 8px 맞춤을 켜거나 끕니다. 값은 WPF의 장치 독립 단위(DIP)입니다.
• 속성: 오른쪽 기존 속성 클릭 → 값 수정 → 속성 적용. 새 속성은 이름과 값을 입력합니다. 빈 값은 해당 속성을 제거합니다.
• 삭제: 오른쪽 컨트롤 삭제 또는 디자인 화면에 포커스가 있을 때 Delete. 루트는 삭제할 수 없습니다.
• 취소 / 저장: 드래그 중 Esc로 취소, Ctrl+S로 저장. 디자인 화면의 Ctrl+Z/Ctrl+Y로 실행 취소·다시 실행합니다. 텍스트 입력칸에서는 입력 내용의 Undo를 유지합니다. Ctrl+S 또는 상단 관련 파일 저장은 현재 XAML·코드 비하인드·프로젝트·미리보기가 읽은 관련 파일을 저장하며 무관한 문서는 저장하지 않습니다.
• 소스: XAML 소스 버튼으로 나란히 열 수 있습니다.

Grid·클립보드·통합 검증 (0.10)

Grid 편집

Grid 또는 그 직속 자식을 선택하면 오른쪽에 행·열 편집기가 나타납니다.

• 행/열 추가, 앞에 삽입(+), 삭제(−), Auto·*·2*·고정 크기 적용을 지원합니다. 명시적 정의가 없는 Grid는 먼저 정의를 만들 수 있습니다.
• 선택한 Grid의 초록색 경계를 끌면 인접한 두 행/열의 합계 크기를 유지하며 고정 픽셀 크기로 변경합니다. 원래 Auto/별표 비율은 이 작업으로 고정값이 됩니다. Esc로 취소합니다.
• 자식 컨트롤을 선택하면 행/열 병합 수(RowSpan/ColumnSpan)를 입력할 수 있습니다. 셀 범위를 벗어나면 적용하지 않습니다.
• 정의 삽입/삭제 시 기존 자식의 행·열과 병합 범위를 보정합니다. 바인딩된 위치·크기는 덮어쓰지 않고 거부합니다. 정의 구조를 바꾸면 해당 Grid를 선택합니다.

복사·붙여넣기·복제

컨트롤 트리의 버튼 또는 디자인 화면/트리에 포커스가 있을 때 단축키를 사용합니다. 속성 입력란에서는 일반 텍스트 편집 단축키가 유지됩니다.

• Ctrl+C: 선택한 컨트롤과 하위 요소를 OS 클립보드로 복사합니다.
• Ctrl+V: 선택한 컨테이너에 붙여넣습니다. 버튼 같은 항목을 선택했다면 그 부모에 넣습니다. WPF 디자이너에서 복사한 형식만 지원합니다.
• Ctrl+D: 원래 부모 안에 복제합니다. 서로 다른 부모의 선택도 각각의 부모에 복제합니다.
• 이름 충돌 시 _Copy1 등의 이름으로 바꾸고 복사 범위 내부의 ElementName/x:Reference/TargetName 참조를 함께 변경합니다. 외부 참조는 유지하며 관련 리소스나 C# 메서드 본문을 복사하지 않습니다.
• Canvas에서는 숫자 Left/Top을 16 DIP 이동하고 바인딩·Right/Bottom 배치는 유지합니다. 다른 레이아웃에서는 기존 배치 속성을 유지해 겹칠 수 있습니다.
• 같은 파일의 이벤트 핸들러는 재사용합니다. 다른 파일에서 붙여넣은 이벤트 연결은 없는 메서드를 참조하지 않도록 제외하고 안내합니다. 이벤트 탭에서 다시 연결하세요.
• 붙여넣기·복제는 전체 WPF 검증 후 한 번의 문서 편집으로 적용하며 한 번의 Undo로 되돌릴 수 있습니다.

실제 VS Code 검증

일반/DOM/네이티브 테스트 70개와 공식 portable VS Code 1.143.1에서 실제 Extension Host 검사 14개를 통과했습니다. 저장·Undo/Redo·소스 갱신·이벤트 다중 파일 편집·클립보드·Grid 편집을 확인했습니다. 브라우저 마우스 제스처 자체를 자동화한 것은 아닙니다. 자세한 범위와 실행 방법은 VALIDATION.md를 참고하세요.

프로젝트·리소스 연결 (0.9)

XAML의 상위 폴더에서 가장 가까운 WPF .csproj를 찾습니다. UseWPF=true 또는 PresentationFramework 참조가 있는 프로젝트를 대상으로 합니다. 상단의 프로젝트 표시를 가리키면 선택한 경로와 읽은 리소스 수를 확인할 수 있습니다.

• App.xaml: 프로젝트 기본 App.xaml 또는 단순 ApplicationDefinition Include 경로의 Application.Resources를 읽습니다.
• 병합 사전: 로컬 ResourceDictionary.Source를 파일마다 상대 경로로 해석하고 중첩된 사전을 읽습니다. 없는 파일과 순환 참조는 경로가 포함된 오류로 표시합니다.
• 이미지: Image.Source, BitmapImage.UriSource, ImageBrush.ImageSource의 로컬 경로를 연결합니다. 같은 프로젝트 어셈블리의 pack://application:,,,/AssemblyName;component/Assets/file.png와 프로젝트 기준 pack 경로도 지원합니다.
• 저장 전 변경: VS Code에서 열린 프로젝트 내 XAML 리소스의 저장하지 않은 텍스트를 미리 보기에 사용합니다.
• 갱신: 관련 XAML/이미지 파일이 바뀌면 다시 렌더링합니다. 속성 변경·트리 이동·이벤트 연결 전 검증에서도 동일한 프로젝트 리소스를 사용합니다.

같은 폴더에 WPF 프로젝트가 여러 개 있거나 자동 탐색 결과를 바꾸려면 VS Code 설정에 wpfDesigner.projectFile을 지정하세요. 절대 경로 또는 작업 영역 기준 상대 경로를 사용합니다. 설정을 바꾸면 다시 렌더링합니다.

{ "wpfDesigner.projectFile": "src/MyWpfApp/MyWpfApp.csproj" }

samples/ResourceProject를 VS Code로 열고 MainWindow.xaml에서 디자이너를 실행하면 확인할 수 있습니다. 이 샘플은 App.xaml → Theme.xaml → Colors.xaml 스타일과 이미지 리소스를 사용하며 dotnet run --project samples/ResourceProject/ResourceDemo.csproj로 실행할 수도 있습니다.

현재는 MSBuild를 실행해 전체 프로젝트를 평가하지 않습니다. Directory.Build.props/import/복잡한 조건에만 정의된 WPF 설정, 링크된 리소스의 논리 이름, 외부 어셈블리의 ;component 리소스, 프로젝트 DLL의 사용자 정의 속성·컨버터 및 네트워크 리소스는 지원하지 않습니다. 같은 프로젝트 UserControl의 XAML 기반 미리보기는 0.11에서 지원합니다. 프로젝트 파일과 리소스를 빌드·수정하지 않고 미리 보기용 복사본에서 경로를 해석합니다. 다음 필수 작업은 ROADMAP.md를 참고하세요.

안정성 / Grid 편집 (0.8)

• 마지막 정상 화면: XML/렌더링 오류가 생겨도 마지막 정상 이미지를 남기고 흐리게 표시합니다. 오류 중에는 선택·드래그·속성 변경을 잠급니다. 소스를 수정해 정상 렌더링이 끝나면 편집을 다시 활성화합니다. 마지막 이미지는 현재 문서의 화면이 아닐 수 있으므로 오류 안내를 확인하세요.
• XAML 서식 보존: 전체 문서를 XML로 재직렬화하지 않고 변경하는 속성·요소의 텍스트 범위만 교체합니다. 기존 속성의 따옴표, 공백, CRLF/LF, 선언과 주석을 유지합니다. 컨트롤 이동 시 하위 트리 원문을 보존하고 필요한 네임스페이스 선언만 추가합니다. 새 요소 삽입, 빈 태그를 여는 작업, 요소 이동 주변에는 새 줄과 들여쓰기가 추가될 수 있습니다.
• Grid 행·열 이동: Grid의 직속 자식을 클릭하고 다른 셀로 드래그합니다. 초록색 대상 셀을 확인한 뒤 놓으면 Grid.Row/Grid.Column을 변경합니다. 번호는 0부터 시작합니다. Esc로 취소합니다. samples/GridDesigner.xaml로 시험하세요.

Grid 컨트롤 드래그는 하나의 기존 행·열 간 이동이며 다중 Grid 이동은 아직 제공하지 않습니다. 행·열 정의 및 경계 조절과 병합 범위 편집은 0.10에서 지원합니다. 기존 Margin/정렬/RowSpan/ColumnSpan을 유지하므로 최종 배치는 대상 셀 전체와 다를 수 있습니다. 바인딩된 행·열, 회전·확대된 컨트롤과 Grid는 소스에서 편집하세요. Grid 정의의 크기와 Auto/별표 배치는 실제 WPF 측정 결과를 사용합니다.

이벤트 관리 (0.7)

오른쪽 패널의 속성 / 이벤트 ⚡ 탭으로 전환합니다. 이벤트 탭에서는 선택한 기본 WPF 컨트롤의 이벤트를 검색하고 핸들러를 관리합니다. 컨트롤 하나를 선택해 사용하세요.

• 버튼 더블 클릭: Click이 연결되어 있지 않으면 XAML 이벤트 속성과 C# 메서드를 생성하고 코드 위치로 이동합니다. 이미 연결되어 있으면 해당 메서드로 이동합니다. 사용자 정의 Button 콘텐츠 안의 요소를 더블 클릭해도 상위 Button을 찾습니다.
• 생성/연결: 메서드 이름을 입력해 기존의 호환되는 메서드를 연결하거나 새 메서드를 만듭니다. 비우면 컨트롤이름_이벤트 또는 Button_요소번호_Click 같은 이름을 자동 생성합니다. 자동 생성 이름이 충돌하면 숫자를 붙입니다.
• 코드: 입력된 핸들러를 코드 비하인드에서 찾아 이동합니다.
• 해제: XAML 이벤트 연결만 제거합니다. 메서드 본문은 지우지 않습니다.
• 서명: WPF 이벤트의 실제 EventArgs 형식으로 private void Handler(object sender, global::System.Windows.RoutedEventArgs e) 같은 메서드를 생성합니다.

루트의 x:Class와 같은 이름의 C# partial 클래스가 필요합니다. 같은 경로의 파일.xaml.cs를 사용하며 파일이 없으면 Window/Page/UserControl용 partial 클래스와 InitializeComponent 생성자를 만듭니다. 기존 파일은 Roslyn 구문 분석기로 클래스·메서드를 찾아 편집합니다. 수정한 XAML과 C# 파일은 모두 저장하세요. 실제 이벤트 동작은 WPF 프로젝트를 빌드·실행할 때 확인할 수 있고 미리 보기에서는 실행하지 않습니다.

현재 VB/F#, 다른 경로의 코드 비하인드, 여러 파일로 분리된 메서드 탐색, 사용자 정의/연결 이벤트, 임의의 델리게이트 시그니처는 지원하지 않습니다. 구문 오류나 클래스 불일치, 기존 메서드의 서명 불일치가 있으면 적용하지 않습니다. 메서드 서명 비교는 현재 코드 파일의 타입 표기를 기준으로 하므로 별칭 등 복잡한 타입 표기는 직접 편집해야 할 수 있습니다. 프로젝트 전체를 분석하는 언어 서버 수준의 리팩터링은 아닙니다.

컨트롤 트리 (0.6)

• 접기/펼치기: 컨트롤 앞의 ▾/▸를 클릭합니다. 모두 접기/모두 펼치기 버튼도 제공합니다. 트리 행에 포커스가 있으면 좌우 방향키로 접고 펼칠 수 있습니다.
• 부모 변경: 컨트롤을 끌어 다른 패널/컨테이너 행의 가운데에 놓으면 그 컨테이너의 마지막 자식으로 이동합니다.
• 순서 변경: 대상 행의 위쪽 25% 또는 아래쪽 25%에 놓으면 그 컨트롤의 바로 앞/뒤로 이동합니다. 강조 테두리/선을 보고 놓으세요.
• 여러 개 이동: Ctrl/Shift 클릭으로 선택한 뒤 선택된 행을 드래그합니다. 원래 문서 순서로 함께 이동합니다. 부모와 자식을 함께 선택하면 부모의 하위 트리를 한 번만 이동합니다.
• 선택 유지: 이동 후 새 위치에서 선택을 유지하고 대상의 상위 컨트롤을 펼칩니다. 현재 트리 구조가 같으면 저장한 접힘 상태를 복원합니다.

지원하는 패널(Grid/StackPanel/Canvas/WrapPanel/DockPanel/UniformGrid), 목록 컨테이너와 빈 단일 콘텐츠 컨테이너 사이에서 이동할 수 있습니다. Border나 Window처럼 자식 하나만 허용하는 컨테이너에 기존 내용이 있으면 이동을 거부합니다. TabControl은 TabItem만 받습니다. 루트, 리소스·템플릿·속성 요소 및 그 내부의 이동은 지원하지 않습니다. 자기 자신이나 하위 요소로의 순환 이동도 차단합니다.

이동 후보 XAML을 WPF로 검증한 뒤 한 번의 문서 편집으로 반영합니다. 기존 Canvas.Left/Top, Grid.Row/Column 등 배치 속성과 하위 요소를 보존합니다. 부모의 레이아웃 방식이 바뀌면 화면상의 위치는 달라질 수 있습니다. 이동 취소는 XAML 소스에서 Ctrl+Z를 사용할 수 있습니다.

속성 탐색 (0.5.1)

• 범주 제목을 클릭하거나 키보드로 선택해 접고 펼칩니다. 범주별 속성 개수도 표시합니다.
• 사용 중인 속성 먼저는 기본으로 켜져 있습니다. XAML에 직접 설정한 속성을 맨 위 별도 그룹에 모읍니다. 스타일에서만 온 값은 이 그룹에 포함하지 않습니다.
• 모두 접기 / 모두 펼치기로 한 번에 전환합니다.
• 검색 중에는 일치하는 범주를 임시로 펼칩니다. 검색어를 지우면 기존 접힘 상태를 복원합니다.
• 접힘 상태, 사용 중인 속성 우선 여부, 범주별/이름순 표시를 해당 편집기의 뷰 상태에 저장합니다.

속성 그리드 (0.5)

속성 이름과 값을 같은 행에서 편집합니다. 텍스트/숫자는 Enter 또는 값 변경 후 포커스를 이동하면 적용하고, 체크박스·선택 목록·색상 선택기는 값 변경 시 적용합니다.

• 자료형별 편집: Boolean 체크박스, 열거형 선택 목록, 정수/투명도 숫자 입력, Brush/Color 단색 선택기, Thickness의 왼쪽·위·오른쪽·아래 입력을 제공합니다. Width/Height는 Auto도 입력할 수 있습니다. 바인딩 식은 텍스트로 유지합니다.
• 범주/설명: 범주별·이름순 표시를 전환하고, 속성 이름을 클릭하면 아래 상세 영역에서 자료형·설정 여부·메타데이터 기본값·설명을 봅니다. 모든 속성에 한글 설명이 제공되는 것은 아닙니다.
• 초기화: 행 오른쪽 ↶는 직접 설정한 XAML 속성을 제거합니다. 이후 스타일·상속·기본값에 따라 실제 값이 결정되며 메타데이터 기본값과 다를 수 있습니다.
• 검증: 임시 XAML에서 자료형/값 검증과 WPF 로딩·렌더링을 먼저 수행합니다. 성공한 경우에만 문서를 변경합니다. 실패하면 해당 행에 오류를 표시하고 입력 내용과 기존 XAML을 유지합니다. 프로젝트 종속 리소스가 해결되지 않으면 검증도 실패할 수 있습니다.
• 다중 선택: 선택된 컨트롤에서 이름·자료형·값 후보가 같은 공통 속성을 표시합니다. 서로 다른 값 또는 설정 여부는 여러 값으로 표시하며, 편집하면 선택 전체에 한 번에 반영합니다. 하나라도 유효하지 않으면 전체를 적용하지 않습니다. 레이아웃 이동과 달리 공통 속성 편집은 같은 Canvas일 필요가 없습니다.

메타데이터 기본값은 스타일/바인딩을 포함한 실제 최종값이 아닙니다. 컬렉션·템플릿 등 복잡한 값과 사용자 정의 DependencyProperty는 소스에서 편집해야 합니다. 기본 WPF 속성의 리소스 선택 및 Binding 편집은 0.11에서 지원합니다. 기존 아래쪽의 속성 이름·값 입력도 남겨 두었으며 동일한 적용 전 검증을 거칩니다.

검색 가능한 도구 상자 / 속성 목록

왼쪽 검색창에서 영문 컨트롤 이름 또는 한글 설명을 입력하세요. 예: ComboBox, 달력, 레이아웃. 31개 기본 WPF 컨트롤을 세로 목록으로 제공합니다. 목록을 클릭하면 선택한 레이아웃 패널에 추가되고, Canvas 위로 끌어 놓으면 해당 위치에 추가됩니다. ComboBox/ListBox/TreeView/TabControl 등은 샘플 항목을 함께 생성합니다. Image는 Source를 지정해야 이미지가 보입니다. 같은 프로젝트의 UserControl은 별도 범주에서 검색·추가할 수 있습니다. DLL 빌드 후 외부 라이브러리별 탭에서 컨트롤을 검색·추가할 수 있습니다.

오른쪽 속성 목록은 선택한 컨트롤 타입의 .NET 메타데이터를 읽어 편집 가능한 문자열 변환 속성과 일반적인 연결 속성을 표시합니다. 모든 WPF 속성을 나열하지는 않습니다. 복잡한 컬렉션/템플릿 속성은 XAML 소스에서 편집합니다. Canvas.Left/Top, Grid.Row/Column 등 공통 연결 속성도 검색할 수 있습니다.

• 전체 속성: 아직 XAML에 추가하지 않은 속성도 미설정으로 표시합니다. 미설정은 실제 기본값 표시가 아닙니다.
• 설정된 속성만: 현재 XAML에 속성으로 적힌 값만 표시합니다. 설정된 속성은 ●로 구분합니다.
• 검색: 이름, 설정값, 일반 속성의 한글 키워드로 검색합니다. 예: Width, 너비, Background, 배경.
• 편집: 목록에서 속성 선택 → 아래 값 입력 → 속성 적용. 참/거짓 및 열거형 값은 입력란의 값 후보 목록을 이용할 수 있습니다. 빈 값은 속성을 제거합니다.

다중 선택 / 정렬

• Ctrl 또는 Shift + 클릭: 화면이나 왼쪽 트리에서 선택 항목을 추가하거나 해제합니다. 일반 클릭은 한 항목을 선택하며, 이미 선택된 항목을 드래그하면 선택 전체가 이동합니다.
• 영역 선택: Canvas의 빈 공간에서 사각형을 드래그하세요. 사각형에 완전히 포함된 Canvas 직속 자식들을 선택합니다. Ctrl/Shift를 누른 상태로 드래그하면 기존 선택에 추가합니다. Esc로 취소합니다.
• Ctrl+A: 디자인 화면에 포커스가 있을 때 현재 Canvas의 이동 가능한 직속 자식들을 모두 선택합니다.
• 정렬: 같은 Canvas의 컨트롤을 2개 이상 선택하고 오른쪽의 왼쪽/가로 중앙/오른쪽/위쪽/세로 중앙/아래쪽 버튼을 사용합니다. 선택 전체의 바깥 경계를 기준으로 맞춥니다.
• 간격: 3개 이상 선택하면 가로/세로 간격을 균등하게 맞출 수 있습니다. 바깥쪽 항목은 유지하고 컨트롤 사이의 여백을 같게 합니다.
• 함께 이동: 선택한 컨트롤을 드래그하거나 방향키로 1 DIP, Shift+방향키로 10 DIP 이동합니다. 드래그 맞춤은 그룹 전체에 같은 이동량을 적용해 상대 간격을 유지합니다.
• 일괄 삭제: 선택 후 Delete 또는 컨트롤 삭제를 누릅니다. 선택한 루트/속성 요소가 포함되면 삭제를 거부합니다.

다중 이동·정렬은 같은 Canvas의 직속 자식으로 제한합니다. 바인딩이나 변환이 있는 요소는 속성 또는 소스에서 편집하세요. 다중 선택 상태에서는 공통 속성을 함께 편집할 수 있으며 크기 조절 핸들은 비활성화합니다. 정렬/그룹 이동/삭제는 한 번의 문서 편집으로 적용됩니다. 일부 요소가 유효하지 않으면 전체 변경을 적용하지 않습니다.

현재 범위

Canvas에서 자유 배치를 지원합니다. Grid는 기존 행·열 간 드래그 이동을 지원하며 StackPanel 등 나머지 레이아웃은 화면 선택과 속성 편집을 지원합니다. 이동은 Canvas.Left/Top, 크기는 Width/Height를 변경합니다. 바인딩, Canvas.Right/Bottom, 변환이 있는 요소의 직접 배치는 제한됩니다. 데이터 바인딩, 스타일, 최소/최대 크기 등 WPF 규칙에 따라 최종 렌더링이 요청 크기와 다를 수 있습니다.

프로젝트 DLL의 사용자 정의 컨트롤, 외부 어셈블리 리소스 및 실행 시 ViewModel 자동 연결은 지원하지 않습니다. 로컬 App.xaml 리소스와 같은 프로젝트 어셈블리의 pack 경로는 0.9에서 지원하며, C# 이벤트 연결은 이벤트 탭을 사용합니다. 독립된 loose XAML을 로드합니다. Window는 화면 밖의 비활성 창에서 실제 WPF 레이아웃을 계산하며, 제목 표시줄·테두리를 제외한 클라이언트 영역을 표시합니다. Page/UserControl도 원래 타입으로 배치합니다. WindowState는 미리보기에서 Normal로 표시합니다. x:Class와 디자인 전용 속성 및 일부 이벤트를 제거하고, 지원하지 않는 항목은 오류로 표시합니다.

기존 XAML은 변경 범위를 패치하며 새 요소 삽입·이동 주변의 줄바꿈과 들여쓰기는 추가될 수 있습니다. 런타임 렌더러는 사용자 코드를 완전히 격리하는 보안 샌드박스가 아니므로 신뢰하는 XAML만 여세요. 원격 Linux/WSL/웹 VS Code는 지원 범위가 아닙니다. C# 코드로만 화면을 생성하는 프로젝트는 먼저 XAML로 분리해야 합니다.

개발과 검증

npm ci
npm run build
npm test
node test/render-smoke.js
npm run package

VS Code에서 이 폴더를 연 후 F5로 Extension Development Host를 실행할 수 있습니다. 먼저 빌드하세요.

자동 검증: XML 변경, 잘못된 배치 차단, 좌표/스냅 계산, DOM 기반 클릭·이동·크기 조절·취소·드롭·문서 갱신 검증, 실제 WPF 렌더링 후 좌표와 크기 재확인. 실제 VS Code Extension Host 검사는 integration/에서 실행하며, 브라우저 마우스 제스처의 수동 검증은 별도로 진행해야 합니다.

extension.js: CustomTextEditorProvider 및 프로세스 관리. model.js: XML 편집. media/: 디자이너 UI 및 좌표 계산. renderer/: STA WPF 렌더러.

참고: VS Code Custom Editor API, WPF XamlReader

배포 전 안정화 점검

• Name 편집은 기존 x:Name 선언을 유지합니다. 바인딩/애니메이션이나 현재 코드 비하인드에서 참조하는 이름은 소스에서 참조와 함께 변경해야 합니다. C# 구문 참조 검사는 현재 .xaml.cs 파일을 대상으로 하며 프로젝트 전체 의미 분석/리팩터링은 아닙니다.
• 삭제 전에 WPF 검증을 거쳐 사용 중인 StaticResource를 깨뜨리는 삭제를 막습니다.
• 오래된 오류나 파일 선택 취소가 잘못된 미리보기의 편집 잠금을 해제하지 않도록 처리합니다.
• UTF-8 BOM, 대문자 확장자, Windows 경로 대소문자와 저장 전 오버레이를 처리합니다.
• 단일 로컬 폰트 URI(예: pack://application:,,,/MyApp;component/Fonts/#Font Family)를 미리보기용 파일 경로로 해석합니다. 실제 앱에서 쓰려면 폰트 파일을 프로젝트 Resource로 포함해야 합니다. 폰트 가져오기 UI나 모든 복합 폰트 문자열을 지원하는 것은 아닙니다.
• 시간 초과/큰 응답/한글 스트림 오류 처리를 공통화했습니다.

1.0.6 사용자 정의 컨트롤 대체 미리보기

같은 프로젝트의 C# 소스에서 WPF 상속 형식을 찾으면 기본 형식으로 대신 표시합니다. 예: MyTextBox : TextBox. 생성자·이벤트·사용자 정의 속성은 실행하지 않으며, 해당 형식만의 속성은 미리보기에서 제외합니다. 해석할 수 없는 화면상의 CLR 컨트롤은 안내 상자로 표시합니다. 원본 XAML과 C#은 바꾸지 않습니다. 상단 프로젝트 상태의 안내에 마우스를 올리면 대체 형식과 제외된 속성을 확인할 수 있습니다.

이 기능은 정확한 사용자 컨트롤 실행이나 외부 DLL 지원이 아닙니다. 복잡한 별칭·제네릭 상속, 사용자 정의 리소스·컨버터·스타일 대상 형식은 여전히 지원하지 않을 수 있습니다. 같은 이름의 소스 형식이 여러 개 있거나 조건부 컴파일이 있는 프로젝트에서는 실제 빌드와 다를 수 있습니다.

1.0.7 변환기·DataContext가 포함된 샘플

같은 프로젝트에서 직접 IValueConverter/IMultiValueConverter를 구현한 C# 리소스는 실행하지 않는 대체 변환기를 사용합니다. 대체 변환기는 UnsetValue를 반환하므로 바인딩 FallbackValue 또는 대상 속성 기본값을 사용하며 실제 변환 결과를 재현하지 않습니다. C# 객체를 생성하는 DataContext 속성 요소와 사용자 정의 컨트롤을 포함하는 스타일 Setter는 미리보기에서 제외하고 상단 안내에 표시합니다. App.xaml/병합 리소스 사전에도 적용되며 원본 파일은 유지합니다. CustomComboBox는 기본 ContentControl로 열리며 전용 드롭다운 템플릿과 데이터 목록은 재현하지 않습니다. 외부 DLL의 변환기 및 복잡한 변환기 상속은 아직 지원하지 않습니다.

1.1.0 프로젝트 DLL 미리보기

상단 DLL 빌드를 누르면 프로젝트 폴더의 열린 XAML/C#/프로젝트 파일을 저장한 뒤 dotnet build -c Debug를 실행합니다. 출력은 임시 폴더에 두며 프로젝트의 중간 빌드 파일(obj)은 정상적인 SDK 빌드 과정에서 생성됩니다. .NET 10 SDK가 필요합니다. 빌드된 프로젝트 및 참조 DLL의 실제 컨트롤·변환기·ViewModel·템플릿을 별도 렌더러 프로세스에서 읽습니다. 사용자 코드가 실행되며 보안 샌드박스가 아니므로 신뢰하는 프로젝트에서 사용하세요. WPF 디자인 모드 플래그를 설정하지만 모든 라이브러리가 디자인 모드를 지원하는 것은 아닙니다.

• CalculatorDemo의 MyTextBox, CustomComboBox의 DropList/변환기/템플릿을 실제 형식으로 검증했습니다.
• 프로젝트 참조 DLL의 컨트롤과 ;component 리소스를 테스트했습니다. 모든 상용/NuGet 라이브러리의 호환성을 보장하는 기능은 아닙니다.
• 현재 편집 중인 XAML은 저장하지 않은 변경도 반영됩니다. DLL 내부의 다른 UserControl XAML, 라이브러리 코드·리소스를 바꾸면 다시 DLL 빌드를 누르세요. 프로젝트 C#/프로젝트 변경 감지 시 소스 모드로 돌아갑니다. 프로젝트 밖의 참조 소스 변경은 자동 감지하지 않습니다.
• 소스 모드로 사용자 DLL 사용을 중단할 수 있습니다. VS Code를 재시작하면 다시 DLL 빌드가 필요합니다. DLL 로딩·생성자 실행 실패 시 가능한 경우 소스 기반 대체 미리보기로 돌아갑니다.
• 사용자 정의 속성은 실제 타입의 메타데이터로 편집합니다. 외부 컨트롤 자동 도구상자 검색과 사용자 정의 이벤트 생성은 아직 지원하지 않습니다. XAML에서 선언하거나 같은 프로젝트 UserControl 도구상자를 사용하세요.
• 현재는 현대 .NET WPF와 단일 대상 프레임워크 프로젝트 중심입니다. .NET Framework, 다중 타깃, 특수 MSBuild 출력, 런타임 네이티브 의존성 등은 추가 호환성 검증이 필요합니다.
• 컴파일 오류가 있으면 먼저 소스를 고쳐야 합니다. 실제 앱과 디자이너의 DB/파일/네트워크 초기화 환경이 다를 수 있습니다.

1.1.1 Material Design

XmlnsDefinition으로 URL 네임스페이스를 등록하는 참조 DLL도 해석합니다. CLR 메타데이터의 참조 목록에 없는 BAML 전용 의존성은 빌드 출력 폴더의 관리 DLL을 로드해 찾습니다. MaterialDesignThemes 5.4.0의 BundledTheme, MD3 테마, Card/PackIcon 및 HintAssist를 실제 NuGet 프로젝트에서 검증했습니다.

1.2.0 라이브러리 도구상자

상단 DLL 빌드 후 왼쪽 도구상자에 라이브러리별 탭이 표시됩니다. 기본 WPF / 프로젝트 UserControl / MaterialDesignThemes 등의 탭을 골라 검색하고, 클릭 또는 Grid·Canvas로 끌어 놓아 추가하세요. 빌드 출력 폴더의 관리 어셈블리에서 생성 가능한 FrameworkElement를 찾으며, 애플리케이션과 루트 리소스에서 이름이 있는 기본 WPF 컨트롤용 라이브러리 스타일도 표시합니다. Material Design의 Button 스타일 변형도 해당 탭에 함께 나옵니다. 외부 DLL은 설치한 NuGet/프로젝트 참조를 통해 빌드 출력으로 복사되어야 합니다.

기본 WPF 탭에서 새로 추가한 컨트롤은 Style="{x:Null}"로 앱의 암시적 테마를 해제합니다. 라이브러리 스타일 항목은 Style="{StaticResource ...}"를 지정합니다. 따라서 기본 버튼과 Material 버튼을 함께 배치할 수 있습니다. 기존 컨트롤의 스타일은 바꾸지 않습니다. 필요한 테마 리소스 등록은 각 라이브러리의 안내를 따라야 합니다. 매개변수 생성자만 있는 컨트롤·추상/제네릭 타입은 제외되며, 특정 컨트롤은 추가 설정이나 데이터가 필요할 수 있습니다.

1.2.1 라이브러리 추가 안내

왼쪽 도구상자의 ＋ 라이브러리 추가에서 NuGet 패키지 설치 / DLL 파일 선택 / 기존 프로젝트 참조 불러오기를 선택하세요. NuGet은 패키지 ID(예: MaterialDesignThemes)를 입력하면 안정 버전과 의존성을 설치합니다. DLL은 .NET 관리 어셈블리만 지원하며 필요한 관리 DLL을 함께 선택해야 합니다. 프로젝트 Libraries/Imported-* 폴더로 복사하고 csproj에 상대 HintPath와 Private=true 참조를 등록합니다. 기존 같은 어셈블리 참조는 자동 덮어쓰지 않습니다. 테마 등록과 라이선스 설정, 네이티브 의존성은 제품 안내에 따라 별도 처리해야 할 수 있습니다.

추가가 완료되면 프로젝트 파일을 저장하고 빌드해 라이브러리 탭을 갱신합니다. 이미 추가된 라이브러리는 리본의 라이브러리 불러오기로 갱신하세요(기존 DLL 빌드와 같은 기능). 프로젝트 코드를 실행하는 동작이므로 신뢰하는 프로젝트에서 사용하세요. 재시작 후 빌드 정보 재사용 방식은 이번 버전에서 변경하지 않았습니다.

1.3.0 DLL 재사용과 첫 실행 안내

프로젝트를 처음 열면 DLL 빌드 / 소스 미리보기를 선택합니다. DLL 사용을 선택한 뒤 빌드에 성공하면 해당 프로젝트의 빌드 정보와 파일 지문을 VS Code 확장 저장소에 기록합니다. 재시작 후에도 코드·참조·출력에 변경이 없으면 저장된 DLL을 자동 재사용합니다. 소스 미리보기 선택도 기억하며, 다시 DLL을 사용하려면 라이브러리 불러오기를 누르세요.

C#/프로젝트/직접 참조 DLL/참조 프로젝트 소스 또는 빌드 출력이 바뀌면 소스 모드로 전환하고 다시 빌드할지 안내합니다. 현재 편집 중인 루트 XAML은 직접 해석하므로 그 파일만 수정한 경우에는 DLL을 다시 빌드하지 않습니다. 다른 UserControl XAML 변경은 다시 빌드해야 합니다. 안내를 닫으면 다음 빌드 전까지 같은 상태에서 반복 안내하지 않습니다. 빌드 출력이 있는 임시 폴더를 운영체제가 정리했을 때도 재빌드가 필요합니다.

MSBuild 조건·와일드카드·사용자 정의 import를 완전하게 평가하는 기능은 아닙니다. 작업영역 밖의 파일 변경은 다음 열기/새로 고침에서 감지될 수 있습니다. 프로젝트 빌드 기록은 프로젝트 자체나 Git 저장소에 추가하지 않습니다.

1.4.0 반복 미리보기 성능

편집기별 STA 렌더러 프로세스를 재사용하여 매번 .NET과 DLL을 처음부터 로드하지 않습니다. App.xaml/병합 리소스가 동일하면 파싱한 애플리케이션 리소스 사전도 재사용합니다. 파일 또는 저장하지 않은 리소스가 바뀌면 리소스를 다시 해석하며, DLL 빌드 출력이 바뀌면 새 프로세스를 사용합니다. 60초 유휴 또는 성공 요청 40회 후에는 프로세스를 교체하고, 편집기를 닫으면 종료합니다.

테스트 PC의 반복 렌더러 측정에서 기본 화면은 약 0.45~0.48초에서 0.008~0.015초, Material Design 화면은 약 1.59~1.73초에서 0.21~0.25초로 줄었습니다. 최초 로딩, 주기적 프로세스 교체, 파일 검사와 VS Code 화면 표시 시간은 별도이며 프로젝트·PC에 따라 달라집니다.

1.4.1 빈 화면에서 시작하기

Window만 있는 빈 화면에서도 도구상자의 Grid 또는 Canvas를 디자인 화면이나 컨트롤 트리의 Window 행으로 끌어 놓을 수 있습니다. Window를 선택하고 도구상자를 클릭해도 추가됩니다. 첫 레이아웃은 창 콘텐츠 영역을 채우며, 이후 내부 Grid/Canvas를 선택해 버튼 등을 추가하세요. Page/UserControl/Border/Viewbox/ScrollViewer 등 표준 단일 콘텐츠 영역도 빈 상태라면 지원합니다. 이미 콘텐츠가 있으면 중복 삽입하지 않고 내부 패널을 선택하도록 안내합니다. 모든 컨트롤/복잡한 사용자 정의 콘텐츠 호스트를 자동으로 구성하는 기능은 아닙니다.

1.5.0 탭 미리보기

디자인 화면에서 XAML에 선언한 TabItem의 머리글을 클릭해 해당 탭을 표시하고 내부 컨트롤을 편집할 수 있습니다. 탭 전환 자체는 XAML이나 앱 기본 탭을 바꾸지 않습니다. 새로 고침하면 XAML의 기본 탭으로 돌아갑니다. ItemsSource로 생성되는 탭은 지원 대상이 아닙니다.

1.6.0 컬렉션 편집

DataGrid를 선택하고 속성 패널의 DataGrid 열 편집을 펼치세요. 텍스트·체크박스 열을 추가하고, 기존 열을 재정렬·삭제하거나 제목과 단순 바인딩 경로를 수정할 수 있습니다. ComboBox와 ListBox는 항목 편집에서 직접 선언한 항목을 관리합니다. ItemsSource로 생성되는 항목은 데이터 소스에서 수정하세요. 복합 바인딩과 템플릿 내부는 이 편집기에서 덮어쓰지 않습니다. DisplayIndex를 명시한 열은 추가·삭제·재정렬을 제한합니다.