Benutzeroberflächenmigration (einschließlich WinUI 3)

In diesem Thema wird gezeigt, wie Sie Ihren Benutzeroberflächencode migrieren, einschließlich der Migration zur Windows UI Library (WinUI) 3.

Zusammenfassung der API- und/oder Funktionsunterschiede

Die Window.Current-Eigenschaft wird zu App.Window migriert. Die CoreDispatcher.RunAsync-Methode wird zu DispatcherQueue.TryEnqueue migriert.

Sie müssen das Handle ihres Fensters (HWND) für einen MessageDialog und für pickerfestlegen.

Um DataTransferManager-APIs verwenden zu können, müssen Sie sie Ihrem Fenster zuordnen.

Für ContentDialog und Popup müssen Sie deren XamlRoot-Eigenschaft festlegen.

Möglicherweise müssen Sie Ihr Visual State Manager- und Page.Resources-XAML-Markup umgestalten.

In der Windows App SDK, acrylBrush immer Beispiele aus dem App-Inhalt.

Ändern Sie Windows.UI.Xaml.Window.Current in App.Window

Dieser Abschnitt gilt, wenn Sie die Windows.UI.Xaml.Window.Current-Eigenschaft in Ihrer UWP-App verwenden. Diese Eigenschaft wird im Windows App SDK nicht unterstützt. Daher wird in diesem Abschnitt beschrieben, wie UWP-Code portiert wird, der Window.Current verwendet.

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

Ihre Windows App SDK-App kann ein eigenes Konzept eines aktuellen oder Standard Fensters hinzufügen, indem Sie eine öffentliche statische Eigenschaft für Ihre App-Klasse verwenden.

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

Anschließend können Sie innerhalb der App-Klasse selbst in einfach windowändernWindow.Current. Ändern Sie Window.Current außerhalb der App-Klasse wie folgt in App.Window:

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

Wenn Sie in Ihrer UWP-App bestimmte Typen aus den Namespaces Windows.UI.Popups oder Windows.Storage.Pickers verwenden, enthält dieser Abschnitt Informationen zur Migration dieses Codes. Die folgenden Codebeispiele verwenden MessageDialog, aber Sie können genau die gleichen Techniken auf die Anzeige einer Auswahl anwenden (z. B. ein FileOpenPicker, ein FileSavePicker oder ein FolderPicker).

Die Schritte, die Sie in einer Desktop-App ausführen müssen, werden unter Anzeigen von WinRT-UI-Objekten beschrieben, die von CoreWindow abhängen.

Hinweis

Für neue Apps wird empfohlen, das ContentDialog-Steuerelement anstelle von MessageDialog zu verwenden. Weitere Informationen finden Sie weiter unten im Abschnitt ContentDialog und Popup .

Im Folgenden finden Sie einige typische UWP-Code zum Anzeigen eines MessageDialog-Steuerelements.

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

Und hier ist der entsprechende Code in einer 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

Wenn Sie in Ihrer UWP-App die DataTransferManager.ShowShareUI-Methode aufrufen, enthält dieser Abschnitt Informationen zur Migration dieses Codes.

Im Folgenden finden Sie einige typische UWP-Code, der ShowShareUI aufruft.

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

Um DataTransferManager.ShowShareUI in Ihrer Windows App SDK-App zu verwenden, müssen Sie die Freigabebenutzeroberfläche Ihrem Fenster zuordnen. Und das muss manuell erfolgen. Weitere Informationen und Codebeispiele finden Sie unter Anzeigen von WinRT-UI-Objekten, die von CoreWindow abhängen.

ContentDialog und Popup

Wenn Sie in Ihrer UWP-App die Klassen Windows.UI.Xaml.Controls.ContentDialog oder Windows.UI.Xaml.Controls.Primitives.Popup verwenden, enthält dieser Abschnitt Informationen zum Migrieren dieses Codes. In den folgenden Codebeispielen wird ContentDialog verwendet, aber Sie können genau die gleichen Techniken auf die Anzeige eines Popup-Objekts anwenden.

Im Folgenden finden Sie einige typische UWP-Code zum Anzeigen eines ContentDialog-Steuerelements.

// 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 Ihrer Windows App SDK-App müssen Sie lediglich die XamlRoot-Eigenschaft des Dialogfelds festlegen. Gehen Sie dazu wie folgt vor:

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

