Создание приложения Hello World с помощью C# и WinUI 3 / пакета SDK для приложений Windows

В этом руководстве мы будем использовать Visual Studio 2022 и WinUI 3 / пакет SDK для приложений Windows для создания классического приложения Windows, отображающего "Hello world!" при запуске:

Это практическое руководство предназначено для начинающих и не делает предположений о вашем опыте разработки классических приложений Windows.

Необходимые компоненты

В этом руководстве используется Visual Studio и используется пустой шаблон приложения WinUI 3. Чтобы настроить, следуйте инструкциям в статье "Начало работы с WinUI". Вы установите Visual Studio, настройте его для разработки приложений с помощью WinUI, создайте проект Hello World и убедитесь, что у вас установлена последняя версия WinUI.

Когда вы сделали это, вернитесь сюда, чтобы узнать больше о проекте Hello World и внести в него некоторые обновления.

Просмотр пустого проекта приложения

Шаблоны проектов WinUI в Visual Studio содержат все необходимое для сборки и запуска приложения. Шаблон пустого приложения создает окно с интерактивной кнопкой, которая выглядит так при запуске в режиме отладки.

Click Me Нажмите кнопку для демонстрации обработки событий:

В этом случае событие click элемента управления Button привязано к обработчику myButton_Click событий, расположенному вMainWindow.xaml.cs:

Хотя MainWindow.xaml.cs содержит бизнес-логику основного окна в виде файла программной части, ее презентационные проблемы живут вMainWindow.xaml:

Это разделение бизнес-логики и проблем презентации позволяет привязать данные и события к пользовательскому интерфейсу приложения и с помощью согласованного шаблона разработки приложений.

Структура файлов проекта

Давайте рассмотрим структуру файла проекта перед внесением изменений в код.

Структура файлов проекта в настоящее время выглядит следующим образом:

В этой таблице описываются файлы, начиная с верхнего и рабочего уровня:

Отображение "Hello world!"

Чтобы отобразить "Hello world!" вместо кнопки "Щелкните меня", перейдите к разделу MainWindow.xaml. Вы должны увидеть разметку StackPanel XAML элемента управления:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Давайте обновим StackPanel элемент управления для отображения Hello world! с красным текстом:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Если вы попытаетесь запустить приложение сейчас, Visual Studio вызовет ошибку по строкам The name 'myButton' does not exist in the current context. Это связано с тем, что мы обновили слой презентации с новым элементом управления, но мы не обновили бизнес-логику старого элемента управления в файле кода программной части.

Перейдите к MainWindow.xaml.cs обработчику событий и удалите его myButton_Click . Это можно сделать, так как мы заменили интерактивную Click me кнопку статическим Hello world! текстом. Бизнес-логика главного окна должна выглядеть следующим образом:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Если перезапустить приложение, появится красный цвет Hello world!:

Обновление строки заголовка приложения

Добавьте this.Title = "Hello world!"; в MainWindow.xaml.cs файл программной части:

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Если вы перезапустите приложение, теперь Hello world! вы увидите как текст, так и заголовок:

Поздравляем! Вы создали первый пакет SDK для приложений Windows или приложение WinUI 3.

Кратко

Вот что вы выполнили в этом руководстве:

1. Вы начали работу с шаблоном проекта Visual Studio.
2. Вы столкнулись с обработчиком событий, ограничивающимButton событие элемента управления Click обновлением пользовательского интерфейса.
3. Вы ознакомились с соглашением о разделинии проблем презентации от бизнес-логики с помощью тесно связанных файлов разметки XAML и файлов кода C# соответственно.
4. Вы рассмотрели структуру файла проекта WinUI 3 по умолчанию.
5. Вы изменили слой презентации (разметка XAML) и бизнес-логику (код отставание) для поддержки нового TextBlock элемента управления в пределах StackPanel.
6. Вы изучили справочные документы, чтобы лучше понятьStackPanel свойства элемента управления.
7. Вы обновили заголовок главного окна.

Полные файлы кода

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

Вопросы и ответы

Вопрос. Что означает "упакованое" значение?

Приложения Windows можно доставлять конечным пользователям с помощью различных форматов упаковки приложений. При работе с Пакетом SDK для приложений WinUI 3 или Windows упакованные приложения используют MSIX для упаковки приложения таким образом, чтобы обеспечить удобную установку и обновления для конечных пользователей. Ознакомьтесь с архитектурой развертывания и обзором приложений , зависящих от платформы, чтобы узнать больше.

Вопрос. Можно ли использовать VS Code для создания приложений WinUI 3?

Хотя технически возможно, настоятельно рекомендуется использовать Visual Studio 2019 /2022 для создания классических приложений с помощью пакета SDK для приложений WinUI 3 или Windows. Дополнительные сведения см . в разделе "Вопросы о разработчике Windows".

Вопрос. Можно ли использовать C++ для создания приложений WinUI 3?

Да! Дополнительные сведения см. в статье "Общие сведения о C++/WinRT".

Связанные

• Примеры приложений для разработки Windows
• Вопросы и ответы разработчика Windows
• Глоссарий разработчика Windows
• Рекомендации по разработке Windows