Genomgång – Skapa en C#-komponent med WinUI 3-kontroller och använd den från en C++/WinRT-app som använder Windows App SDK

C#/WinRT har stöd för redigering av Windows Runtime komponenter, inklusive anpassade WinUI-typer och anpassade kontroller. Dessa komponenter kan användas från C#- eller C++/WinRT-program som använder Windows App SDK. Vi rekommenderar att du använder C#/WinRT v1.6.4 eller senare för att skapa körningskomponenter med NuGet-paketeringsstöd.

Mer information om scenarier som stöds finns i Authoring C#/WinRT-komponenter i C#/WinRT GitHub-lagringsplatsen.

Den här genomgången visar hur du skapar en C#-komponent med en anpassad WinUI-kontroll och hur du använder komponenten från en C++/WinRT-app med hjälp av Windows App SDK projektmallar.

Förutsättningar

Den här genomgången kräver följande verktyg och komponenter:

Skapa C#/WinRT-komponenten med hjälp av Windows App SDK

  1. Skapa ett nytt C#-biblioteksprojekt med hjälp av mallen Class Library (WinUI i Desktop) som tillhandahålls av Windows App SDK. I den här genomgången har vi döpt biblioteket project WinUIComponentCs och lösningen AuthoringWinUI.

    Lämna Platslösningen och projektet i samma katalog rutan avmarkerad (annars kommer mappen packages för C++-programmet i föregående avsnitt att störa C#-biblioteket projektet).

    Dialogrutan Nytt bibliotek

  2. Class1.cs Ta bort filen som ingår som standard.

  3. Installera den senaste Microsoft.Windows. CsWinRT NuGet-paket i projektet.

    i. I Prieskumník riešení högerklickar du på projektnoden och väljer Hantera NuGet-paket.

    ii. Sök efter Microsoft.Windows. CsWinRT NuGet-paket och installera den senaste versionen.

  4. Lägg till följande egenskaper i ditt biblioteksprojekt:

    <PropertyGroup>   
        <CsWinRTComponent>true</CsWinRTComponent>
    </PropertyGroup>
    
    • Egenskapen CsWinRTComponent anger att projektet är en Windows Runtime komponent så att en .winmd-fil genereras när du skapar projektet.
  5. Lägg till en anpassad kontroll eller användarkontroll i biblioteket. Det gör du genom att högerklicka på projektet i Visual Studio, klicka på Lägg till>Nyt objekt och välj WinUI i det vänstra fönstret. För den här genomgången lade vi till en ny användarkontroll (WinUI) och gav den NameReporter.xamlnamnet . Med användarkontrollen NameReporter kan en användare ange ett för- och efternamn i lämplig TextBox-kontroll och klicka på en knapp. Kontrollen visar sedan en meddelanderuta med det namn som användaren angav.

  6. Klistra in följande kod i NameReporter.xaml filen:

    <UserControl
    x:Class="WinUIComponentCs.NameReporter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUIComponentCs"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
        <StackPanel HorizontalAlignment="Center">
            <StackPanel.Resources>
                <Style x:Key="BasicTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BodyTextBlockStyle}">
                    <Setter Property="Margin" Value="10,10,10,10"/>
                </Style>
            </StackPanel.Resources>
    
            <TextBlock Text="Enter your name." Margin="0,0,0,10"/>
            <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                <TextBlock Style="{StaticResource BasicTextStyle}">
                    First Name:
                </TextBlock>
                <TextBox Name="firstName" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                <TextBlock Style="{StaticResource BasicTextStyle}">
                    Last Name:
                </TextBlock>
                <TextBox Name="lastName" />
            </StackPanel>
            <Button Content="Submit" Click="Button_Click" Margin="0,0,0,10"/>
            <TextBlock Name="result" Style="{StaticResource BasicTextStyle}" Margin="0,0,0,10"/>
        </StackPanel>
    </UserControl>
    
  7. Lägg till följande metod i NameReporter.xaml.cs:

    using System.Text;
    ...
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        StringBuilder displayText = new StringBuilder("Hello, ");
        displayText.AppendFormat("{0} {1}.", firstName.Text, lastName.Text);
        result.Text = displayText.ToString();
    }
    
  8. Nu kan du skapa WinUIComponentCs project för att generera en .winmd-fil för komponenten.

Anmärkning

Du kan också paketera komponenten som ett NuGet-paket som slutanvändarna ska referera till. Mer information finns i Authoring C#/WinRT-komponenter på repo:et C#/WinRT GitHub.

