Öğretici: .NET ile WPF uygulaması oluşturma

Bu öğreticide, Windows Presentation Foundation (WPF) uygulaması oluşturmak için Visual Studio kullanmayı öğreneceksiniz. Visual Studio ile pencerelere denetimler ekler ve olayları işlersiniz. Bu öğreticinin sonunda, liste kutusuna ad ekleyen basit bir uygulamanız olmuş olacak.

Bu eğitimde, siz:

Yeni bir WPF uygulaması oluşturun.
Pencereye denetimler ekleyin.
Uygulamanın işlevselliğini sağlamak amacıyla denetim olaylarını işleyin.
Uygulamayı çalıştırın.

Bu öğretici izlenerek oluşturulan uygulamanın önizlemesi aşağıdadır:

WPF öğreticisi için bitmemiş örnek uygulama

Önkoşullar

Visual Studio 2026
- .NET masaüstü geliştirme iş yükünü seçin
- .NET 10 ayrı bileşeni seçin

WPF uygulaması oluşturma

Yeni uygulama oluşturmanın ilk adımı, Visual Studio açmak ve uygulamayı bir şablondan oluşturmaktır.

Visual Studio açın.
Yeni proje oluştur'u seçin.
Şablon ara kutusuna wpf yazın ve arama sonuçlarının görünmesini bekleyin.
code language açılan menüsünde C# veya Visual Basic öğesini seçin.
Şablon listesinde WPF Application öğesini ve ardından İleri'i seçin.

Önemli

WPF Uygulaması (.NET Framework) şablonunu seçmeyin.

Aşağıdaki görüntüde hem C# hem de Visual Basic .NET proje şablonları gösterilmektedir. Kod dili filtresini uyguladıysanız ilgili şablon listelenir.
Yeni projenizi yapılandırın penceresinde Proje adınıAdlar olarak ayarlayın ve İleri'yi seçin.

Konum yolunu ayarlayarak projenizi farklı bir klasöre de kaydedebilirsiniz.
Son olarak, Ek bilgiler penceresinde, Framework ayarı için .NET 10.0 (Uzun Vadeli Destek) seçin ve ardından Create öğesini seçin.

Visual Studio 2026'dan 'Ek Bilgiler' iletişim kutusunun ekran görüntüsü. 'Framework' açılır kutusunun '.NET 10 (Uzun Süreli Destek)' seçili ve kırmızı bir kutu ile vurgulanmış. 'Oluştur' düğmesi de kırmızı bir kutu ile vurgulanmış.

Visual Studio uygulamayı oluşturduktan sonra varsayılan MainWindow için XAML tasarımcısı penceresini açar. Tasarımcı görünmüyorsa tasarımcıyı açmak için Çözüm Gezgini penceresinde MainWindow.xaml dosyasına çift tıklayın.

Visual Studio önemli bölümleri

Visual Studio'daki WPF desteği, uygulama oluştururken etkileşimde olduğunuz beş önemli bileşene sahiptir:

WPF projesi oluştururken bilmeniz gereken Visual Studio 2026'nın .NET için önemli bileşenleri.

Çözüm Gezgini

Tüm proje dosyalarınız, kodunuz, pencereleriniz ve kaynaklarınız bu pencerede görünür.
Özellikler

Bu pencerede, seçilen öğenin bağlamına göre yapılandırabileceğiniz özellik ayarları gösterilir. Örneğin, Çözüm Gezgini öğesinden bir öğe seçerseniz dosyayla ilgili ayarlar görüntülenir. Tasarımcı'daki bir nesne seçilirse, denetimin veya pencerenin özellikleri görüntülenir.
Alet Çantası

Araç kutusu, tasarım yüzeyine ekleyebileceğiniz tüm denetimleri içerir. Geçerli yüzeye denetim eklemek için bir denetime çift tıklayın veya denetimi sürükleyip tasarımcıya bırakın. Bunun yerine XAML kod düzenleyicisi penceresini kullanarak bir kullanıcı arabirimi (UI) tasarlarken, sonuçların önizlemesini görüntülemek için XAML tasarımcısı penceresini kullanmak yaygın bir işlemdir.
XAML tasarımcısı

Bu, XAML belgesinin tasarımcısıdır. Etkileşimlidir ve Nesneleri Araç Kutusu'ndan sürükleyip bırakabilirsiniz. Tasarımcıdaki öğeleri seçip taşıyarak, uygulamanız için kullanıcı arabirimini görsel olarak oluşturabilirsiniz.

