Dela via

Använd XAML-öar för att integrera en UWP XAML-kontroll i en C# WPF-app

Viktigt!

Det här avsnittet använder eller nämner typer från CommunityToolkit/Microsoft.Toolkit.Win32 GitHub-lagringsplats. Viktig information om stöd för XAML Islands finns i XAML Islands-meddelande i den lagringsplatsen.

Det här avsnittet visar hur du skapar en WPF-app (C# Windows Presentation Foundation) (riktad mot .NET Core 3.1) som använder XAML-öar som värd för en XAML-kontroll (Universal Windows Platform) (UWP) (dvs. en förstapartskontroll som tillhandahålls av Windows SDK). Vi visar hur du gör det på två sätt:

  • Vi visar hur man kan hålla i UWP InkCanvas och InkToolbar kontroller genom att använda omslutna kontroller (finns i Windows Community Toolkit). Kontroller som är inslagna inkapslar gränssnittet och funktionaliteten i en liten uppsättning användbara UWP XAML-kontroller. Du kan lägga till en omsluten kontroll direkt på designytan för ditt WPF- eller Windows Forms-projekt och sedan använda den i designern som alla andra WPF- eller Windows Forms-kontroller.

  • Vi visar också hur du kan värd för en UWP-CalendarView--kontroll med hjälp av WindowsXamlHost--kontrollen (finns i Windows Community Toolkit). Eftersom endast en liten uppsättning UWP XAML-kontroller är tillgängliga som omslutna kontroller kan du använda WindowsXamlHost som värd för alla UWP XAML-kontroller.

Processen för att vara värd för en UWP XAML-kontroll i en WPF-app liknar en Windows Forms-app.

Viktigt!

Användning av XAML-öar (omslutna kontroller eller WindowsXamlHost) som värd för UWP XAML-kontroller stöds endast i appar som är avsedda för .NET Core 3.x. XAML Islands stöds inte i appar som riktar sig mot .NET eller i appar som riktar sig mot någon version av .NET Framework.

För att vara värd för en UWP XAML-kontroll i en WPF- eller Windows Forms-app rekommenderar vi att du har följande komponenter i lösningen. Det här avsnittet innehåller instruktioner för hur du skapar var och en av dessa komponenter:

  • Projektet och källkoden för din WPF- eller Windows Forms-app.

  • Ett UWP-projekt som definierar en rotprogramklass som härleds från XamlApplication. Klassen Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication är tillgänglig i Windows Community Toolkit). Vi rekommenderar att du definierar din XamlApplicationhärledda Application klass i ett separat UWP-appprojekt som är en del av din WPF eller Windows Forms Visual Studio-lösning.

    Anmärkning

    Att göra ett XamlApplication--härlett objekt tillgängligt för ditt WPF- eller Windows Forms-projekt krävs faktiskt inte för att vara värd för en UWP XAML-kontroll från första part. Men det är nödvändigt för att identifiera, läsa in och vara värd för anpassade UWP XAML-kontroller. För att stödja alla XAML Island-scenarier rekommenderar vi därför att du alltid definierar ett XamlApplication-härlett objekt i alla lösningar där du använder XAML-öar.

    Anmärkning

    Din lösning kan bara innehålla ett projekt som definierar ett XamlApplication-härlett objekt. Det projektet måste referera till andra bibliotek och projekt som har UWP XAML-kontroller via XAML-öar.

Skapa ett WPF-projekt

Du kan följa de här anvisningarna för att skapa ett nytt WPF-projekt och konfigurera det som värd för XAML-öar. Om du har ett befintligt WPF-projekt kan du anpassa de här stegen och kodexemplen för projektet.

  1. Om du inte redan har gjort det installerar du den senaste versionen av .NET Core 3.1.

  2. I Visual Studio skapar du ett nytt C#-projekt från WPF-programprojektmallen . Ange projektnamnet till MyWPFApp så att du inte behöver redigera något av stegen eller källkoden i detta ämne. Ange Framework till .NET Core 3.1* och klicka på Skapa.

Viktigt!

Se till att du inte använder PROJEKTmallen WPF App (.NET Framework).

