시각적 디자인과 XAML 및 코드 작성 비교

  • 아티클

XAML 마크업 및 코드 편집은 디자인 작업을 하는 사람에게 복잡한 작업이 될 수 있습니다. Blend for Visual Studio는 디자이너의 편리한 작업을 도울 수 있도록 설계되었습니다. Blend의 디자인 보기에서 완전한 WPF(Windows Presentation Foundation) 기반 또는 Microsoft Silverlight 기반 응용 프로그램을 만들 수 있습니다. 또한 Microsoft Expression Design에서 내보낸 아트워크 자산과 XAML은 물론 Microsoft Expression Encoder에서 생성된 Silverlight 인코딩 템플릿도 가져올 수 있습니다.

Blend는 팀으로 진행되는 개발 작업을 고려하여 설계된 제품입니다. 소프트웨어 팀은 UI(사용자 인터페이스) 작업을 하는 디자이너와 UI 뒤에서 실행되는 코드 작업을 하는 프로그래머로 구성되는 경우가 많습니다. 이를 고려하여 Blend는 개발자에게 제공되는 최소한의 코드를 생성하는 기능과, 기존 컨트롤처럼 사용하여 기존 코드에 연결할 수 있게 해 주는 이벤트 처리기나 사용자 지정 컨트롤과 같은 기능을 갖추고 있습니다.

Blend에서 수행할 수 있는 프로젝트 작업

  • WPF 기반 응용 프로그램(.exe), Silverlight 기반 응용 프로그램(.exe), 웹 사이트가 있는 Silverlight 기반 응용 프로그램 또는 컨트롤 라이브러리(.dll)의 프로젝트를 포함하는 솔루션을 만듭니다.

  • 새 XAML(eXtensible Application Markup Language) 파일과 해당 코드 숨김 파일을 추가하여 응용 프로그램의 최상위 수준 창, 사용자 정의 컨트롤, 응용 프로그램 내에서 탐색 가능한 페이지 또는 다시 사용 가능한 스타일, 컨트롤 템플릿, 브러시 리소스 등이 있는 리소스 사전을 만들 수 있습니다.

  • 프로젝트에 기존 파일을 추가하거나 이미지, XML, 비디오, 오디오, 라이선스, XAML 또는 코드 파일과 같은 기존 파일에 링크를 추가합니다.

  • .dll 파일에 있는 기존 사용자 지정 컨트롤에 참조를 추가합니다. 사용자 지정 컨트롤은 기존 원본 코드 파일(.vb 또는 .cs)에도 있을 수 있습니다. Blend 프로젝트에 추가한 사용자 지정 컨트롤은 Blend와 함께 기본적으로 제공되는 컨트롤을 사용할 때와 동일한 방법으로 사용할 수 있습니다.

    .cs 파일에 있는 사용자 지정 컨트롤의 예는 사용자 지정 컨트롤 만들기를 참조하십시오.

    팁

    사용자 지정 컨트롤이 있는 원본 코드 파일을 Blend 프로젝트에 추가한 경우 프로젝트를 빌드해야만 자산 패널의 컨트롤 범주에 컨트롤이 표시됩니다.

  • 솔루션에 새 프로젝트 추가 Blend WPF 프로젝트에 기존 프로젝트를 추가하거나 연결할 수 있습니다.

  • 프로젝트에 있는 모든 파일을 엽니다. XAML 파일은 편집할 수 있도록 아트보드에서 열립니다. 사용 중인 문서에 이미지 파일을 삽입할 수 있으며 사운드/비디오 파일은 애니메이션 타임라인에서 열립니다. 코드 숨김 파일이 아트보드에서 텍스트 편집기를 통해 열립니다. 모든 파일은 해당 파일 형식에 맞는 외부 편집기에서 열 수 있습니다. 예를 들어 Blend의 프로젝트 패널에서 .xml 파일을 두 번 클릭하면 메모장에서 파일이 열립니다. 코드 파일은 Blend 텍스트 편집기에서 열리지만 이 설치되어 있는 경우 필요에 따라 Visual Studio에서도 파일을 열 수 있습니다.

    자세한 내용은 코드 숨김 파일 수정을 참조하십시오.

  • WPF 또는 Silverlight 응용 프로그램의 Visual Studio 2010 프로젝트나 솔루션을 열어 UI를 만듭니다.

  • 응용 프로그램을 빌드(Ctrl+Shift+B)하거나 실행(F5 키)하여 디버그하고 결과 패널에 표시되는 오류 메시지를 확인하고 해결할 수 있습니다.

  • 응용 프로그램에서 인스턴스화할 수 있는 사용자 지정 클래스의 코드 파일을 추가합니다.

    예제를 보려면 사용자 지정 컨트롤 만들기를 참조하십시오.

  • 코드 파일을 편집합니다. Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 파일은 아트보드에서 찾기 및 바꾸기 기능과 IntelliSense가 있는 텍스트 편집기를 통해 열립니다.

    자세한 내용은 코드 숨김 파일 수정을 참조하십시오.