Hem tasarımcı hem de düzenleyici görünür olduğunda, birinde yapılan değişiklikler diğerine yansıtılır.

Tasarımcıda öğeleri seçtiğinizde, Özellikler penceresinde bu nesneyle ilgili özellikler ve öznitelikler görüntülenir.
XAML kod düzenleyicisi

Bu, bir XAML belgesi için XAML kod düzenleyicisidir. XAML kod düzenleyicisi, kullanıcı arabiriminizi tasarımcı olmadan el ile oluşturmanın bir yoludur. Tasarımcı, denetim tasarımcıya eklendiğinde denetimdeki özellikleri otomatik olarak ayarlayabilir. XAML kod düzenleyicisi size çok daha fazla denetim sağlar.

Hem tasarımcı hem de düzenleyici görünür olduğunda, birinde yapılan değişiklikler diğerine yansıtılır. Kod düzenleyicisinde metin imlecini hareket ettirdikçe, Özellikler penceresi o nesneye ilişkin özellik ve öznitelikleri görüntüler.

XAML'yi inceleme

Projenizi oluşturduktan sonra XAML kod düzenleyicisi açılır. Pencereyi görüntülemek için en az miktarda XAML kodu gösterir. Düzenleyici açık değilse, Çözüm Gezgini penceresinde MainWindow.xaml öğesine çift tıklayın. Aşağıdaki örneğe benzer bir XAML görmeniz gerekir:

<Window x:Class="Names.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:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Önemli

Visual Basic ile kodluyorsanız, XAML biraz farklıdır, özellikle de x:Class=".." özniteliği. Visual Basic'de XAML, nesnenin sınıf adını kullanır ve sınıfa yönelik ad alanını göz ardı eder.

XAML'yi daha iyi anlamak için parçalara ayıralım. XAML, basitçe WPF tarafından bir kullanıcı arabirimi oluşturmak için işlenen XML'dir. XAML'yi anlamak için en azından XML'nin temellerini öğrenmeniz gerekir.

Belge kökü <Window> , XAML dosyası tarafından açıklanan nesne türünü temsil eder. Dosya sekiz öznitelik bildirir ve bunlar genellikle üç kategoriye aittir:

XML ad alanları

XML ad alanı, XML'ye yapı sağlar. Dosyada bildirebileceğiniz XML içeriğini belirler.

Ana xmlns öznitelik, dosyanın tamamı için XML ad alanını içeri aktarır. Bu durumda, WPF tarafından tanımlanan türlere eşler. Diğer XML ad alanları bir ön ek bildirir ve XAML dosyası için diğer türleri ve nesneleri içeri aktarır. Örneğin, xmlns:local ad alanı local ön ekini bildirir ve projeniz tarafından bildirilen, yani Names kod ad alanında bildirilen nesnelere eşlenir.
x:Class özniteliği

Bu öznitelik, <Window> kodunuz tarafından tanımlanan türle eşler: MainWindow.xaml.cs veya MainWindow.xaml.vb dosyası; C# dilinde Names.MainWindow sınıfı ve Visual Basic'de MainWindow.
Title özniteliği

XAML nesnesinde bildirdiğiniz herhangi bir normal öznitelik, bu nesnenin bir özelliğini ayarlar. Bu durumda, Title özniteliği Window.Title özelliğini ayarlar.

Pencereyi değiştirme

Örnek uygulamamız için bu pencere çok büyük ve başlık çubuğu açıklayıcı değil. Bunu düzeltelim.

İlk olarak, F5 tuşuna basarak veya menüden Hata AyıklamaYı>Başlat Hata Ayıklama'yı seçerek uygulamayı çalıştırın.

Şablon tarafından hiçbir denetim olmadan oluşturulan varsayılan pencereyi ve MainWindow başlığını görürsünüz:
olarak ayarlayarak TitleNamespencerenin başlığını değiştirin.

Height değerini 180 ve Width değerini 260 olarak ayarlayarak pencerenin boyutunu değiştirin.

<Window x:Class="Names.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:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Düzeni hazırlama

WPF birçok farklı düzen denetimine sahip güçlü bir düzen sistemi sağlar. Düzen denetimleri alt denetimleri yerleştirmeye ve boyutlandırmaya yardımcı olur ve hatta bunu otomatik olarak da yapabilir. Bu XAML'de varsayılan olarak sağlanan düzen denetimi <Grid> denetimidir.