Konfigurera DITT WPF-projekt

  1. De här stegen aktiverar paketreferenser:

    1. I Visual Studio klickar du på Tools>NuGet Package Manager>Package Manager Settings.
    2. Till höger hittar du inställningen Pakethantering>standardpakethanteringsformat och ställer in den på PackageReference.

  2. Använd de här stegen för att installera NuGet-paketet Microsoft.Toolkit.Wpf.UI.Controls :

    1. Högerklicka på projektnoden MyWPFApp i Solution Explorer och välj Hantera NuGet-paket....

    2. På fliken Bläddra skriver eller klistrar du in Microsoft.Toolkit.Wpf.UI.Controls i sökrutan. Välj den senaste stabila versionen och klicka på Installera. Paketet innehåller allt du behöver för att använda de omslutna UWP XAML-kontrollerna för WPF (inklusive InkCanvas, InkToolbar och WindowsXamlHost-kontrollen ).

    Anmärkning

    För en Windows Forms-app refererar du till paketet Microsoft.Toolkit.Forms.UI.Controls i stället.

  3. De flesta XAML Islands-scenarier stöds inte i projekt som är inriktade på Alla CPU. Så om du vill rikta in dig på en specifik arkitektur (till exempel x86 eller x64) gör du följande:

    1. Högerklicka på lösningsnoden (inte projektnoden) i Solution Explorer och välj Egenskaper.
    2. Välj Konfigurationsegenskaper till vänster.
    3. Klicka på knappen Configuration Manager... (Konfigurationshanteraren... ).
    4. Under Aktiv lösningsplattform väljer du Ny.
    5. I dialogrutan Ny lösningsplattform väljer du x64 eller x86 och trycker på OK.
    6. Stäng de öppna dialogrutorna.

Definiera en XamlApplication-klass i ett nytt UWP-projekt

I det här avsnittet ska vi lägga till ett UWP-projekt i lösningen och se över standardklassen App i projektet som ska härledas från klassen Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication som tillhandahålls av Windows Community Toolkit. Den klassen stöder gränssnittet IXamlMetadataProvider , som gör det möjligt för din app att identifiera och läsa in metadata för anpassade UWP XAML-kontroller i sammansättningar i den aktuella katalogen för ditt program vid körning. Den klassen initierar även UWP XAML-ramverket för den aktuella tråden.

  1. Högerklicka på lösningsnoden i Solution Explorer och välj Lägg till>nytt projekt....

  2. Välj projektmallen C# Blank App (Universal Windows). Ange Projektnamn till MyUWPApp så att du inte behöver redigera något av stegen eller källkoden i det här avsnittet. Ange Målversion och Lägsta version till antingen Windows 10, version 1903 (version 18362) eller senare.

    Anmärkning

    Se till att du inte skapar MyUWPApp i en undermapp i MyWPFApp. Om du gör det kommer MyWPFApp att försöka skapa UWP XAML-markering som om det vore WPF XAML.

  3. Installera Microsoft.Toolkit.Win32.UI.XamlApplication NuGet-paketet (senaste stabila versionen) i MyUWPApp. Processen för att installera ett NuGet-paket beskrevs i föregående avsnitt.

  4. Öppna filen i App.xaml och ersätt dess innehåll med följande XAML:

    <xaml:XamlApplication
    x:Class="MyUWPApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost"
    xmlns:local="using:MyUWPApp">
</xaml:XamlApplication>

  5. På samma sätt öppnar App.xaml.csdu och ersätter innehållet med följande kod:

    namespace MyUWPApp
{
    public sealed partial class App : Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication
    {
        public App()
        {
            this.Initialize();
        }
    }
}

  6. Ta bort filen MainPage.xaml och filen MainPage.xaml.cs.

  7. Skapa Projektet MyUWPApp .

I MyWPFApp lägger du till en referens till Projektet MyUWPApp

  1. Ange den kompatibla ramverksversionen i MyWPFApps projektfil så här:

    1. I Solution Explorer klickar du på projektnoden MyWPFApp för att öppna projektfilen i redigeraren.

    2. Lägg till följande underordnade element i det första PropertyGroup--elementet. Ändra den 19041 delen av värdet efter behov för att matcha målet och den lägsta operativsystemversionen av projektet MyWPFApp.

      <AssetTargetFallback>uap10.0.19041</AssetTargetFallback>

  2. I Solution Explorer högerklickar du på MyWPFApp-beroenden>, väljer Lägg till projektreferens... och lägger till en referens till Projektet MyUWPApp.

Instansiera XamlApplication-objektet i startpunkten för MyWPFApp

