Настройка проекта

Прежде чем приступить к написанию кода приложения, мы рассмотрим проект Visual Studio и позаботимся о настройке некоторых проектов. При создании проекта WinUI Visual Studio создаются несколько важных папок и файлов кода. Их можно увидеть в панели обозревателя решений Visual Studio:

Перечисленные здесь элементы — это те, с с которыми вы будете взаимодействовать в первую очередь. Эти файлы помогают настроить и запустить приложение WinUI. Каждый файл служит другой целью, описанной ниже:

• Папка ресурсов

  Эта папка содержит логотип приложения, изображения и другие ресурсы мультимедиа. Он поначалу заполняется временными файлами для логотипа вашего приложения. Этот логотип представляет приложение в меню "Пуск" 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) — это декларативный язык, который может инициализировать объекты и задать свойства объектов. Вы можете создать видимые элементы пользовательского интерфейса в декларативной разметке XAML. Затем можно связать отдельный файл кода для каждого ФАЙЛА XAML (обычно называемого файлом программной части ), который может реагировать на события и управлять объектами, которые изначально объявляются в XAML.

Обычно с любым XAML-файлом есть два файла: сам файл .xaml и соответствующий файл кода, который является дочерним элементом этого файла в обозревателе решений.

• Файл .xaml содержит разметку XAML, которая определяет пользовательский интерфейс приложения. Имя класса объявляется атрибутом x:Class .
• Файл кода содержит код, который вы создаете для взаимодействия с разметкой XAML, а также вызов метода InitializeComponent. Класс определяется как partial class.

При сборке проекта вызывается метод InitializeComponent, который анализирует файл .xaml и генерирует код, объединяемый с кодом partial class, чтобы создать полный класс.

Дополнительные сведения см. в документации:

• Общие сведения о XAML
• Частичные классы и методы (руководство по программированию на C#)
• Атрибут x:Class, директива x:Class

Обновление главного окна

Класс MainWindow , включенный в проект, является подклассом класса XAML Window , который используется для определения оболочки приложения. Окно приложения состоит из двух частей:

• Клиентская часть окна — это место, куда идет содержимое.
• Часть , не связанная с клиентом, является частью, управляемой операционной системой Windows. Она включает строку заголовка, в которой находятся элементы управления заголовками (кнопки Min/Max/Close), значок приложения, название и область перетаскивания. Он также включает рамку вокруг окна.

Чтобы сделать приложение WinUI Notes совместимым с рекомендациями Fluent Design, вам нужно внести несколько изменений в MainWindow. Во-первых, вы примените материал Мика в качестве фона окна. Мика — это непрозрачный, динамический материал, который включает темы и обои рабочего стола для оформления фона окна. Затем вы расширите содержимое приложения в область заголовков и замените системную строку заголовка элементом управления TitleBar XAML. Это позволяет лучше использовать пространство и обеспечивает больший контроль над дизайном, обеспечивая все функциональные возможности, необходимые для заголовка.

Вы также добавите кадр в качестве содержимого окна. Класс Frame работает с классом Page , чтобы позволить вам перемещаться между страницами содержимого в приложении. Вы добавите страницы на следующем шаге.

Подсказка

Вы можете скачать или просмотреть код для этого руководства из репозитория 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. При создании остального пользовательского интерфейса приложения мы подробно объясним основные понятия 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

Если вы запускаете приложение сейчас, вы увидите добавленный элемент XAML TitleBar , но он будет находиться под строкой заголовка системы, которая по-прежнему отображается.

Чтобы завершить замену строки заголовка системы, необходимо написать немного кода.

1. Откройте MainWindow.xaml.cs. Вы можете открыть код программной части ( MainWindow.xaml или любой 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 сообщает системе об обработке указанного вами элемента XAML (AppTitleBar) в качестве заголовка для приложения.

3. Создайте и запустите проект, нажав клавишу F5, нажав кнопку отладки "Пуск" на панели инструментов или выбрав меню Запустить>отладку.

Когда вы запускаете приложение, вы увидите пустое окно с фоном из материала Mica и строкой заголовка XAML, которая заменила системную строку заголовка.

Перейдите к шагу 2. Добавление страницы заметок