Aracılığıyla paylaş

Windows Forms Blazor uygulaması oluşturma

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Bu öğreticide bir Windows Forms Blazor uygulamasının nasıl derlenip çalıştırılacakları gösterilmektedir. Şunları yapmayı öğreneceksiniz:

  • Windows Forms Blazor uygulama projesi oluşturma
  • Uygulamayı Windows'da çalıştırma

Önkoşullar

Visual Studio iş yükü

.NET masaüstü geliştirme iş yükü yüklü değilse, iş yükünü yüklemek için Visual Studio yükleyicisini kullanın. Daha fazla bilgi için bkz . Visual Studio iş yüklerini, bileşenlerini ve dil paketlerini değiştirme.

Visual Studio yükleyicisi .NET masaüstü geliştirme iş yükü seçimi.

Windows Forms Blazor projesi oluşturma

Visual Studio’yu başlatın. Başlangıç Penceresi'nde Yeni proje oluştur'u seçin:

Visual Studio'da yeni bir çözüm oluşturun.

Yeni proje oluştur iletişim kutusunda, Proje türü açılan listesini Masaüstü olarak filtreleyin. Windows Forms Uygulaması için C# proje şablonunu seçin ve İleri düğmesini seçin:

Visual Studio'da yeni bir proje oluşturun.

Yeni projenizi yapılandırın iletişim kutusunda:

  • Proje adını olarak WinFormsBlazorayarlayın.
  • Proje için uygun bir konum seçin.
  • İleri düğmesini seçin.

Projeyi yapılandırın.

Ek bilgiler iletişim kutusunda Çerçeve açılan listesiyle çerçeve sürümünü seçin. Oluştur düğmesini seçin:

Ek Bilgi iletişim kutusu.

NuGet paketini yüklemek için NuGet Paket YöneticisiMicrosoft.AspNetCore.Components.WebView.WindowsForms:

Visual Studio'da Nuget Paket Yöneticisi kullanarak Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet paketini yükleyin.

Çözüm Gezgini'da projenin adına WinFormsBlazorsağ tıklayın ve Proje Dosyasını Düzenle'yi seçerek proje dosyasını (WinFormsBlazor.csproj açın).

Proje dosyasının üst kısmında SDK'yı olarak Microsoft.NET.Sdk.Razordeğiştirin:

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

Değişiklikleri proje dosyasına (WinFormsBlazor.csproj ) kaydedin.

için bir _Imports.razor yönergesi @usingile projenin köküne bir Microsoft.AspNetCore.Components.Web dosya ekleyin.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

_Imports.razor dosyasını kaydedin.

Projeye bir wwwroot klasör ekleyin.

Klasöre index.html aşağıdaki işaretlemeyi içeren bir wwwroot dosya ekleyin.

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>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.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>

wwwroot Klasörün içinde, stil sayfalarını tutmak için bir css klasör oluşturun.

Klasöre app.css aşağıdaki içeriğe sahip bir wwwroot/css stil sayfası ekleyin.

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

klasörün içinde wwwroot/css bir bootstrap klasör oluşturun. klasörünün bootstrap içine bir kopyasını bootstrap.min.cssyerleştirin. En son sürümünü bootstrap.min.cssBootstrap web sitesinden edinebilirsiniz. Sitedeki tüm içerik URL'de sürümlendiğinden, doğrudan bağlantı burada sağlanamaz. Bu nedenle, edinmek için Docs> yönelik gezinti çubuğu bağlantılarını izleyin.

Proje şablonlarında bulunan Counter varsayılan Counter bileşen olan projenin köküne aşağıdaki Blazor bileşeni ekleyin.

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 Bileşeni (Counter.razor) kaydedin.

Çözüm Gezgini'da dosyaya Form1.cs çift tıklayarak tasarımcıyı açın:

Çözüm Gezgini'daki Form1.cs dosyası.

Visual Studio penceresinin

BlazorWebView altında Microsoft.AspNetCore.Components.WebView.WindowsFormsdenetimi bulun. BlazorWebView Araç Kutusu'ndan tasarımcıya Form1 sürükleyin. Bir denetimi yanlışlıkla forma sürüklememeye WebView2 dikkat edin.

Araç Kutusunda BlazorWebView.

Visual Studio, form tasarımcısındaki denetimi olarak gösterir BlazorWebView ve denetimi WebView2otomatik olarak blazorWebView1 olarak adlandırr:

Form1 tasarımcısında BlazorWebView.

içindeForm1, tek bir tıklamayla (BlazorWebView) öğesini seçin WebView2 .

'nin BlazorWebView bölümünde denetimin olarak adlandırıldığını blazorWebView1onaylayın. Ad değilseblazorWebView1, Araç Kutusu'ndan yanlış denetim sürüklenmiş. içindeki WebView2 denetimi silin ve formaForm1BlazorWebView.

BlazorWebView, Visual Studio tarafından otomatik olarak 'blazorWebView1' olarak adlandırılır.

Denetimin özelliklerinde, 'nin BlazorWebView değerini Dolgu olarak değiştirin:

Dock'un Dolgu olarak ayarlandığı BlazorWebView özellikleri.

Tasarımcıda Form1 sağ tıklayın Form1 ve Kodu Görüntüle'yi seçin.

Dosyanın en üstüne Microsoft.AspNetCore.Components.WebView.WindowsForms ve Microsoft.Extensions.DependencyInjection için Form1.cs ad alanları ekleyin:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

Oluşturucunun Form1 içinde, yöntem çağrısından InitializeComponent sonra aşağıdaki kodu ekleyin:

var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

Not

InitializeComponent yöntemi, uygulama derleme zamanında otomatik olarak oluşturulur ve çağıran sınıfın derleme nesnesine eklenir.

Dosya kapsamlı bir Form1.cs son, tam C# kodu:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace WinFormsBlazor;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        blazorWebView1.RootComponents.Add<Counter>("#app");
    }
}

Uygulamayı çalıştırma

Visual Studio araç çubuğunda başlangıç düğmesini seçin:

Visual Studio araç çubuğunun Başlat düğmesi.

Windows üzerinde çalışan uygulama:

Windows üzerinde çalışan uygulama.

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Windows Forms Blazor uygulama projesi oluşturma
  • Uygulamayı Windows'da çalıştırma

Uygulamalar hakkında Blazor Hybrid daha fazla bilgi edinin:

ASP.NET Core Blazor Hybrid

  • Last updated on