Kılavuz denetimi, tabloya çok benzer şekilde satır ve sütun tanımlamanıza ve denetimleri belirli bir satır ve sütun bileşiminin sınırları içine yerleştirmenize olanak tanır. Kılavuza istediğiniz sayıda alt kontrol veya diğer düzen kontrolleri ekleyebilirsiniz. Örneğin, belirli bir satır ve sütun birleşimine başka bir <Grid> denetimini yerleştirebilirsiniz; ardından bu yeni ızgara daha fazla satır ve sütun tanımlayabilir ve kendi alt öğelerine sahip olabilir.

Kılavuz denetimi, alt denetimlerini satırlara ve sütunlara yerleştirir. Her zaman kılavuzda tek bir satır ve sütunun tanımlandığı anlamına gelir, bu da varsayılan olarak kılavuzun tek bir hücre olduğu anlamını taşır. Bu varsayılan ayar, denetimleri yerleştirmede size çok fazla esneklik sunmaz.

Bu uygulama için gereken denetimler için kılavuzun düzenini ayarlayın.

öğesine yeni bir öznitelik <Grid> ekleyin: Margin="10".

Bu ayar, kılavuzu pencere kenarlarından uzaklaştırarak daha hoş bir görünüm sağlar.

kılavuzu dört hücreye bölerek iki satır ve iki sütun tanımlayın:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

XAML kod düzenleyicisinde veya XAML tasarımcısında kılavuzu seçin. XAML tasarımcısı her satırı ve sütunu gösterir:

İlk denetimi ekleme

Artık kılavuz yapılandırıldığına göre, kontroller eklemeye başlayabilirsiniz. İlk olarak etiket denetimini ekleyin.

Satır ve sütun tanımlarından sonra, <Grid> öğesinin içinde yeni bir <Label> öğesi oluşturun. öğesinin içeriğini dize değerine Namesayarlayın:
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
<Label>Names</Label>, içeriğini Namestanımlar. Bazı denetimler içeriğin nasıl işleneceğini anlayabilir, bazıları ise anlamaz. Bir denetimin içeriği, Content özelliğine eşlenir. İçeriği XAML özniteliği söz dizimi aracılığıyla ayarlarsanız şu biçimi kullanın: <Label Content="Names" />. Her iki yöntem de aynı şeyi gerçekleştirir ve etiketin içeriğini metnini Namesgörüntüleyecek şekilde ayarlar.

Etiket, kılavuzun ilk satırına ve sütununa otomatik olarak yerleştirildiği için pencerenin yarısını kaplar. İlk satırda bu kadar alana ihtiyacınız yoktur çünkü bu satırı yalnızca etiket için kullanacaksınız.
İlk <RowDefinition> öğesinin Height özniteliğini *'den Auto'e değiştirin.

Auto değeri, ızgara satırının boyutunu otomatik olarak içeriğinin boyutuna göre ayarlar; bu durumda etiket denetimine göre.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
Tasarımcı, etiketi artık kullanılabilir yüksekliğin az bir kısmını kaplayacak şekilde gösterir. Bir sonraki satır için daha fazla yer var.

Kontrol yerleşimi

Şimdi kontrol yerleşimi hakkında konuşalım. Önceki bölümde oluşturduğunuz etiket, kılavuzun 0. satırına ve 0. sütununa otomatik olarak yerleştirilir. Satır ve sütunların numaralandırması 0'da başlar ve 1 artar. Denetim kılavuz hakkında hiçbir şey bilmez ve denetim, kılavuz içindeki yerleşimini denetlemek için herhangi bir özellik tanımlamaz.

Denetim kılavuz hakkında bilgi sahibi olmadığında bir denetime farklı bir satır veya sütun kullanmasını nasıl söylersiniz? Ekli özellikler! Kılavuz, WPF tarafından sağlanan özellik sisteminden yararlanır.

Kılavuz denetimi, alt denetimlerin kendilerine ekleyebileceği yeni özellikleri tanımlar. Özellikler denetimin kendisinde mevcut değildir, ancak grid'e eklendikten sonra denetim tarafından erişilebilir olur.

Kılavuz, bir alt denetimin satır ve sütun yerleşimini belirlemek için iki özellik tanımlar: Grid.Row ve Grid.Column. Bu özellikleri denetimden atlarsanız, varsayılan değerler 0'dır. Bu nedenle, denetim kılavuzun 0. satırına ve 0. sütununa yerleştirilir. Grid.Column özniteliğini 1 olarak ayarlayarak <Label> denetiminin yerleşimini değiştirmeyi deneyin:

<Label Grid.Column="1">Names</Label>

Etiketin ikinci sütuna taşındığına dikkat edin. Oluşturacağınız sonraki denetimleri yerleştirmek için Grid.Row ve Grid.Column ilişkilendirilmiş özelliklerini kullanabilirsiniz. Şimdilik etiketi 0 sütununa geri yükleyin.