Lägg sedan till kod i startpunkten för MyWPFApp för att skapa en instans av appklassen som du precis definierade i MyUWPApp (klassen som härleds från XamlApplication).

  1. Högerklicka på projektnoden MyWPFApp , välj Lägg till>nytt objekt... och välj sedan Klass. Ange Namn till Program.cs och klicka på Lägg till.

  2. Ersätt innehållet i Program.cs med följande XAML (och spara sedan filen och skapa MyWPFApp-projektet ):

    namespace MyWPFApp
{
    public class Program
    {
        [System.STAThreadAttribute()]
        public static void Main()
        {
            using (new MyUWPApp.App())
            {
                var app = new MyWPFApp.App();
                app.InitializeComponent();
                app.Run();
            }
        }
    }
}

  3. Högerklicka på projektnoden MyWPFApp och välj Egenskaper.

  4. I Program>allmänt klickar du på listrutan Startobjekt och väljer MyWPFApp.Program (som är det fullständigt kvalificerade namnet på den programklass som du nyss lade till). Om du inte ser det kan du försöka stänga och öppna Visual Studio igen.

    Anmärkning

    Som standard definierar ett WPF-projekt en main entry point-funktion i en genererad kodfil som inte är avsedd att ändras. Steget ovan ändrar startpunkten för projektet till main-metoden för den nya programklassen , vilket gör att du kan lägga till kod som körs så tidigt som möjligt i startprocessen för appen.

  5. Spara ändringarna i projektegenskaperna.

Använd omslutna kontroller som värd för en InkCanvas och InkToolbar

Nu när du har konfigurerat projektet att använda UWP XAML Islands är du redo att lägga till InkCanvas - och InkToolbar-omslutna UWP XAML-kontroller i appen.

  1. I MyWPFApp, öppna filen MainWindow.xaml.

  2. Lägg till följande attribut i elementet Window längst upp i XAML-filen. Det här attributet refererar till XAML-namnområdet för de omslutna UWP XAML-kontrollerna InkCanvas och InkToolbar och mappar det till XML-namnområdet för -kontrollerna.

    xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"

  3. MainWindow.xamlRedigera fortfarande det befintliga Grid-elementet så att det ser ut som XAML nedan. Denna XAML lägger till en InkCanvas och en InkToolbar-kontroll i rutnätet (prefixet av kontroller XML-namnområde som du definierade i föregående steg).

    <Grid Margin="10,50,10,10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <controls:InkToolbar x:Name="myInkToolbar" TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" Width="300"
        Height="50" Margin="10,10,10,10" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" HorizontalAlignment="Left" Width="600" Height="400"
        Margin="10,10,10,10" VerticalAlignment="Top" />
</Grid>

    Anmärkning

    Du kan också lägga till dessa och andra inbäddade kontroller i -fönstret genom att dra dem till designvyn från avsnittet Windows Community Toolkit i verktygslådan .

  4. Spara MainWindow.xaml.

    Om du har en enhet som stöder en digital penna (till exempel en Surface) och du följer med på en fysisk dator kan du nu skapa och köra appen och rita digital pennanteckning på skärmen med pennan. Men om du försöker skriva med musen händer ingenting, eftersom InkCanvas som standard endast är aktiverat för digitala pennor. Så här aktiverar du InkCanvas för musen.

  5. Fortsätt i MyWPFAppoch öppna MainWindow.xaml.cs.

  6. Lägg till följande namnområdesdirektiv överst i filen:

    using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;

  7. Leta upp konstruktorn MainWindow. Omedelbart efter anropet till InitializeComponent lägger du till följande kodrad:

    myInkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;

    Du kan använda objektet InkPresenter för att anpassa standardfunktionen för pennanteckning. Koden ovan använder egenskapen InputDeviceTypes för att aktivera både mus och penninmatning.

  8. Spara, skapa och kör. Om du använder en dator med en mus, så kontrollera att du kan rita något på ritytan med musen.

Värdhantera en CalendarView med hjälp av värdkontrollen

I det här avsnittet använder vi WindowsXamlHost-kontrollen för att lägga till en CalendarView i appen.

Anmärkning