Muss ich die Seitennavigation implementieren?

In einem UWP-Projekt gibt es standardmäßig Navigationscode in den Methoden der App-Klasse , auch wenn Ihre App einfach genug ist, dass sie nur über eine Seite verfügt.

Wenn Sie ein neues Windows App SDK-Projekt in Visual Studio erstellen, stellt Ihnen die Projektvorlage eine MainWindow-Klasse (vom Typ Microsoft.UI.Xaml.Window) aber keine Page-Klasse zur Verfügung. Darüber hinaus enthält die Projektvorlage keinen Navigationscode.

Für eine Windows App SDK-App, die einfach genug ist (eine Single-Page-App), können Sie sie möglicherweise vereinfachen. Möglicherweise müssen Sie keine Seiten oder Benutzersteuerelemente in Ihrem Windows App SDK-Projekt erstellen, sondern stattdessen das XAML-Markup und den CodeBehind dieser einzelnen Seite in MainWindow kopieren. Es gibt jedoch einige Dinge, die Von MainWindow nicht unterstützt werden. Fenster ist kein DependencyObject, sodass Funktionen wie Resources und DataContext nicht vorhanden sind. Auch Keine Ereignisse wie Load und Unload. Weitere Informationen und Problemumgehungen finden Sie unter Visual State Manager und Page.Resources.

Wenn Sie dagegen die Navigation zwischen Seiten in Ihrer Windows App SDK-App wünschen oder benötigen, können Sie dies tun, indem Sie die Methoden App.OnLaunched und App::OnNavigationFailed aus Ihrer UWP-App migrieren. Suchen Sie in App.OnLaunched den Navigationscode (der Code, der rootFrame erstellt und zur ersten Seite Ihrer App navigiert), und führen Sie ihn direkt zwischen den beiden vorhandenen Codezeilen zusammen (die Zeilen, die ein Fenster erstellen und dann aktivieren). Sie müssen auch den Code migrieren, den Sie kopiert und eingefügt haben. Ein einfaches Codebeispiel finden Sie unter Page-Klasse.

Visual State Manager und Page.Resources

Weitere Informationen finden Sie unter Muss ich die Seitennavigation implementieren?. Wenn Sie über eine UWP-App verfügen, die einfach genug ist, in der Sie Ihr XAML-Markup und CodeBehind in MainWindow kopieren können, sollten Sie diese Ausnahmen berücksichtigen.

Ihre MainWindow-Klasse (vom Typ Microsoft.UI.Xaml.Window) ist kein Steuerelement, daher unterstützt sie kein Visual State Manager-XAML-Markup und CodeBehind (siehe Tutorial: Erstellen adaptiver Layouts). Sie haben jedoch die folgenden beiden Optionen:

  • Fügen Sie dem Projekt ein UserControl-Element hinzu, und migrieren Sie Ihr Markup und CodeBehind zu diesem Element. Platzieren Sie dann eine instance dieses Benutzersteuerelements in MainWindow.
  • Fügen Sie dem Projekt ein Page-Element hinzu, und migrieren Sie Ihr Markup und CodeBehind zu diesem Element. Fügen Sie dann Code zur App-Klasse hinzu, um beim Start zu dieser Seite zu navigieren, wie unter Muss ich die Seitennavigation implementieren? beschrieben.

Darüber hinaus können Sie ein <Page.Resources> Element nicht nach MainWindow kopieren und es einfach in <Window.Resources>umbenennen. Übergeordnet wird stattdessen das Resources-Element unter dem Stammlayoutcontainer (z. B. ein Grid) im XAML-Markup für MainWindow. Das sieht wie folgt aus:

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

AcrylicBrush.BackgroundSource-Eigenschaft

Die AcrylicBrush.BackgroundSource-Eigenschaft ist in UWP vorhanden, aber nicht im Windows App SDK. In der Windows App SDK, acrylBrush immer Beispiele aus dem App-Inhalt.

Wenn Sie also im Quellcode Ihrer UWP-App (ob im XAML-Markup oder im imperativen Code) auf die AcrylicBrush.BackgroundSource-Eigenschaft zugreifen, entfernen Sie diesen Code, wenn Sie Ihre App zum Windows App SDK migrieren. Verwenden Sie stattdessen die DesktopAcrylicController-Klasse .