Delen via

Migratie van gebruikersinterface (inclusief WinUI 3)

  • Artikel

In dit onderwerp wordt beschreven hoe u uw gebruikersinterfacecode (UI) migreert, waaronder migreren naar WinUI 3.

Overzicht van verschillen tussen API's en/of functies

De eigenschap Window.Current wordt gemigreerd naar App.Window-. En de methode CoreDispatcher.RunAsync wordt gemigreerd naar DispatcherQueue.TryEnqueue.

U moet de ingang van het venster instellen (HWND-) op een MessageDialog-en op kiezers.

Als u DataTransferManager API's wilt gebruiken, moet u deze koppelen aan uw venster.

Voor ContentDialog- en pop-upmoet u de eigenschap XamlRoot instellen.

Mogelijk moet u Visual State Manager en Page.Resources XAML-opmaak herstructureren.

In de Windows App SDK AcrylicBrush samplet altijd van de app-inhoud.

Windows.UI.Xaml.Window.Current wijzigen in App.Window

Deze sectie is van toepassing als u de eigenschap Windows.UI.Xaml.Window.Current in uw UWP-app gebruikt. Deze eigenschap wordt niet ondersteund in de Windows App SDK, dus in deze sectie wordt beschreven hoe u UWP-code overpoort die gebruikmaakt van 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 };

Uw Windows App SDK-app kan een eigen concept van een huidigeof hoofdvenster toevoegen door gebruik te maken van een openbare statische eigenschap van uw App--klasse.

// 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 };
...

Vervolgens kunt u in de App-klasse zelf Window.Current wijzigen in window. Buiten de App--klasse, wijzig Window.Current in App.Window, zoals dit.

// 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 en selectietools

Als u in uw UWP-app bepaalde typen gebruikt uit de Windows.UI.Popups of Windows.Storage.Pickers naamruimten, bevat deze sectie informatie om u te helpen die code te migreren. In de onderstaande codevoorbeelden worden MessageDialog-gebruikt, maar u kunt precies dezelfde technieken toepassen om een kiezer weer te geven (bijvoorbeeld een FileOpenPicker, een FileSavePickerof een FolderPicker).

De stappen die u moet volgen in een bureaublad-app worden beschreven in De WinRT UI-objecten weergeven die afhankelijk zijn van CoreWindow.

Notitie

Voor nieuwe apps raden we aan het ContentDialog-besturingselement te gebruiken in plaats van het MessageDialog-besturingselement. Zie de sectie ContentDialog en pop-up hieronder voor meer informatie.

Hier is wat typische UWP-code om een MessageDialogweer te geven.

// 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();

En hier volgt de equivalente code in een Windows App SDK-app.

// 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

Als u in uw UWP-app de methode DataTransferManager.ShowShareUI aanroept, bevat deze sectie informatie waarmee u die code kunt migreren.

Hier volgt een aantal typische UWP-code die ShowShareUIaanroept.

// 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();

Als u DataTransferManager.ShowShareUI wilt gebruiken in uw Windows App SDK-app, moet u de Deelinterface koppelen aan uw venster. En dat moet handmatig gebeuren. Zie WinRT UI-objecten weergeven die afhankelijk zijn van CoreWindowvoor meer informatie en codevoorbeelden.

ContentDialog en Pop-up

Als u in uw UWP-app de Windows.UI.Xaml.Controls.ContentDialog- of Windows.UI.Xaml.Controls.Primitives.Popup klassen gebruikt, bevat deze sectie informatie waarmee u die code kunt migreren. In de onderstaande codevoorbeelden wordt ContentDialoggebruikt, maar u kunt precies dezelfde technieken toepassen om een pop-upobject weer te geven.

Hier is een typische UWP-code om een ContentDialogweer te geven.

// 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();

In uw Windows App SDK-app hoeft u alleen de eigenschap XamlRoot van het dialoogvenster in te stellen. Dit doet u als volgt.

// 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();

Moet ik paginanavigatie implementeren?

In een UWP-project is er standaard navigatiecode in de methoden van de App-klasse, zelfs als uw app eenvoudig genoeg is dat deze slechts één Pageheeft.

Wanneer u een nieuw Windows App SDK-project maakt in Visual Studio, biedt de projectsjabloon u een MainWindow--klasse (van het type Microsoft.UI.Xaml.Window), maar geen Pagina. En de projectsjabloon biedt geen navigatiecode.

Voor een Windows App SDK-app die eenvoudig genoeg is (een app met één pagina), kunt u deze mogelijk vereenvoudigen. Het kan zijn dat u geen pagina's of gebruikersbesturingselementen in uw Windows App SDK-project hoeft te maken, maar in plaats daarvan de XAML-markeringen en codeachter van die ene pagina naar MainWindow-te kopiëren. Er zijn echter enkele dingen die MainWindow- niet ondersteunt. Omdat Window geen DependencyObject is, bestaan mogelijkheden zoals Resources en DataContext er niet op. Evenmin worden gebeurtenissen zoals laden en uitladen. Zie Visual State Manager en Page.Resourcesvoor meer informatie en tijdelijke oplossingen.

Als u daarentegen navigatie tussen pagina's in uw Windows App SDK-app wilt of nodig hebt, kunt u dit doen door de App.OnLaunched- en App::OnNavigationFailed methoden te migreren vanuit uw UWP-app. Zoek in App.OnLaunchedde navigatiecode (de code die rootFramemaakt en navigeert naar de eerste pagina van uw app) en voeg deze samen tussen de twee bestaande coderegels (de regels die een venster maken en vervolgens activeren). U moet ook de code migreren die u hebt gekopieerd en geplakt. Zie Paginaklassevoor een eenvoudig codevoorbeeld.

Visual State Manager en Page.Resources

Zie ook Moet ik paginanavigatie implementeren?. Als u een UWP-app hebt die eenvoudig genoeg is, zodat u uw XAML markup en achterliggende code kunt kopiëren naar MainWindow, houd dan rekening met deze uitzonderingen.

Uw MainWindow-klasse (van het type Microsoft.UI.Xaml.Window) is geen controle, dus het ondersteunt Visual State Manager XAML-markup en code-behind niet (zie Zelfstudie: Adaptieve indelingen maken). U hebt echter deze twee opties:

  • Voeg een UserControl-item toe aan het project en migreer uw markeringen en code-behind naar dat item. Plaats vervolgens een exemplaar van dat gebruikersbeheer in MainWindow-.
  • Voeg een Page-item toe aan het project en migreer uw markup en code-behind daarnaar. Voeg vervolgens code toe aan uw App-klasse om tijdens het opstarten naar die Pagina- te gaan, zoals beschreven in Moet ik paginanavigatie implementeren?.

Bovendien kunt u een <Page.Resources> element niet kopiëren naar MainWindow- en de naam ervan wijzigen in <Window.Resources>. Plaats in plaats daarvan het ouder element Resources onder de root layout container (bijvoorbeeld een Grid) in de XAML-opmaak voor MainWindow. Dat ziet er als volgt uit:

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

AcrylicBrush.BackgroundSource eigenschap

De eigenschap AcrylBrush.BackgroundSource bestaat in UWP, maar niet in de Windows App SDK. In de Windows App SDK samplet de AcrylBrush altijd van de app-inhoud.

Dus als u toegang hebt tot de eigenschap AcrylBrush.BackgroundSource in de broncode van uw UWP-app (of dat nu in XAML-markeringen of imperatieve code staat), verwijdert u die code wanneer u uw app migreert naar de Windows App SDK. Gebruik in plaats daarvan de klasse DesktopAcrylicController.