Blend에서 코드를 사용하지 않고 만들 수 있는 작업

코드를 사용해야만 수행할 수 있는 작업

  • 사용자가 응용 프로그램의 UI 요소와 상호 작용할 때 이벤트 처리기에서 더욱 복잡한 동작을 정의합니다. 키 누름, 마우스 액션 등에 응답하도록 이벤트 처리기를 프로그래밍할 수 있습니다. 이 작업은 애니메이션 및 미디어에 대한 이벤트 트리거와는 다릅니다. 예를 들어 이벤트 처리기를 사용하면 수학 수식을 사용하여 응용 프로그램의 동작을 프로그래밍할 수 있습니다.

    예제를 보려면 새 이벤트 처리기 메서드 만들기를 참조하십시오.

  • 기존 컨트롤의 동작을 사용자 지정하거나 새 사용자 지정 컨트롤를 만듭니다.

    WPF Button 컨트롤을 기반으로 하는 사용자 지정 컨트롤의 예는 사용자 지정 컨트롤 만들기를 참조하십시오.

  • Microsoft SQL Server 데이터와 같은 데이터를 데이터 테이블에 로드하고 Blend에서 사용할 수 있는 CLR 데이터 개체로 변환합니다.

  • 값 변환기를 만들어 사용자 지정 논리를 데이터 바인딩에 추가합니다. 이 작업은 특정한 한 개체의 속성을 호환되지 않는 데이터 형식의 속성으로 바인딩하려는 경우 유용합니다.

Visual Studio에서만 수행할 수 있는 작업

  • 응용 프로그램이 실행되는 동안 한 줄씩 단계별로 응용 프로그램을 디버그합니다.

    팁

    한 컴퓨터에서 동일한 프로젝트 파일을 Blend와 Visual Studio에서 동시에 열 수도 있습니다.둘 중 한 시스템에서 파일을 변경하고 저장하면, 다른 시스템으로 전환할 때 파일을 다시 로드할 것인지 묻는 알림 메시지가 표시됩니다.

    자세한 내용은 Visual Studio에서 Blend 응용 프로그램 디버그을 참조하십시오.

Blend에서 코드를 추가할 때 편리한 점

  • Blend에서는 새 항목 추가 마법사를 사용하여 만드는 모든 XAML 파일에 대한 코드 숨김 파일을 필요에 따라 만들 수 있습니다. Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 파일은 아트보드에서 찾기 및 바꾸기 기능과 IntelliSense가 있는 텍스트 편집기를 통해 열립니다.

    자세한 내용은 XAML 사용을 참조하십시오.

  • 속성 패널의 이벤트 보기JJ170512.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ko-kr,VS.120).png에서 이벤트를 두 번 클릭하면 Blend는 빈 이벤트 처리기 메서드에 대한 코드를 생성합니다.

    자세한 내용은 이벤트에 응답하는 코드 작성을 참조하십시오.

    팁

    두 사람 이상의 작업자가 동시에 한 프로젝트를 사용해야 하는 경우에는 Microsoft Team Foundation과 같은 원본 제어 시스템을 사용하는 것이 좋습니다.원본 제어 시스템은 프로젝트 파일의 중앙 리포지토리를 관리하며 사용자가 자신의 로컬 컴퓨터로 파일을 체크 아웃하여 편집할 수 있게 해 줍니다.자세한 내용은 Team Foundation 소스 제어 사용(Blend)을 참조하십시오.

코드 작성에 대한 도움말 보기

Blend 응용 프로그램의 코드 작성과 관련한 정보가 필요하면 공식 Blend 블로그인 BlendInsider에 나 게시된 자료를 참조하시기 바랍니다. 토론 포럼, 자습서 및 기타 리소스에 대한 링크를 포함합니다.