Миграция примера приложения UWP PhotoLab (C#) на Windows App SDK

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

Начните с того, чтобы клонировать репозиторий образца приложения UWP и открыть решение в Visual Studio.

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

Сведения о настройке компьютера разработки см. в статье Install tools for the Windows App SDK.

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

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

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

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

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

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

1. В целевом project в Visual Studio в папке Solution Explorer щелкните правой кнопкой мыши папку Assets и добавьте новую папку с именем Samples.

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

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

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

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

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

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

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

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

Перенос исходного кода 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. В целевом проекте App сохраняет основной объект окна в своем закрытом поле 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), было бы удобно, если приложение App предоставляет дескриптор главного окна handle (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 Package Manager>Manage NuGet Packages for Solution... >Browse и введите или вставьте Microsoft.Graphics.Win2D. Выберите правильный элемент в результатах поиска, проверьте PhotoLabWinUI project и щелкните Install, чтобы установить пакет в этот project.

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

Скопируйте LoadedImageBrush.cs из исходного project в целевой project так же, как вы скопировали 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 из исходного project в целевой project таким же образом, как вы скопировали файлы на предыдущих шагах.

Перенос исходного кода 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. Добавьте этот код непосредственно перед строкой 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 и Pickers. Тем не менее в 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 из исходного project в целевой project таким же образом, как вы скопировали файлы на предыдущих шагах.

Перенос исходного кода 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 и Popup. Таким образом, все еще в 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();
}

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

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

См. также

• Windows App SDK и поддерживаемые выпуски Windows