Перенос пакета SDK приложений Windows для примера приложения UWP PhotoLab (C#)

Статья
12/23/2023

В этом разделе описано, как взять пример приложения UWP и перенести его в пакет SDK для приложений Windows.

Начните с клонирования репозитория примера приложения UWP и открытия решения в Visual Studio.

Важно!

Рекомендации и стратегии для подхода к процессу миграции и настройке среды разработки для миграции см. в статье "Общая стратегия миграции". Особенно важно увидеть , что поддерживается при переносе из UWP в WinUI 3 , чтобы убедиться, что все необходимые функции поддерживаются перед попыткой миграции.

Установка инструментов для Windows App SDK

Чтобы настроить среду разработки на компьютере, выполните инструкции из статьи Установка средств для пакета SDK для приложений Windows.

Важно!

Среди разделов с заметками о выпуске вы найдете раздел Каналы выпуска Windows App SDK. В нем представлены заметки о выпуске для каждого канала. Не забудьте проверка любые ограничения и известные проблемы в этих заметках о выпуске, так как они могут повлиять на результаты выполнения вместе с этим примером и /или запуск перенесенного приложения.

Создание нового проекта

В Visual Studio создайте проект C# на основе шаблона проекта Blank App, Packaged (WinUI 3 in Desktop) (Пустое упакованное приложение (WinUI 3 в классических приложениях)). Назовите проект PhotoLabWinUI, un проверка Разместить решение и проект в том же каталоге. В качестве целевой версии вы можете выбрать последний выпуск (не предварительную версию) операционной системы клиента.

Примечание.

Мы будем ссылаться на версию примера проекта UWP (клонированную из репозитория) в качестве исходного решения или проекта. Мы будем называть версию пакета SDK для приложений Windows в качестве целевого решения или проекта.

Порядок переноса кода

MainPage — это важная и видная часть приложения. Но если бы мы начали переносить это, то мы скоро понимаем, что MainPage имеет зависимость от представления DetailPage, а затем, что DetailPage имеет зависимость от модели ImageFileInfo. Поэтому для этого пошагового руководства мы рассмотрим этот подход.

Начнем с копирования файлов ресурсов.
Затем мы переносим модель ImageFileInfo .
Далее мы переносим класс App (так как это требует внесения изменений в него, что DetailPage, MainPage и LoadedImageBrush будут зависеть).
Затем мы переносим класс LoadedImageBrush .
Затем сначала мы начнем перенос представлений, начиная с DetailPage .
И мы завершим работу, переносив представление MainPage .

Копирование файлов ресурсов

В целевом проекте в Visual Studio в Обозреватель решений щелкните правой кнопкой мыши папку "Активы" и добавьте новую папку с именем Samples.
В клоне исходного проекта в проводник найдите папку Windows-appsample-photo-lab>PhotoLab>Assets. В этой папке вы найдете семь файлов ресурсов, а также вложенную папку с именем Примеры, содержащие образы примеров. Выберите эти семь файлов активов и вложенную папку "Примеры" и скопируйте их в буфер обмена.
Кроме того, в проводник теперь найдите соответствующую папку в созданном целевом проекте. Путь к этой папке — PhotoLabWinUI>PhotoLabWinUI>Assets. Вставьте в эту папку файлы активов и вложенную папку, которую вы только что скопировали, и примите запрос на замена всех файлов, которые уже существуют в назначении.
В целевом проекте в Visual Studio в Обозреватель решений с развернутой папкой "Активы" вы увидите в папке "Примеры" содержимое вложенной папки "Примеры" (которую вы только что вставили). Указатель мыши можно наведите указатель мыши на файлы ресурсов. Предварительный просмотр эскизов будет отображаться для каждого, убедившись, что вы правильно заменили или добавили файлы активов.

Перенос модели ImageFileInfo

ImageFileInfo — это модель (в смысле моделей, представлений и моделей представления), представляющая файл изображения, например фотографию.

Копирование файлов исходного кода ImageFileInfo

В клоне исходного проекта в проводник найдите папку Windows-appsample-photo-lab>PhotoLab. В этой папке вы найдете файл ImageFileInfo.csисходного кода; этот файл содержит реализацию ImageFileInfo. Выберите этот файл и скопируйте его в буфер обмена.
В Visual Studio щелкните правой кнопкой мыши узел целевого проекта и щелкните "Открыть папку" в проводник. Откроется целевая папка проекта в проводник. Вставьте в эту папку только что скопированный файл.

Перенос исходного кода ImageFileInfo

Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в ImageFileInfo.cs файле, который вы только что вставили.

namespace PhotoLab =>namespace PhotoLabWinUI
Windows.UI.Xaml =>Microsoft.UI.Xaml

Windows.UI.Xaml — это пространство имен для XAML UWP; Microsoft.UI.Xaml — это пространство имен для Xaml WinUI.

Примечание.

Api-интерфейсы UWP сопоставления с разделом пакета SDK для приложений Windows предоставляют сопоставление API UWP с эквивалентами пакета SDK для приложений Windows. Приведенное выше изменение является примером изменения имени пространства имен, необходимого во время процесса миграции.

Теперь убедитесь, что вы можете создать целевое решение (но еще не запущено).

Перенос класса App

В исходном проекте в элементе <Application.Resources>App.xamlнайдите следующие четыре строки. Скопируйте их и вставьте их в целевой проект.

<SolidColorBrush x:Key="RatingControlSelectedForeground" Color="White"/>
<!--  Window width adaptive breakpoints.  -->
<x:Double x:Key="MinWindowBreakpoint">0</x:Double>
<x:Double x:Key="MediumWindowBreakpoint">641</x:Double>
<x:Double x:Key="LargeWindowBreakpoint">1008</x:Double>

Примечание.

Так как целевой проект будет использовать различные (и проще) навигации из исходного проекта, вам не нужно копировать любой дополнительный код из исходного проекта App.xaml.cs.

В целевом проекте приложение сохраняет объект главного окна в своем частном поле m_window. Далее в процессе миграции (при переносе использования исходного проекта Window.Current) это удобно, если это частное поле является общедоступным статическим свойством. Поэтому замените поле m_window свойством Window и измените ссылки на m_window, как показано ниже.

// App.xaml.cs
public partial class App : Application
{
    ...
    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
    {
        Window = new MainWindow();
        Window.Activate();
    }

    public static MainWindow Window { get; private set; }
}

Далее в процессе миграции (при переносе кода, отображающего FileSavePicker), приложение будет удобно, если приложение предоставляет дескриптор главного окна (HWND). Поэтому добавьте свойство WindowHandle и инициализировать его в методе OnLaunched , как показано ниже.

// App.xaml.cs
public partial class App : Application
{
    ...
    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
    {
        Window = new MainWindow();
        Window.Activate();
        WindowHandle = WinRT.Interop.WindowNative.GetWindowHandle(Window);
    }

    public static IntPtr WindowHandle { get; private set; }
}

Перенос модели LoadedImageBrush

LoadedImageBrush — это специализация XamlCompositionBrushBase. Пример приложения PhotoLab использует класс LoadedImageBrush для применения эффектов к фотографиям.

Ссылка на пакет NuGet Win2D

Для поддержки кода в LoadedImageBrush исходный проект имеет зависимость от Win2D. Поэтому нам также потребуется зависимость от Win2D в целевом проекте.

В целевом решении в Visual Studio щелкните Tools>NuGet диспетчер пакетов> Manage NuGet Packages for Solution...>Просмотрите и введите или вставьте Microsoft.Graphics.Win2D. Выберите правильный элемент в результатах поиска, проверка проект PhotoLabWinUI и нажмите кнопку "Установить", чтобы установить пакет в этот проект.

Копирование файлов исходного кода LoadedImageBrush

Скопируйте LoadedImageBrush.cs из исходного проекта в целевой проект так же, как вы скопировали ImageFileInfo.cs.

Перенос исходного кода LoadedImageBrush

Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в LoadedImageBrush.cs файле, который вы только что вставили.

namespace PhotoLab =>namespace PhotoLabWinUI
Windows.UI.Composition =>Microsoft.UI.Composition
Windows.UI.Xaml =>Microsoft.UI.Xaml
Window.Current.Compositor =>App.Window.Compositor (см. раздел "Изменение Windows.UI.Xaml.Window.Current на App.Window")

Убедитесь, что вы можете создать целевое решение (но еще не выполняется).

Перенос представления DetailPage

DetailPage — это класс, представляющий страницу редактора фотографий, где эффекты Win2D переключаются, задаются и объединяются. Перейдите на страницу редактора фотографий, выбрав эскиз фотографии в MainPage. DetailPage — это модель (в смысле моделей, представлений и моделей представления).

Копирование файлов исходного кода DetailPage

Скопируйте DetailPage.xaml и DetailPage.xaml.cs из исходного проекта в целевой проект так же, как скопировали файлы на предыдущих шагах.

Перенос исходного кода DetailPage

Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в DetailPage.xaml файле, который вы только что вставили.

PhotoLab =>PhotoLabWinUI

Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в DetailPage.xaml.cs файле, который вы только что вставили.

namespace PhotoLab =>namespace PhotoLabWinUI
Windows.UI.Colors =>Microsoft.UI.Colors
Windows.UI.Xaml =>Microsoft.UI.Xaml

На следующем шаге мы добавим изменения, описанные в ContentDialog и всплывающем меню. Таким образом, добавьте этот код непосредственно перед строкой ContentDialogResult result = await saveDialog.ShowAsync();в DetailPage.xaml.csметоде ShowSaveDialog.

if (Windows.Foundation.Metadata.ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))
{
    saveDialog.XamlRoot = this.Content.XamlRoot;
}

