Share via


Migração de interface do usuário (incluindo WinUI 3)

Este tópico mostra como migrar o código da interface do usuário, incluindo a migração para a WinUI (Biblioteca de Interface do Usuário do Windows) 3.

Resumo das diferenças de API e/ou recursos

A propriedade Window.Current migra para App.Window. E o método CoreDispatcher.RunAsync migra para DispatcherQueue.TryEnqueue.

Você precisa definir o identificador da janela (HWND) em um MessageDialog e no Pickers.

Para usar APIs DataTransferManager , você precisa associá-las à janela.

Para ContentDialog e Popup, você precisa definir sua propriedade XamlRoot .

Talvez seja necessário refatorar sua marcação XAML do Visual State Manager e page.Resources .

No SDK do Aplicativo Windows, o AcrylicBrush sempre é amostrado do conteúdo do aplicativo.

Alterar Windows.UI.Xaml.Window.Current para App.Window

Esta seção se aplica se você estiver usando a propriedade Windows.UI.Xaml.Window.Current em seu aplicativo UWP. Essa propriedade não tem suporte no SDK do Aplicativo Windows, portanto, esta seção descreve como portar o código UWP que usa Window.Current.

// MainPage.xaml.cs in a UWP app
var width = Window.Current.Bounds.Width;
// MainPage.xaml.cpp in a UWP app
auto width{ Window::Current().Bounds().Width };

Seu aplicativo SDK do Aplicativo Windows pode adicionar sua própria noção de uma janela atual ou main usando uma propriedade estática pública em sua classe App.

// App.xaml.cs in a Windows App SDK app
public partial class App : Application
{
    ...
    public static Window Window { get { return m_window; } }
    private static Window m_window;
}
// App.xaml.h in a Windows App SDK app
...
struct App : AppT<App>
{
    ...
    static winrt::Microsoft::UI::Xaml::Window Window(){ return window; };

private:
    static winrt::Microsoft::UI::Xaml::Window window;
};
...

// App.xaml.cpp
...
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };
...

Em seguida, dentro da própria classe App , você pode alterar Window.Current para simplesmente window. Fora da classe App , altere Window.Current para App.Window, desta forma:

// MainPage.xaml.cs in a UWP app
var width = App.Window.Bounds.Width;
// MainPage.xaml.cpp in a UWP app
#include <App.xaml.h>
auto width{ App::Window().Bounds().Width };

MessageDialog e Seletores

Em seu aplicativo UWP, se você usar determinados tipos dos namespaces Windows.UI.Popups ou Windows.Storage.Pickers , esta seção conterá informações para ajudá-lo a migrar esse código. Os exemplos de código abaixo usam MessageDialog, mas você pode aplicar exatamente as mesmas técnicas para exibir um seletor (por exemplo, um FileOpenPicker, um FileSavePicker ou um FolderPicker).

As etapas que você precisa seguir em um aplicativo da área de trabalho são descritas em Exibir objetos de interface do usuário do WinRT que dependem do CoreWindow.

Observação

Para novos aplicativos, recomendamos usar o controle ContentDialog em vez de MessageDialog. Para obter mais informações, consulte a seção ContentDialog e Pop-up abaixo.

Aqui está um código UWP típico para exibir um MessageDialog.

// In a UWP app
var showDialog = new Windows.UI.Popups.MessageDialog("Message here");
await showDialog.ShowAsync();
// In a UWP app
auto showDialog{ Windows::UI::Popups::MessageDialog(L"Message here") };
co_await showDialog.ShowAsync();

E aqui está o código equivalente em um aplicativo SDK do Aplicativo Windows.

// MainWindow.xaml.cs in a WinUI 3 app
var showDialog = new Windows.UI.Popups.MessageDialog("Message here");
WinRT.Interop.InitializeWithWindow.Initialize(showDialog,
    WinRT.Interop.WindowNative.GetWindowHandle(this));
await showDialog.ShowAsync();
// pch.h in a WinUI 3 app
...
#include <Shobjidl.h>
#include <microsoft.ui.xaml.window.h>
#include <winrt/Windows.UI.Popups.h>
...

// MainWindow.xaml.cpp
...
auto showDialog{ Windows::UI::Popups::MessageDialog(L"Message here") };

auto windowNative{ this->m_inner.as<::IWindowNative>() };
HWND hWnd{ 0 };
windowNative->get_WindowHandle(&hWnd);
showDialog.as<::IInitializeWithWindow>()->Initialize(hWnd);

co_await showDialog.ShowAsync();

DataTransferManager

Em seu aplicativo UWP, se você chamar o método DataTransferManager.ShowShareUI , esta seção conterá informações para ajudá-lo a migrar esse código.

Aqui está um código UWP típico que chama ShowShareUI.

// In a UWP app
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.GetForCurrentView();

dataTransferManager.DataRequested += (sender, args) =>
{
    args.Request.Data.Properties.Title = "In a UWP app...";
    args.Request.Data.SetText("...display the user interface for sharing content with another app.");
    args.Request.Data.RequestedOperation =
        Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
};

Windows.ApplicationModel.DataTransfer.DataTransferManager.ShowShareUI();
// In a UWP app
#include <winrt/Windows.ApplicationModel.DataTransfer.h>
...
auto dataTransferManager{ Windows::ApplicationModel::DataTransfer::DataTransferManager::GetForCurrentView() };

dataTransferManager.DataRequested([](Windows::ApplicationModel::DataTransfer::DataTransferManager const& /* sender */,
    Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs const& args)
    {
        args.Request().Data().Properties().Title(L"In a UWP app...");
        args.Request().Data().SetText(L"...display the user interface for sharing content with another app.");
        args.Request().Data().RequestedOperation(Windows::ApplicationModel::DataTransfer::DataPackageOperation::Copy);
    });

