Udostępnij przez

Tworzenie aplikacji Windows Presentation Foundation (WPF) Blazor

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

W tym samouczku pokazano, jak skompilować i uruchomić aplikację WPF Blazor . Dowiedz się, jak odbywa się:

  • Tworzenie projektu aplikacji WPF Blazor
  • Razor Dodawanie składnika do projektu
  • Uruchamianie aplikacji w systemie Windows

Wymagania wstępne

Obciążenie programu Visual Studio

Jeśli nie zainstalowano obciążenia programowanie aplikacji klasycznych platformy .NET, zainstaluj obciążenie za pomocą instalatora programu Visual Studio. Aby uzyskać więcej informacji, zobacz Modyfikowanie obciążeń, składników i pakietów językowych programu Visual Studio.

Wybór obciążenia instalatora programu Visual Studio.

Tworzenie projektu WPF Blazor

Uruchom program Visual Studio. W oknie startowym wybierz pozycję Utwórz nowy projekt:

Utwórz nowe rozwiązanie w programie Visual Studio.

W oknie dialogowym Tworzenie nowego projektu przefiltruj listę rozwijaną Typ projektu na Pulpit. Wybierz szablon projektu języka C# dla aplikacji WPF i wybierz przycisk Dalej :

Utwórz nowy projekt w programie Visual Studio.

W oknie dialogowym Konfigurowanie nowego projektu:

  • Ustaw nazwę projektu na WpfBlazor.
  • Wybierz odpowiednią lokalizację dla projektu.
  • Kliknij przycisk Next (Dalej).

Skonfiguruj projekt.

W oknie dialogowym Dodatkowe informacje wybierz wersję platformy z listą rozwijaną Framework. Wybierz przycisk Utwórz:

Okno dialogowe Dodatkowe informacje dla projektu WPF.

Użyj Menedżer pakietów NuGet, aby zainstalować Microsoft.AspNetCore.Components.WebView.Wpf pakiet NuGet:

Użyj Menedżer pakietów NuGet w programie Visual Studio, aby zainstalować pakiet NuGet Microsoft.AspNetCore.Components.WebView.Wpf.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu, a następnie wybierz polecenie Edytuj plik projektu, WpfBlazoraby otworzyć plik projektu (WpfBlazor.csproj).

W górnej części pliku projektu zmień zestaw SDK na Microsoft.NET.Sdk.Razor:

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

W istniejącym <PropertyGroup> pliku projektu dodaj następujący znacznik, aby ustawić przestrzeń nazw głównej aplikacji, która znajduje się WpfBlazor w tym samouczku:

<RootNamespace>WpfBlazor</RootNamespace>

Uwaga

Powyższe wskazówki dotyczące ustawiania głównej przestrzeni nazw projektu są tymczasowym obejściem. Aby uzyskać więcej informacji, zobacz [Blazor][Wpf] Problem związany z przestrzeń nazw root (dotnet/maui #5861).

Zapisz zmiany w pliku projektu (WpfBlazor.csproj).

_Imports.razor Dodaj plik do katalogu głównego projektu z dyrektywą @using .Microsoft.AspNetCore.Components.Web

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Zapisz plik _Imports.razor.

wwwroot Dodaj folder do projektu.

index.html Dodaj plik do wwwroot folderu przy użyciu następującego znacznika.

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>

W folderze wwwroot utwórz css folder.

app.css Dodaj arkusz stylów do wwwroot/css folderu z następującą zawartością.

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

W folderze wwwroot/css utwórz bootstrap folder. W folderze bootstrap umieść kopię bootstrap.min.csspliku . Najnowszą wersję bootstrap.min.css można uzyskać z witryny internetowej Bootstrap. Postępuj zgodnie z linkami paska nawigacyjnego do witryny Docs>Download. Nie można tutaj podać linku bezpośredniego, ponieważ cała zawartość w witrynie jest wersjonowana w adresie URL.

Dodaj następujący Counter składnik do katalogu głównego projektu, który jest domyślnym Counter składnikiem znajdującym się w Blazor szablonach projektów.

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

Counter Zapisz składnik (Counter.razor).

MainWindow Jeśli projektant nie jest otwarty, otwórz go, klikając MainWindow.xaml dwukrotnie plik w Eksplorator rozwiązań. W projektancie MainWindow zastąp kod XAML następującym kodem:

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

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy MainWindow.xaml i wybierz polecenie Wyświetl kod:

Wyświetl kod MainWindow.

Dodaj przestrzeń nazw Microsoft.Extensions.DependencyInjection na początku MainWindow.xaml.cs pliku:

using Microsoft.Extensions.DependencyInjection;

Wewnątrz konstruktora po wywołaniu MainWindowInitializeComponent metody dodaj następujący kod:

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

Uwaga

Metoda InitializeComponent jest generowana automatycznie w czasie kompilacji aplikacji i dodawana do obiektu kompilacji dla klasy wywołującej.

Końcowy, kompletny kod MainWindow.xaml.cs języka C# z usuniętą przestrzenią nazw o zakresie plików i komentarzami:

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

Uruchom aplikację

Wybierz przycisk Start na pasku narzędzi programu Visual Studio:

Przycisk Start paska narzędzi programu Visual Studio.

Aplikacja uruchomiona w systemie Windows:

Aplikacja uruchomiona w systemie Windows.

Następne kroki

W tym samouczku zawarto informacje na temat wykonywania następujących czynności:

  • Tworzenie projektu aplikacji WPF Blazor
  • Razor Dodawanie składnika do projektu
  • Uruchamianie aplikacji w systemie Windows

Dowiedz się więcej o Blazor Hybrid aplikacjach:

ASP.NET Core Blazor Hybrid