Windows Presentation Foundation (WPF) Blazor uygulaması oluşturma
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 8 sürümüne bakın.
Bu öğreticide WPF Blazor uygulamasını derleme ve çalıştırma işlemi gösterilmektedir. Şunları yapmayı öğreneceksiniz:
- WPF Blazor uygulama projesi oluşturma
- Projeye bileşen Razor ekleme
- 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.
WPF Blazor projesi oluşturma
Visual Studio’yu başlatın. Başlangıç Penceresi'nde Yeni proje oluştur'u seçin:
Yeni proje oluştur iletişim kutusunda, Proje türü açılan listesini Masaüstü olarak filtreleyin. WPF Uygulaması için C# proje şablonunu seçin ve İleri düğmesini seçin:
Yeni projenizi yapılandırın iletişim kutusunda:
- Proje adını olarak WpfBlazorayarlayın.
- Proje için uygun bir konum seçin.
- İleri düğmesini seçin.
Ek bilgiler iletişim kutusunda Çerçeve açılan listesiyle çerçeve sürümünü seçin. Oluştur düğmesini seçin:
NuGet paketini yüklemek Microsoft.AspNetCore.Components.WebView.Wpf için NuGet Paket Yöneticisi kullanın:
Çözüm Gezgini'da projenin adına WpfBlazorsağ tıklayın ve Proje Dosyasını Düzenle'yi seçerek proje dosyasını (WpfBlazor.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">
Bu öğreticide yer alan uygulamanın kök ad alanını WpfBlazor ayarlamak için proje dosyasının mevcut <PropertyGroup> dosyasına aşağıdaki işaretlemeyi ekleyin:
<RootNamespace>WpfBlazor</RootNamespace>
Not
Projenin kök ad alanını ayarlamaya yönelik önceki kılavuz geçici bir geçici çözümdür. Daha fazla bilgi için bkz. [Blazor][Wpf] Kök ad alanıyla ilgili sorun (dotnet/maui #5861).
Değişiklikleri proje dosyasına (WpfBlazor.csproj ) kaydedin.
için bir _Imports.razor yönergesi Microsoft.AspNetCore.Components.Webile projenin köküne bir @using dosya ekleyin.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
_Imports.razor dosyasını kaydedin.
Projeye bir wwwroot klasör ekleyin.
Klasöre wwwroot aşağıdaki işaretlemeyi içeren bir index.html 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>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>
klasörün içinde wwwroot bir css klasör oluşturun.
Klasöre wwwroot/css aşağıdaki içeriğe sahip bir app.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. Docs>İndirme'ye yönelik gezinti çubuğu bağlantılarını izleyin. Sitedeki tüm içerik URL'de sürümlendiğinden, doğrudan bağlantı burada sağlanamaz.
Proje şablonlarında bulunan Blazor varsayılan Counter bileşen olan projenin köküne aşağıdaki Counter 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.
MainWindow Tasarımcı açık değilse, Çözüm Gezgini'da dosyaya MainWindow.xaml çift tıklayarak açın. Tasarımcıda MainWindow XAML kodunu aşağıdakilerle değiştirin:
<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>
Çözüm Gezgini sağ tıklayın MainWindow.xaml ve Kodu Görüntüle'yi seçin:
Ad alanını Microsoft.Extensions.DependencyInjection dosyanın en üstüne MainWindow.xaml.cs ekleyin:
using Microsoft.Extensions.DependencyInjection;
Oluşturucunun MainWindow içinde, yöntem çağrısından InitializeComponent sonra aşağıdaki kodu ekleyin:
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
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 ad alanı ve açıklamalar kaldırılmış son, tam C# koduMainWindow.xaml.cs:
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());
}
}
Uygulamayı çalıştırma
Visual Studio araç çubuğunda başlangıç düğmesini seçin:
Windows üzerinde çalışan uygulama:
Sonraki adımlar
Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:
- WPF Blazor uygulama projesi oluşturma
- Projeye bileşen Razor ekleme
- Uygulamayı Windows'da çalıştırma
Uygulamalar hakkında Blazor Hybrid daha fazla bilgi edinin:
ASP.NET Core
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin