İngilizce dilinde oku

Aracılığıyla paylaş

C# ve WinUI 3 / Windows Uygulama SDK'sı kullanarak Hello World uygulaması oluşturma

  • Makale

Bu nasıl yapılır makalesinde Visual Studio 2022 ve WinUI 3 / Windows Uygulama SDK'sını kullanarak başlatıldığında "Merhaba dünya!" ifadesini görüntüleyen bir Windows masaüstü uygulaması oluşturacağız:

oluşturmakta olduğumuz 'Merhaba dünya' uygulamasını .

Bu kılavuz yeni başlayanlar için hazırlanmıştır ve Windows masaüstü geliştirme hakkında hiçbir varsayımda bulunmaz.

Önkoşullar

Bu öğreticide Visual Studio kullanılır ve WinUI 3 boş uygulama şablonunu temel alır. Kurulumu yapmak için WinUI ile kullanmaya başlamayönergelerini izleyin. Visual Studio'yu yükleyecek, WinUI ile uygulama geliştirmek için yapılandıracak, Hello World projesini oluşturacak ve WinUI'nin en son sürümüne sahip olduğunuzdan emin olacaksınız.

Bunu yaptıktan sonra, Hello World projesi hakkında daha fazla bilgi edinmek ve bu projede bazı güncelleştirmeler yapmak için buraya geri dönün.

Boş uygulama projesini gözden geçirme

Visual Studio'daki WinUI proje şablonları, uygulamanızı derlemek ve çalıştırmak için ihtiyacınız olan her şeyi içerir. Boş Uygulama şablonu, hata ayıklama modunda çalıştırdığınızda şuna benzer etkileşimli bir Düğme içeren bir Pencere oluşturur.

çalışan şablonlu proje

Click Megösterimi için düğmesine tıklayın:

'Bana Tıkla' düğmesi

Bu durumda, bir Düğmesi denetiminin Tıklama olayı, myButton_Clickkonumunda bulunan MainWindow.xaml.cs olay işleyicisine bağlıdır.

'Bana Tıkla' düğmesinin olay işleyicisi, ana pencerenizin arka planda kod dosyasında bulunur.

MainWindow.xaml.cs, ana penceremizin iş mantığı arka planda kod dosyası biçiminde kaygılar içerse de, sunusu endişeleri MainWindow.xaml:

Ana pencerenizin işaretleme dosyasında bulunan 'Bana Tıkla' düğmesinin XML işaretlemesi

iş mantığı ve sunum endişeleri ayrımı, tutarlı bir uygulama geliştirme deseni kullanarak uygulamanızın kullanıcı arabirimine ve kullanıcı arabiriminden veri ve olayları bağlamanıza olanak tanır.

Projenin dosya yapısı

Kod değişiklikleri yapmadan önce projenin dosya yapısını gözden geçirelim. Bu, Çözüm Gezginibulunur.

İpucu

Çözüm Gezgini gibi özellikleri bulmak için gezinti çubuğunda Ara'ya tıklayın ve Özellik Arama seçeneğini kullanın. Özellik Arama

Projenin dosya yapısı şu anda şöyle görünür:

Dosya yapısına genel bakış

Bu tabloda yukarıdan başlayıp aşağıdan başlayarak dosyalar açıklanmaktadır:

