Skapa en WPF-app (Windows Presentation Foundation) Blazor

Anmärkning

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i .NET 10-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Den här guiden visar hur du skapar och kör en WPF-app Blazor. Du lär dig att:

Skapa ett WPF-appprojekt Blazor
Lägga till en Razor komponent i projektet
Kör appen i Windows

Förutsättningar

Plattformar som stöds (WPF-dokumentation)
Visual Studio 2022 med .NET Desktop Development verktygspaketet

Visual Studio-arbetsbelastning

Om arbetsbelastningen för .NET-skrivbordsutveckling inte är installerad använder du Installationsprogrammet för Visual Studio för att installera arbetsbelastningen. Mer information finns i Ändra Visual Studio-arbetsbelastningar, komponenter och språkpaket.

Arbetsbelastningsval för Visual Studio-installationsprogrammet.

Skapa ett WPF-projekt Blazor

Starta Visual Studio. I startfönstret väljer du Skapa ett nytt projekt:

Skapa en ny lösning i Visual Studio.

I dialogrutan Skapa ett nytt projekt filtrerar du listrutan Projekttyp till Desktop. Välj C#-projektmallen för WPF-programmet och välj knappen Nästa :

Skapa ett nytt projekt i Visual Studio.

I dialogrutan Konfigurera det nya projektet :

Ange projektnamnet till WpfBlazor.
Välj en lämplig plats för projektet.
Välj knappen Nästa.

Konfigurera projektet.

I dialogrutan Ytterligare information väljer du ramverksversionen med listrutan Framework . Välj knappen Skapa :

Dialogrutan Ytterligare information för WPF-projektet.

Använd NuGet Package Manager för att installera NuGet-paketet Microsoft.AspNetCore.Components.WebView.Wpf :

Använd Nuget Package Manager i Visual Studio för att installera NuGet-paketet Microsoft.AspNetCore.Components.WebView.Wpf.

Högerklicka på projektets namn i WpfBlazor och välj Redigera projektfil för att öppna projektfilen (WpfBlazor.csproj).

Överst i projektfilen ändrar du SDK till Microsoft.NET.Sdk.Razor:

<Project Sdk="Microsoft.NET.Sdk.Razor">

I projektfilens befintliga <TargetFramework> egenskap lägger du till ett versionsnummer för Windows 10 eller senare:

<TargetFramework>net10.0-windows10.0.17763.0</TargetFramework>

Anmärkning

Den föregående vägledningen om hur du ställer in projektets målramverksversion som mål för Windows 10 eller senare är ett resultat av att växla till WebView2CompositionControl med lanseringen av .NET 10.

I projektfilens befintliga <PropertyGroup> lägger du till följande kod för att ange appens rotnamnområde, vilket är WpfBlazor i den här självstudien.

<RootNamespace>WpfBlazor</RootNamespace>

Anmärkning

Föregående vägledning om hur du anger projektets rotnamnområde är en tillfällig lösning. Mer information finns i [Blazor][Wpf] Rotnamnområdesrelaterat problem (dotnet/maui #5861).

Spara ändringarna i projektfilen (WpfBlazor.csproj).

Lägg till en _Imports.razor-fil till projektets rotmapp med ett @using direktiv för Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Spara filen _Imports.razor.

Lägg till en wwwroot mapp i projektet.

Lägg till en index.html fil i wwwroot mappen med följande markering.

wwwroot/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WpfBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WpfBlazor.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webview.js"></script>
</body>

</html>

Skapa en wwwroot mapp i css mappen.

Lägg till en app.css formatmall i wwwroot/css mappen med följande innehåll.

wwwroot/css/app.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Skapa en wwwroot/css mapp i bootstrap mappen. Placera en kopia av bootstrap i bootstrap.min.css mappen. Du kan hämta den senaste versionen av bootstrap.min.css från Bootstrap-webbplatsen. Följ länkarna i navigeringsfältet till Docs>Download. Det går inte att ange en direktlänk här eftersom allt innehåll på webbplatsen är versionshanterat i URL:en.

Lägg till följande Counter komponent i roten för projektet, som är standardkomponenten Counter som finns i Blazor projektmallar.

Counter.razor:

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Komponenten Counter (Counter.razor) sparas.

Om designern MainWindow inte är öppen öppnar du den MainWindow.xaml genom att dubbelklicka på filen i Solution Explorer. I designern MainWindow ersätter du XAML-koden med följande:

<Window x:Class="WpfBlazor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        xmlns:local="clr-namespace:WpfBlazor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

Högerklicka i Solution ExplorerMainWindow.xaml och välj Visa kod:

Visa MainWindow-kod.

Lägg till namnområdet Microsoft.Extensions.DependencyInjection överst i MainWindow.xaml.cs filen:

using Microsoft.Extensions.DependencyInjection;

Inuti konstruktorn MainWindow, efter metodanropet InitializeComponent, lägg till följande kod:

var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());

Anmärkning

Metoden InitializeComponent genereras automatiskt vid appbyggtiden och läggs till i kompileringsobjektet för den anropande klassen.

Den sista, fullständiga C#-koden för MainWindow.xaml.cs med ett filomfattningsnamnområde och kommentarer borttagna:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;

namespace WpfBlazor;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var serviceCollection = new ServiceCollection();
        serviceCollection.AddWpfBlazorWebView();
        Resources.Add("services", serviceCollection.BuildServiceProvider());
    }
}

Kör appen

Välj startknappen i Visual Studio-verktygsfältet:

Appen som körs i Windows:

Appen som körs i Windows.

Nästa steg

I den här handledningen lärde du dig att:

Skapa ett WPF-appprojekt Blazor
Lägga till en Razor komponent i projektet
Kör appen i Windows

Läs mer om Blazor Hybrid appar:

ASP.NET Core Blazor Hybrid

Feedback

Var den här sidan till hjälp?

Last updated on 2025-11-19

Dela via

Skapa en WPF-app (Windows Presentation Foundation) Blazor

Förutsättningar

Visual Studio-arbetsbelastning

Skapa ett WPF-projekt Blazor

Kör appen

Nästa steg

Feedback

Ytterligare resurser