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

В этом разделе рассматривается пример использования приложения C# UWP PhotoLab и его переноса на платформу Windows App SDK.

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

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

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

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

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

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

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

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

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

1. В вашем целевом проекте в Visual Studio в окне Обозреватель решений щелкните правой кнопкой мыши на папке «Активы» и добавьте новую папку с именем Samples.

2. В клоне исходного проекта в Проводник найдите папку Windows-appsample-photo-lab>PhotoLab>Assets. В этой папке вы найдете семь файлов ресурсов, а также вложенную папку с названием Примеры, содержащую образцы изображений. Выберите эти семь файлов активов и вложенную папку "Примеры", и скопируйте их в буфер обмена.

3. Также в Проводнике найдите соответствующую папку в целевом проекте, который вы создали. Путь к этой папке — PhotoLabWinUI>PhotoLabWinUI>Assets. Вставьте в эту папку файлы ресурсов и вложенную папку, которую вы только что скопировали, и примите запрос на замену всех файлов, которые уже существуют в папке назначения.

4. В целевом проекте в Visual Studio, в Обозревателе решений, с развернутой папкой Assets, вы увидите в папке Samples содержимое вложенной папки Samples (которую вы только что вставили). Можно навести указатель мыши на файлы ресурсов. Эскизы миниатюр будут отображаться для каждого, чтобы подтвердить, что вы правильно заменили или добавили файлы ресурсов.

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

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

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

1. В вашем клоне исходного проекта в Проводнике найдите папку Windows-appsample-photo-lab>PhotoLab. В этой папке вы найдете файл ImageFileInfo.csисходного кода; этот файл содержит реализацию ImageFileInfo. Выберите этот файл и скопируйте его в буфер обмена.

2. В Visual Studio щелкните правой кнопкой мыши узел целевого проекта и выберите Открыть папку в Проводнике. Откроется целевая папка проекта в программе Проводник. Вставьте в эту папку только что скопированный файл.

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

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

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

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

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

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

1. В исходном проекте в элементе <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>

2. В целевом проекте приложение сохраняет объект главного окна в своем частном поле 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; }
}

3. Далее в процессе миграции (при переносе кода, который отображает 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 щелкните Инструменты>Диспетчер пакетов NuGet>Управление пакетами NuGet для решения...>Обзор, и введите или вставьте Microsoft.Graphics.Win2D. Выберите правильный элемент в результатах поиска, проверьте проект PhotoLabWinUI и нажмите кнопку "Установить ", чтобы установить пакет в этом проекте.

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

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

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

1. Выполните указанные ниже действия по поиску и замене (регистр совпадения и целое слово) в 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")

2. Убедитесь, что вы можете построить требуемое решение, но пока не запускайте.

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

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

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

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

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

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

• PhotoLab =>PhotoLabWinUI

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

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

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

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

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

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

5. На этом шаге мы внесём изменения, описанные в 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

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

• PhotoLab =>PhotoLabWinUI

2. Все еще в MainPage.xaml, найдите разметку animations:ReorderGridAnimation.Duration="400" и удалите ее.

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

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

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

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

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

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

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

6. Убедитесь, что вы можете собрать решение (но пока не запускайте).

Перейдите к MainPage

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

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

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

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

2. В MainWindow.xaml.cs удалите метод myButton_Click.

3. Находясь в MainWindow.xaml.cs, добавьте следующую строку кода в конструктор.

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

4. Убедитесь, что вы можете создать целевое решение (но пока не запускайте его).

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

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

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

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

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

3. Оставаясь в DetailPage.xaml.cs, добавьте следующий обработчик событий.

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

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

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

См. также

• Пакет SDK для приложений Windows и поддерживаемые выпуски Windows