Windows::ApplicationModel::DataTransfer::DataTransferManager::ShowShareUI();

Para usar DataTransferManager.ShowShareUI em seu aplicativo SDK do Aplicativo Windows, você precisa associar a interface do usuário do Share à sua janela. E isso precisa ser feito manualmente. Para obter mais informações e exemplos de código, consulte Exibir objetos de interface do usuário do WinRT que dependem do CoreWindow.

ContentDialog e Pop-up

Se no aplicativo UWP você estiver usando as classes Windows.UI.Xaml.Controls.ContentDialog ou Windows.UI.Xaml.Controls.Primitives.Popup , esta seção conterá informações para ajudá-lo a migrar esse código. Os exemplos de código abaixo usam ContentDialog, mas você pode aplicar exatamente as mesmas técnicas para exibir um objeto Popup .

Aqui está um código UWP típico para exibir um ContentDialog.

// MainPage.xaml.cs in a UWP app
var unsupportedFilesDialog = new ContentDialog();
// Set Title, Content, etc.
await unsupportedFilesDialog.ShowAsync();
// MainPage.xaml.cpp in a UWP app
ContentDialog unsupportedFilesDialog{};
// Set Title, Content, etc.
co_await unsupportedFilesDialog.ShowAsync();

Em seu aplicativo SDK do Aplicativo Windows, você só precisa definir a propriedade XamlRoot da caixa de diálogo. Veja aqui como fazer isso.

// MainPage.xaml.cs in a Windows App SDK app
var unsupportedFilesDialog = new ContentDialog();
// Set Title, Content, etc.
unsupportedFilesDialog.XamlRoot = this.Content.XamlRoot;
await unsupportedFilesDialog.ShowAsync();
// MainPage.xaml.cpp in a Windows App SDK app
ContentDialog unsupportedFilesDialog{};
// Set Title, Content, etc.
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
co_await unsupportedFilesDialog.ShowAsync();

Preciso implementar a navegação de página?

Em um projeto UWP, por padrão, haverá código de navegação nos métodos da classe App , mesmo que seu aplicativo seja simples o suficiente para ter apenas uma Página.

Quando você cria um novo projeto SDK do Aplicativo Windows no Visual Studio, o modelo de projeto fornece uma classe MainWindow (do tipo Microsoft.UI.Xaml.Window), mas nenhuma Página. E o modelo de projeto não fornece nenhum código de navegação.

Para um aplicativo SDK do Aplicativo Windows simples o suficiente (um aplicativo de página única), você pode ser capaz de simpliá-lo. Pode ser que você não precise criar páginas ou controles de usuário em seu projeto SDK do Aplicativo Windows , mas, em vez disso, copie a marcação XAML e o code-behind dessa página única para MainWindow. No entanto, há algumas coisas que o MainWindow não dá suporte. Window não é um DependencyObject, portanto, recursos como Resources e DataContext não existem nele. Nem eventos como Carregar e Descarregar. Para obter mais informações e soluções alternativas, consulte Visual State Manager e Page.Resources.

Se, por outro lado, você quiser ou precisar de navegação entre páginas em seu aplicativo SDK do Aplicativo Windows, poderá fazer isso migrando os métodos App.OnLaunched e App::OnNavigationFailed do aplicativo UWP. Em App.OnLaunched, localize o código de navegação (o código que cria rootFrame e navegue até a primeira página do aplicativo) e mescle-o diretamente entre as duas linhas de código existentes (as linhas que criam uma janela e depois a ativam). Você também precisará migrar o código colado por cópia. Para obter um exemplo de código simples, consulte Classe de página.

Visual State Manager e Page.Resources

Consulte também Preciso implementar a navegação de página?. Se você tiver um aplicativo UWP que seja simples o suficiente para copiar sua marcação XAML e code-behind para MainWindow, tenha em mente essas exceções.

Sua classe MainWindow (do tipo Microsoft.UI.Xaml.Window) não é um controle, portanto, ela não dá suporte à marcação XAML do Visual State Manager e code-behind (consulte Tutorial: Criar layouts adaptáveis). No entanto, você tem essas duas opções:

  • Adicione um item UserControl ao projeto e migre sua marcação e code-behind para isso. Em seguida, coloque uma instância desse controle de usuário no MainWindow.
  • Adicione um item Page ao projeto e migre sua marcação e code-behind para isso. Em seguida, adicione código à classe App para navegar até essa Página na inicialização, conforme descrito em Preciso implementar a navegação de página?.

Além disso, você não poderá copiar um <Page.Resources> elemento para MainWindow e apenas renomeá-lo para <Window.Resources>. Em vez disso, pai do elemento Resources no contêiner de layout raiz (por exemplo, uma Grade) na marcação XAML para MainWindow. Isso terá esta aparência:

<Window ...>
    <Grid>
        <Grid.Resources>...</Grid.Resources>
        ...
    </Grid>
</Window>

Propriedade AcrylicBrush.BackgroundSource

A propriedade AcrylicBrush.BackgroundSource existe na UWP, mas não no SDK do Aplicativo Windows. No SDK do Aplicativo Windows, o AcrylicBrush sempre é amostrado do conteúdo do aplicativo.

Portanto, se você estiver acessando a propriedade AcrylicBrush.BackgroundSource no código-fonte do aplicativo UWP (seja na marcação XAML ou no código imperativo), remova esse código ao migrar seu aplicativo para o SDK do Aplicativo Windows. Em vez disso, use a classe DesktopAcrylicController .