Referera till komponenten från en Windows App SDK C++/WinRT-app

Följande steg visar hur du använder komponenten som skapades från föregående avsnitt från ett C++/WinRT-Windows App SDK program. För att använda en C#/WinRT-komponent från C++ krävs det för närvarande att du använder mallen WinUI Blank App (Packaged) för ett enskilt projekt. Observera att C#-komponenter också kan refereras från C#-paketerade appar utan klassregistreringar.

Förbrukning från paketerade appar som använder en separat Windows Application Packaging (WAP) projekt stöds inte för närvarande. Se Authoring C#/WinRT-komponenter i C#/WinRT-GitHub-lagringsplatsen för den senaste informationen om stöd av projektkonfigurationer.

  1. Lägg till ett nytt C++ Windows App SDK-programprojekt i din lösning. Högerklicka på lösningen i Visual Studio och välj Lägg till>Ny Project. Välj mallen C++ WinUI Blank App (Packaged) som tillhandahålls av Windows App SDK. För den här genomgången gav vi appen namnet CppApp.

  2. Lägg till en project referens från C++-appen till C#-komponenten. Högerklicka på C++-projektet i Visual Studio och välj Lägg till>Reference och välj projektet WinUIComponentCs.

    Anmärkning

    Användning av komponenter som en NuGet-paketreferens stöds med vissa begränsningar. Det vill säga att komponenter med anpassade användarkontroller för närvarande inte kan användas som en NuGet-paketreferens.

  3. Lägg till följande rader i appens pch.h huvudfil:

    #include <winrt/WinUIComponentCs.h>
    #include <winrt/WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.h>
    
  4. Öppna paketmanifestfilen . Package.appxmanifest

    Anmärkning

    Det finns ett känt problem där filen Package.appxmanifest inte visas i Visual Studio Prieskumník riešení. Om du vill undvika det högerklickar du på C++-project genom att välja Avlasta Project och dubbelklicka på project för att öppna filen CppApp.vcxproj. Lägg till följande post i projektfilen och läs sedan in projektet igen:

    <ItemGroup>
        <AppxManifest Include="Package.appxmanifest">
        <SubType>Designer</SubType>
        </AppxManifest>
    </ItemGroup>
    

    I Package.appxmanifestlägger du till följande aktiverbara klassregistreringar. Du behöver också en ytterligare ActivatableClass post för klassen WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.XamlMetaDataProvider för att aktivera WinUI-typerna. Högerklicka på Package.appxmanifest filen och välj Öppna med>XML (textredigeraren) för att redigera filen.

    <!--In order to host the C# component from C++, you must add the following Extension group and list the activatable classes-->
    <Extensions>
        <Extension Category="windows.activatableClass.inProcessServer">
            <InProcessServer>
                <Path>WinRT.Host.dll</Path>
                <ActivatableClass ActivatableClassId="WinUIComponentCs.NameReporter" ThreadingModel="both" />
                <ActivatableClass ActivatableClassId="WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.XamlMetaDataProvider" ThreadingModel="both" />
            </InProcessServer>
        </Extension>
    </Extensions>
    
  5. Öppna MainWindow.xaml-filen.

    i. Lägg till en referens till komponentens namnområde överst i filen.

    xmlns:custom="using:WinUIComponentCs"
    

    ii. Lägg till användarkontrollen i den befintliga XAML-koden.

    <StackPanel>
        ...
        <custom:NameReporter/>
    </StackPanel>
    
  6. Ange CppApp som start project – högerklicka på CppApp och välj Set som Start Project. Ange lösningskonfigurationen till x86. Innan du kompilera kan du också behöva omrikta din lösning för att bygga med byggverktygen Visual Studio 2026. Högerklicka på lösningen, välj Retarget-lösning och uppgradera plattformsverktyguppsättningen till v143.

  7. Skapa och kör appen för att se den anpassade NameReporter kontroll.

Kända problemområden

  • Om du använder en C#-komponent som en projektreferens måste PublishReadyToRun anges till False. Mer information finns i GitHub Issue #1151.
  • Användning av en C#-komponent som skapats för AnyCPU från C++ stöds för närvarande endast från x86 applikationer. x64 och Arm64 appar resulterar i ett körningsfel som liknar: %1 är inte ett giltigt Win32-program. Se GitHub Problem #1093 för mer information.