Dosya Adı ve
Görsel Referans Numarası		 Açıklama
Solution 'Hello World'
1.		 Bu,projeleriniz için bir mantıksal kapsayıcı olançözüm dosyasıdır. Projeler genellikle uygulamalardır, ancak sınıf kitaplıklarını da destekleyebilir.
Hello World
2.		 Bu, uygulamanızın dosyaları için bir mantıksal kapsayıcıproje dosyasıdır.
Dependencies
3.		 Uygulamanız çerçevelere (.NET ve Windows SDKgibi) ve paketlerine (Windows Uygulama SDK'sıgibi) bağlıdır. Uygulamanıza daha gelişmiş işlevler ve üçüncü taraf kitaplıklar ekledikçe, burada ek bağımlılıklar görünür.
Properties
4.		 Kural gereği, WinUI 3 projeleri yayımlama profillerini yerleştirir ve yapılandırma dosyalarını bu klasöre başlatır.
PublishProfiles
5.		 Yayımlama profilleriniz, uygulamanızın çeşitli platformlardaki yayımlama yapılandırmasını belirtir.
launchSettings.json
6.		 Bu dosya, uygulamanızı aracılığıyla çalıştırırken kullanılabilecek dotnet run yapılandırmanızı sağlar.
Assets
7.		 Bu klasör uygulamanızın logosunu, resimlerini ve diğer medya varlıklarını içerir.
app.manifest
8.		 Bu uygulama bildirim dosyası, Windows'un kullanıcı cihazlarına yüklendiğinde uygulamanızı görüntüleme biçimiyle ilgili yapılandırmayı içerir.
App.xaml
9.		 Bu işaretleme dosyası, uygulamanızın bağımlı olduğu paylaşılan ve genel olarak erişilebilir kaynakları belirtir.
App.xaml.cs
10.		 Bu arka planda kod dosyası, uygulamanızın iş mantığının giriş noktasını temsil eder. Bu, MainWindowörneğinizin oluşturulmasından ve etkinleştirilmesinden sorumludur.
MainWindow.xaml
11.		 Bu işaretleme dosyası, uygulamanızın ana penceresine ilişkin sunu endişelerini içerir.
MainWindow.xaml.cs
12.		 Bu arka planda kod dosyası, uygulamanızın ana penceresiyle ilişkili iş mantığı sorunlarını içerir.
Package.appxmanifest
13.		 Bu paket bildirim dosyası, uygulamanızın Windows Mağazası'nda nasıl görüneceğini belirleyen yayımcı bilgilerini, logoları, işlemci mimarilerini ve diğer ayrıntıları yapılandırmanıza olanak tanır.

"Merhaba dünya!"

"Bana tıklayın" düğmesi yerine "Merhaba dünya!" ifadesini görüntülemek için MainWindow.xamladresine gidin. bir StackPanel denetiminin XAML işaretlemesini görmeniz gerekir:

XML 
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

İpucu

Windows uygulamaları oluştururken API başvuru belgelerine sık sık başvuracaksınız. StackPanel'in başvuru belgelerine StackPanel.

Şimdi StackPanel denetimini Hello world! kırmızı metinle görüntüleyecek şekilde güncelleştirelim:

XML 
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Uygulamanızı şimdi çalıştırmaya çalışırsanız, Visual Studio 'The name 'myButton' does not exist in the current context' numarası ile ilgili bir hata verir. Bunun nedeni, sunu katmanını yeni bir denetimle güncelleştirmemiz ancak arka planda kod dosyasımızda eski denetimin iş mantığını güncelleştirmemiş olmamızdır.

MainWindow.xaml.cs gidin ve myButton_Click olay işleyicisini silin. Etkileşimli Click me düğmesini statik Hello world! metinle değiştirdiğimizden bunu yapabiliriz. Ana penceremizin iş mantığı şu şekilde görünmelidir:

C# 
public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Menüden Çözümü Derle > Yeniden Derle'yi seçerek veya Ctrl + Shift + B tuşlarına basarak uygulamanızı sıfırlayın. Ardından Visual Studio araç çubuğundaki "Başlat" düğmesine tıklayarak veya F5 tuşuna basarak uygulamanızı yeniden başlatın.

Uygulama güncelleştirilir ve kırmızı bir Hello world!görmeniz gerekir:

Kırmızı bir 'Merhaba dünya!'

Uygulamanızın başlık çubuğunu güncelleştirme

this.Title = "Hello world!"; arka planda kod dosyanıza MainWindow.xaml.cs ekleyin:

C# 
public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Uygulamanızı yeniden başlatırsanız, artık hem gövde hem de başlık çubuğunda Hello world! görmeniz gerekir:

Oluşturmakta olduğumuz 'Hello, world!' uygulamasını .

Tebrikler! İlk Windows Uygulama SDK'nızı / WinUI 3 uygulamanızı oluşturdunuz.

Özet

Bu nasıl yapılır konusunda şunları başardınız:

  1. Visual Studio'nun proje şablonunukullanmaya başladınız.
  2. Bir olay işleyicisi yaşadınız ki bu, bir Button denetimininClick olay'u bir kullanıcı arabirimi güncellemesine bağlıyordu.
  3. Sunuyla ilgili endişeleri iş mantığından ayırmaya yönelik kuralı sırasıyla veC# arka planı dosyalarını XAML işaretleme dosyalarını kullandınız.
  4. Varsayılan WinUI 3 projesinin numaralı dosya yapısınıgözden geçirdiniz.
  5. Bir TextBlockiçinde yeni bir StackPanel desteklemek için hem sunu katmanını (XAML işaretlemesi) hem de iş mantığını (arka planda kod) değiştirdiniz.
  6. StackPaneldaha iyi anlamak için başvuru belgeleri gözden geçirdiniz.
  7. Ana pencerenizin başlık çubuğunu güncellediniz.

Tam kod dosyaları

XAML 
<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>
C# 
// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}
XAML 
<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>
C# 
// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

Sıkça Sorulan Sorular

S: "Paketlenmiş" ne anlama gelir?

Windows uygulamaları, çeşitli uygulama paketleme biçimleri kullanılarak son kullanıcılara teslim edilebilir. WinUI ve Windows Uygulama SDK'sı ile çalışırken, paketlenmiş uygulamalar uygulamanızı son kullanıcılara uygun yükleme ve güncelleştirmeler sunan bir şekilde paketlemek için MSIX kullanır. Dağıtım mimarisi ve çerçeveye bağımlı uygulamalar genel bakışı ziyaret ederek daha fazla bilgi edinin.

S: WinUI uygulamaları oluşturmak için VS Code kullanabilir miyim?

Teknik olarak mümkün olsa da, WinUI ve Windows Uygulama SDK'sı ile masaüstü uygulamaları oluşturmak için Visual Studio 2022 kullanmanızı kesinlikle öneririz. Daha fazla bilgi için Windows geliştirici SSS bakın.

S: WinUI uygulamaları oluşturmak için C++ kullanabilir miyim?

Evet! Daha fazla bilgi için bkz. C++/WinRT'ye giriş.