다음을 통해 공유

프로젝트 설정

앱을 코딩하기 전에 Visual Studio 프로젝트를 간단히 살펴보고 일부 프로젝트 설정을 처리합니다. Visual Studio에서 WinUI 3 프로젝트를 만들면 몇 가지 중요한 폴더와 코드 파일이 생성됩니다. Visual Studio의 솔루션 탐색기 창에서 볼 수 있습니다.

Visual Studio에서 WinUI 3 프로젝트에 대한 파일을 보여 주는 솔루션 탐색기입니다.

여기에 나열된 항목은 주로 상호 작용할 항목입니다. 이러한 파일은 WinUI 3 앱을 구성하고 실행하는 데 도움이 될 수 있습니다. 각 파일은 아래에 설명된 다른 용도로 사용됩니다.

  • 자산 폴더

    이 폴더에는 앱의 로고, 이미지 및 기타 미디어 자산이 포함되어 있습니다. 앱 로고에 대한 자리 표시자 파일로 채워집니다. 이 로고는 앱이 게시될 때 Windows 시작 메뉴, Windows 작업 표시줄 및 Microsoft Store에서 앱을 나타냅니다.

  • App.xaml 및 App.xaml.cs

    파일에는 App.xaml 색, 스타일 또는 템플릿과 같은 앱 전체 XAML 리소스가 포함되어 있습니다. 파일은 App.xaml.cs 일반적으로 애플리케이션 창을 인스턴스화하고 활성화하는 코드를 포함합니다. 이 프로젝트에서는 클래스를 가리킵니다 MainWindow .

  • MainWindow.xaml 및 MainWindow.xaml.cs

    이러한 파일은 앱의 창을 나타냅니다.

  • Package.appxmanifest

    이 패키지 매니페스트 파일을 사용하면 Microsoft Store에 앱이 표시되는 방식을 결정하는 게시자 정보, 로고, 프로세서 아키텍처 및 기타 세부 정보를 구성할 수 있습니다.

XAML 파일 및 부분 클래스

XAML(Extensible Application Markup Language)은 개체를 초기화하고 개체의 속성을 설정할 수 있는 선언적 언어입니다. 선언적 XAML 태그에 표시되는 UI 요소를 만들 수 있습니다. 그런 다음 이벤트에 응답하고 XAML에서 원래 선언한 개체를 조작할 수 있는 각 XAML 파일(일반적으로 코드 숨김 파일이라고 함)에 대해 별도의 코드 파일을 연결할 수 있습니다.

일반적으로 XAML 파일, .xaml 파일 자체 및 솔루션 탐색기의 자식 항목인 해당 코드 숨김 파일이 있는 두 개의 파일이 있습니다.

  • 파일에는 .xaml 앱 UI를 정의하는 XAML 태그가 포함되어 있습니다. 클래스 이름은 특성으로 x:Class 선언됩니다.
  • 코드 파일에는 XAML 태그 및 메서드 호출과 상호 작용하기 위해 만든 코드가 InitializeComponent 포함되어 있습니다. 클래스는 .로 partial class정의됩니다.

프로젝트를 InitializeComponent 빌드할 때 메서드가 호출되어 파일을 구문 분석 .xaml 하고 코드와 조인된 코드를 partial class 생성하여 전체 클래스를 만듭니다.

다음 문서에서 자세히 알아보세요.

MainWindow 업데이트

프로젝트에 포함된 클래스는 MainWindow 앱의 셸을 정의하는 데 사용되는 XAML Window 클래스의 하위 클래스입니다. 앱 창에는 다음 두 부분으로 구성됩니다.

  • 창의 클라이언트 부분은 콘텐츠가 있는 위치입니다.
  • 비 클라이언트 부분은 Windows 운영 체제에서 제어하는 부분입니다. 여기에는 캡션 컨트롤(최소/최대/닫기 단추), 앱 아이콘, 제목 및 끌기 영역이 있는 제목 표시줄이 포함됩니다. 창 바깥쪽의 프레임도 포함됩니다.

WinUI Notes 앱을 Fluent 디자인 지침과 일치하도록 하려면 몇 가지 수정을 수행해야 합니다 MainWindow. 먼저 창 배경으로 Mica 재질을 적용합니다. Mica는 테마와 바탕 화면 배경 화면을 통합하여 창의 배경을 그리는 불투명하고 역동적인 소재입니다. 그런 다음 앱의 콘텐츠를 제목 표시 줄 영역으로 확장하고 시스템 제목 표시줄을 XAML TitleBar 컨트롤로 바꿉다. 이렇게 하면 공간을 더 잘 사용할 수 있으며, 제목 표시줄에 필요한 모든 기능을 제공하면서 디자인을 보다 효율적으로 제어할 수 있습니다.

또한 프레임 을 창의 콘텐츠로 추가합니다. 이 클래스는 FramePage 클래스와 함께 작동하여 앱의 콘텐츠 페이지 사이를 탐색할 수 있도록 합니다. 이후 단계에서 페이지를 추가합니다.

팁 (조언)