Тем не менее в DetailPage.xaml.csметоде OnNavigatedTo удалите следующие две строки кода. Только эти две строки; позже в этом примере мы повторно добавим функции кнопки назад, которую мы только что удалили.

...
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
    AppViewBackButtonVisibility.Visible;
...
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
    AppViewBackButtonVisibility.Collapsed;
...

На этом шаге мы добавим изменения, описанные в MessageDialog и средства выбора. Тем не менее в DetailPage.xaml.csметоде ExportImage непосредственно перед строкой var outputFile = await fileSavePicker.PickSaveFileAsync();добавьте эту строку кода.

WinRT.Interop.InitializeWithWindow.Initialize(fileSavePicker, App.WindowHandle);

MainPage имеет зависимости от DetailPage, поэтому сначала мы переносили DetailPage. Но DetailPage также имеет зависимости от MainPage, поэтому мы еще не сможем построить.

Перенос представления MainPage

Главная страница приложения представляет представление, которое вы увидите сначала при запуске приложения. Это страница, которая загружает фотографии из папки "Примеры ", встроенной в пример приложения, и отображает представление эскизов с плитками.

Копирование файлов исходного кода MainPage

Скопируйте MainPage.xaml и MainPage.xaml.cs из исходного проекта в целевой проект так же, как скопировали файлы на предыдущих шагах.