WindowsXamlHost-kontrollen tillhandahålls av paketet Microsoft.Toolkit.Wpf.UI.XamlHost. Paketet ingår i paketet Microsoft.Toolkit.Wpf.UI.Controls som du installerade tidigare.

  1. I Solution Explorer, i MyWPFApp, öppna MainWindow.xaml-filen.

  2. Lägg till följande attribut i elementet Window längst upp i XAML-filen. Det här attributet refererar till XAML-namnområdet för WindowsXamlHost-kontrollen och mappar det till XML-namnområdet xamlhost .

    xmlns:xamlhost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"

  3. MainWindow.xamlRedigera fortfarande det befintliga Grid-elementet så att det ser ut som XAML nedan. Denna XAML lägger till i Grid en WindowsXamlHost- kontroll försett med prefixet från xamlhost XML-namnområde som du angav i det föregående steget. För att vara värd för en UWP CalendarView-kontroll anger denna XAML egenskapen InitialTypeName till det fullständigt kvalificerade namnet på kontrollen. XAML definierar också en händelsehanterare för childchanged-händelsen, som aktiveras när den värdbaserade kontrollen har renderats.

    <Grid Margin="10,50,10,10">
    <xamlhost:WindowsXamlHost x:Name="myCalendar" InitialTypeName="Windows.UI.Xaml.Controls.CalendarView"
          Margin="10,10,10,10" Width="600" Height="300" ChildChanged="MyCalendar_ChildChanged" />
</Grid>

  4. Spara MainWindow.xamloch öppna MainWindow.xaml.cs.

  5. Ta bort den här kodraden, som vi lade till i föregående avsnitt: myInkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;.

  6. Lägg till följande namnområdesdirektiv överst i filen:

    using Microsoft.Toolkit.Wpf.UI.XamlHost;

  7. Lägg till följande händelsehanterarmetod för ChildChanged i klassen MainWindow. När värdkontrollen har renderats, körs den här händelsehanteraren och skapar en enkel händelsehanterare för kalenderkontrollens SelectedDatesChanged-händelse.

    private void MyCalendar_ChildChanged(object sender, EventArgs e)
{
    WindowsXamlHost windowsXamlHost = (WindowsXamlHost)sender;

    var calendarView =
        (Windows.UI.Xaml.Controls.CalendarView)windowsXamlHost.Child;

    if (calendarView != null)
    {
        calendarView.SelectedDatesChanged += (obj, args) =>
        {
            if (args.AddedDates.Count > 0)
            {
                MessageBox.Show("The user selected a new date: " +
                    args.AddedDates[0].DateTime.ToString());
            }
        };
    }
}

  8. Spara, skapa och kör. Bekräfta att kalenderkontrollen visas i fönstret och att en meddelanderuta visas när du väljer ett datum.

Förpacka appen

Du kan också paketera WPF-appen i ett MSIX-paket för distribution. MSIX är den moderna och tillförlitliga apppaketeringstekniken för Windows.

Följande instruktioner visar hur du paketerar alla komponenter i lösningen i ett MSIX-paket med hjälp av Windows Application Packaging Project i Visual Studio (se Konfigurera ditt skrivbordsprogram för MSIX-paketering i Visual Studio). De här stegen är bara nödvändiga om du vill paketera WPF-appen i ett MSIX-paket.

Anmärkning

Om du väljer att inte paketera programmet i ett MSIX-paket för distribution måste datorer som kör appen ha Visual C++ Runtime installerat.

  1. Lägg till ett nytt projekt i din lösning som skapats från projektmallen Windows Application Packaging Project . När du skapar projektet väljer du samma målversion och lägsta version som du valde för UWP-projektet.

  2. Högerklicka på noden Beroenden i paketeringsprojektet och välj Lägg till projektreferens.... I listan över projekt väljer du MyWPFApp och klickar på OK.

    Anmärkning

    Om du vill publicera din app i Microsoft Store måste du också lägga till en referens till UWP-projektet i paketeringsprojektet.

  3. Om du har följt stegen fram till den här punkten kommer alla projekt i din lösning att rikta in sig på samma specifika plattform (x86 eller x64). Och det är nödvändigt för att skapa WPF-appen i ett MSIX-paket med hjälp av Windows Application Packaging Project. För att bekräfta detta kan du följa dessa steg:

    1. Högerklicka på lösningsnoden (inte projektnoden) i Solution Explorer och välj Egenskaper.
    2. Välj Konfigurationsegenskaper till vänster.
    3. Klicka på knappen Configuration Manager... (Konfigurationshanteraren... ).
    4. Bekräfta att alla projekt i listan har samma värde under Plattform: antingen x86 eller x64.

  4. Högerklicka på projektnoden för paketeringsprojektet som du nyss lade till och klicka på Ange som startprojekt.

  5. Skapa och kör paketeringsprojektet. Bekräfta att WPF-appen körs och att UWP-kontrollerna visas som förväntat.

  6. Information om hur du distribuerar paketet finns i Hantera msix-distributionen.