GitHub 리포지토리에서 이 자습서의 코드를 다운로드하거나 볼 수 있습니다. 이 단계에서 코드를 보려면 이 커밋을 참조하세요. 참고 페이지 - 초기입니다.

  1. MainWindow.xaml 두 번 클릭하여 엽니다.

  2. 여는 태그와 닫는<Window.. > 태그 사이에 기존 XAML을 다음으로 바꿉니다.

    <Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
</Window.SystemBackdrop>

<Grid>
    <Grid.RowDefinitions>
        <!-- Title Bar -->
        <RowDefinition Height="Auto" />
        <!-- App Content -->
        <RowDefinition Height="*" />     
    </Grid.RowDefinitions>
    <TitleBar x:Name="AppTitleBar"
              Title="WinUI Notes">
        <TitleBar.IconSource>
            <FontIconSource Glyph="&#xF4AA;"/>
        </TitleBar.IconSource>
    </TitleBar>

    <!-- App content -->
    <Frame x:Name="rootFrame" Grid.Row="1"/>
</Grid>

  3. Ctrl +S를 누르거나 도구 모음에서 저장 아이콘을 클릭하거나파일 저장 MainPage.xaml 메뉴를 선택하여 > 저장합니다.

이 모든 XAML 태그가 지금 수행하는 작업을 이해하지 못하는 경우 걱정하지 마세요. 앱 UI의 나머지 부분을 빌드할 때 XAML 개념을 자세히 설명합니다.

비고

이 태그에는 XAML에서 속성을 설정하는 두 가지 방법이 표시됩니다. 첫 번째 및 가장 짧은 방법은 다음과 같이 XAML <object attribute="value"> 사용하는 것입니다. 이 기능은 다음과 같은 <MicaBackdrop Kind="Base"/>간단한 값에 적합합니다. 그러나 XAML 파서가 문자열을 예상 값 형식으로 변환하는 방법을 알고 있는 값에 대해서만 작동합니다.

속성 값이 더 복잡하거나 XAML 파서가 변환 방법을 모르는 경우 속성 요소 구문을 사용하여 개체를 만들어야 합니다. 이런 식으로:

<object ... >
    <object.property>
        value
    </object.property>
</object>

예를 들어 속성을 설정 Window.SystemBackdrop 하려면 속성 요소 구문을 사용하고 요소를 명시적으로 만들어야 MicaBackdrop 합니다. 그러나 간단한 특성 구문을 사용하여 속성을 설정할 MicaBackdrop.Kind 수 있습니다.

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

에서 MainWindow.xaml속성 <Window.SystemBackdrop><Grid.RowDefinitions><TitleBar.IconSource> 요소 구문을 사용하여 설정해야 하는 복합 값을 포함합니다.

다음 문서에서 자세히 알아보세요.

지금 앱을 실행하면 추가한 XAML TitleBar 요소가 표시되지만 여전히 표시되는 시스템 제목 표시줄 아래에 표시됩니다.

시스템 제목 표시줄과 사용자 지정 제목 표시줄이 모두 표시된 빈 WinUI Notes 앱 창입니다.

시스템 제목 표시줄 바꾸기를 완료하려면 약간의 코드를 작성해야 합니다.

  1. MainWindow.xaml.cs을(를) 여십시오. 다음 세 가지 방법으로 (또는 모든 XAML 파일)에 대한 MainWindow.xaml 코드 숨김을 열 수 있습니다.

    • MainWindow.xaml 파일이 열려 있고 편집 중인 현재 문서인 경우 F7 키를 누릅니다.
    • MainWindow.xaml 파일이 열려 있고 편집 중인 현재 문서인 경우 텍스트 편집기를 마우스 오른쪽 단추로 클릭하고 코드 보기를 선택합니다.
    • 솔루션 탐색기를 사용하여 항목을 확장하고 MainWindow.xaml 파일을 표시합니다MainWindow.xaml.cs. 파일을 두 번 클릭하여 엽니다.

  2. 생성 MainWindow자에서 다음을 호출한 후 이 코드를 추가합니다 InitializeComponent.

    public MainWindow()
{
    this.InitializeComponent();

    // ↓ Add this. ↓
    // Hide the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar.
    SetTitleBar(AppTitleBar);
    // ↑ Add this. ↑
}

    ExtendsContentIntoTitleBar 속성은 기본 시스템 제목 표시줄을 숨기고 앱 XAML을 해당 영역으로 확장합니다. SetTitleBar에 대한 호출은 지정AppTitleBar한 XAML 요소를 앱의 제목 표시줄로 처리하도록 시스템에 지시합니다.

  3. F5 키를 누르거나, 도구 모음에서 "시작" 디버그 단추를 클릭하거나, 시작디버깅 실행 메뉴를 선택하여 프로젝트를 빌드하고 >합니다.

지금 앱을 실행하면 운모 배경이 있는 빈 창과 시스템 제목 표시줄을 대체한 XAML 제목 표시줄이 표시됩니다.

제목 표시줄에 아이콘과 앱 이름이 있는 빈 WinUI Notes 앱 창입니다.

2단계 계속 - 메모 페이지 추가

  • Last updated on