Ad liste kutusunu oluşturma

Artık kılavuz doğru boyutlandırıldı ve etiket oluşturuldu, etiketin altındaki satıra bir liste kutusu denetimi ekleyin.

<Label> denetiminin altına <ListBox /> denetimini tanımlayın.
Grid.Row özelliğini 1 olarak ayarlayın.
x:Name özelliğini lstNames olarak ayarlayın.

Bir denetim adlandırıldıktan sonra, kodun arka planında buna başvurabilirsiniz. özniteliğini kullanarak adı denetime atayın x:Name .

XAML şöyle görünmelidir:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Kalan denetimleri ekleme

Metin kutusu ve düğme ekleyin. Kullanıcı, liste kutusuna eklenecek bir ad girmek için bu denetimleri kullanır. Bu denetimleri düzenlemek için kılavuzda daha fazla satır ve sütun oluşturmak yerine, bu denetimleri düzen denetimine <StackPanel> yerleştirin.

Yığın paneli, denetimleri yerleştirme şekli bakımından ızgaradan farklıdır. Kılavuzdaki denetimleri yerleştirmek için Grid.Row ve Grid.Column ekli özelliklerini kullanırken, StackPanel otomatik olarak çalışır. Alt denetimlerinin her birini sıralı olarak sıralı olarak sıralar. Her denetimi üst üste koyarak bir araya getiriyor.

<ListBox> denetiminin altına <StackPanel> denetimini tanımlayın.
Grid.Row özelliğini 1 olarak ayarlayın.
Grid.Column özelliğini 1 olarak ayarlayın.
Margin öğesini 5,0,0,0 olarak ayarlayın.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
Daha önce kılavuzda Margin özniteliğini kullandınız, ancak yalnızca tek bir değer koydunuz: 10. Bu kenar boşluğunun değeri 5,0,0,0'dır ve bu değer 10'den çok farklıdır. Margin özelliği bir Thickness türdür ve her iki değeri de yorumlayabilir. Kalınlık, dikdörtgen bir çerçevenin her bir kenarının etrafındaki boşluğu tanımlar: sırasıyla sol, üst, sağ ve alt. Kenar boşluğunun değeri tek bir değerse, dört taraf için de bu değeri kullanır.
<StackPanel> denetiminin içinde bir <TextBox /> denetimi oluşturun.
1. x:Name özelliğini txtName olarak ayarlayın.
Son olarak, <TextBox> öğesinden sonra, hala <StackPanel> içinde, bir <Button> denetimi oluşturun.
1. x:Name özelliğini btnAdd olarak ayarlayın.
2. Margin öğesini 0,5,0,0 olarak ayarlayın.
3. İçeriği Add Name olarak ayarlayın.

XAML şöyle görünmelidir:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Pencerenin düzeni tamamlandı. Ancak uygulamanın işlevsel olması için herhangi bir mantığı yoktur. Ardından, denetim olaylarını kodlayıp uygulamanın gerçekten bir şeyler yapması için bağlamanız gerekir.

Click olayı için kod ekleme

<Button> oluşturduğunuzda, kullanıcının düğmeye basması durumunda uygulamanın tetiklediği bir Click olayı vardır. Bu olaya abone olun ve liste kutusuna bir ad eklemek için kod ekleyin. Olaylara abone olmak için XAML özniteliklerini, özellikleri ayarlamak için kullandığınız gibi kullanın.

<Button> denetimini bulun.

özniteliğini Click olarak ButtonAddName_Clickayarlayın.

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Olay işleyici kodunu oluşturun. ButtonAddName_Click'ye sağ tıklayın ve Tanıma Git'i seçin.

Bu eylem, arka planda, sağladığınız işleyici adıyla eşleşen bir yöntem oluşturur.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

Ardından, bu üç adımı gerçekleştirmek için aşağıdaki kodu ekleyin:

Metin kutusunun bir ad içerdiğinden emin olun.
Metin kutusuna girilen adın zaten mevcut olmadığını doğrulayın.
Adı liste kutusuna ekleyin.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Uygulamayı çalıştırma

Olayı işledikten sonra uygulamayı çalıştırın. Pencere görüntülenir ve metin kutusuna bir ad girebilirsiniz. Düğmeyi seçerek adı ekleyin.

.NET uygulaması için WPF'yi Visual Studio 2026'da çalıştırma.

Windows Presentation Foundation
XAML'ye genel bakış

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-09-24