Перенос исходного кода MainPage

Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в MainPage.xaml файле, который вы только что вставили.

PhotoLab =>PhotoLabWinUI

Тем не менее, MainPage.xamlнайдите разметку animations:ReorderGridAnimation.Duration="400"и удалите это.
Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в MainPage.xaml.cs файле, который вы только что вставили.

namespace PhotoLab =>namespace PhotoLabWinUI
Windows.UI.Xaml =>Microsoft.UI.Xaml

На этом шаге мы добавим изменения, описанные в ContentDialog и Всплывающем меню. Таким образом, добавьте этот код непосредственно перед строкой ContentDialogResult resultNotUsed = await unsupportedFilesDialog.ShowAsync();в MainPage.xaml.csметоде GetItemsAsync.

if (Windows.Foundation.Metadata.ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))
{
    unsupportedFilesDialog.XamlRoot = this.Content.XamlRoot;
}

Тем не менее в MainPage.xaml.csметоде OnNavigatedTo удалите следующую строку кода.

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
    AppViewBackButtonVisibility.Collapsed;

Далее в этом примере мы повторно добавим функции кнопки "Назад", которую мы только что удалили.

Убедитесь, что вы можете создать целевое решение (но еще не выполняется).

Перейдите к MainPage

Пример приложения PhotoLab использует логику навигации для перехода в MainPage (а затем между MainPage и DetailPage). Дополнительные сведения о приложениях пакета SDK для приложений Для Приложений Windows, которым требуется навигация (и тех, которые нет), см. в статье "Необходимо ли реализовать навигацию по страницам?".

Таким образом, изменения, которые мы создадим следующую поддержку этой навигации.

<StackPanel> Удалите MainWindow.xamlэлемент и замените его только именованным <Frame> элементом. Результат выглядит следующим образом.

<Window ...>
    <Frame x:Name="rootFrame"/>
</Window>

Удалите MainWindow.xaml.csметод myButton_Click.
MainWindow.xaml.csТем не менее добавьте следующую строку кода в конструктор.

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        rootFrame.Navigate(typeof(MainPage));
    }
}

Убедитесь, что вы можете создать целевое решение (но еще не выполняется).

Восстановление функциональных возможностей кнопки "Назад"

В DetailPage.xamlкорневом элементе является RelativePanel. Добавьте следующую разметку внутри этого элемента RelativePanel сразу после элемента StackPanel .

<AppBarButton x:Name="BackButton" Click="BackButton_Click" Margin="0,0,12,0">
    <SymbolIcon Symbol="Back"/>
</AppBarButton>

В DetailPage.xaml.csполе /> добавьте следующие две строки кода в метод OnNavigatedTo в указанном месте.

if (this.Frame.CanGoBack)
{
    BackButton.Visibility = Microsoft.UI.Xaml.Visibility.Visible;
}
else
{
    BackButton.Visibility = Microsoft.UI.Xaml.Visibility.Collapsed;
}

DetailPage.xaml.csТем не менее добавьте следующий обработчик событий.

private void BackButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    Frame.GoBack();
}

Тестирование перенесенного приложения

Теперь создайте проект и запустите приложение для его тестирования. Выберите изображение, задайте уровень масштабирования, выберите эффекты и настройте их.

Share via

Перенос пакета SDK приложений Windows для примера приложения UWP PhotoLab (C#)

Установка инструментов для Windows App SDK

Создание нового проекта

Порядок переноса кода

Копирование файлов ресурсов

Перенос модели ImageFileInfo

Копирование файлов исходного кода ImageFileInfo

Перенос исходного кода ImageFileInfo

Перенос класса App

Перенос модели LoadedImageBrush

Ссылка на пакет NuGet Win2D

Копирование файлов исходного кода LoadedImageBrush

Перенос исходного кода LoadedImageBrush

Перенос представления DetailPage

Копирование файлов исходного кода DetailPage

Перенос исходного кода DetailPage

Перенос представления MainPage

Копирование файлов исходного кода MainPage

Перенос исходного кода MainPage

Перейдите к MainPage

Восстановление функциональных возможностей кнопки "Назад"

Тестирование перенесенного приложения

Обратная связь

Дополнительные ресурсы